𝗢𝘃𝗲𝗿𝗰𝗼𝗺𝗶𝗻𝗴 𝗦𝗣𝗔 𝗟𝗶𝗺𝗶𝘁𝗮𝘁𝗶𝗼𝗻𝘀 𝗳𝗼𝗿 𝗦𝗘𝗢

Single Page Applications (SPA) like Vue.js offer fast user experiences.

The transitions feel fluid. State management works well.

But SPAs have a major problem for organic search traffic.

Search engine bots often see an empty HTML root div. They see nothing.

Google eventually reads JavaScript. It takes time. Other search engines struggle more.

We built Global Full-Stack Developer (GFD) using Vue 3. We needed SEO. We did not want to move everything to a Server-Side Rendered (SSR) framework like Nuxt.

We solved this with build-time prerendering.

Prerendering creates static HTML files for your routes during your build process.

When a bot visits your /about or /services page, it sees a full HTML document. It does not see an empty shell.

We used vite-plugin-prerender for our Vite setup.

Here is how you implement it.

  1. Install the plugin as a development dependency:

npm install vite-plugin-prerender -D

  1. Configure the plugin in your vite.config.js file.

  2. List your specific routes that need indexing.

This method gives you the speed of an SPA and the SEO benefits of static sites.

Source: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd