I want to build a single page application with vue https://vuetifyjs.com/en/ or https://coreui.io/vue/. but some references say that single page application is not good in SEO. so I thought about using it. perhaps the best solution is to use a multi page application. if that is the best choice, what is the best technology to use vue to develop multi page applications? The API is already available, so I just use it
please provide some of the best options. so I can have several options. thank you
3
Answers
It is correct that a standard VueJS-SPA is bad for SEO, as the first HTML is usually delivered empty and only when the Vue-code is downloaded and executed, your page will be dynamically rendered and mounted on the client.
Building a multi-page (as in every route leads to a completely new HTML page being sent down by the server) is not really feasible with Vue though.
Instead, I would advise to look into Server-Side-Rendering for VueJS. This can be achieved with standard VueJS or with a framework that is specialized in this such as NuxtJS.
What this technique will effectively do is that it will render the first page, the user visits on the server and send down the rendered HTML. This will lead to good SEO, as the crawler receives a rendred HTML page every time. For every subsequent page-navigation the site will then simply behave like an SPA.
The general solution to SEO with SPAs is to enable server-side rendering of your SPA. This works by having your HTTP server serve the fully rendered application to the client; rather, than sending boilerplate HTML and then having the client make subsequent requests for app bundles and whatnot.
While others have chimed in with SSR solutions, another route you could take is using prerendering. prerender-spa-plugin is a web pack plugin that can be used for this, which takes in the routes you’d like to render, and generates the HTML and JS files for it.
There is also Prerender.io, which intercepts requests from web crawlers and prerenders the SPA before serving it to the crawler. This service is free for up to 250 pages, and takes almost all the complexity away from the developer.
These can both be fantastic options if you’re new to Vue, don’t want to manage the complexity of server side rendering, or don’t want to get into using something like Nuxt for static site generation.
The company I work at uses Nuxt (we use universal mode, also known as server side rendering), but we’ve also been very happy with the static site rendering it can do using generate for our random smaller projects. Just be aware that this comes with the added complexity of another framework built on top of Vue, and plenty of extra hurdles that accompany that.