𝗢𝘃𝗲𝗿𝗰𝗼𝗺𝗶𝗻𝗴 𝘁𝗵𝗲 𝗦𝗣𝗔 𝗟𝗶𝗺𝗶𝘁𝗮𝘁𝗶𝗼𝗻
Single Page Applications (SPA) like Vue.js offer great speed and user experience. Fluid transitions and fast state management make development easy.
You face a problem if your business relies on organic search traffic. Search engine bots often see an empty HTML shell when they visit an SPA. Google handles JavaScript slowly. Other search engines struggle to index your content at all.
We built Global Full-Stack Developer (GFD) using Vue 3. We needed SEO without moving the entire codebase to a Server-Side Rendering (SSR) framework like Nuxt.
We chose build-time prerendering.
Prerendering turns specific routes into static HTML files during your build process. When a bot visits your site, it receives a full HTML document. This happens instead of an empty div.
We used vite-plugin-prerender for our Vite setup.
Follow these steps to implement it:
Install the plugin as a development dependency: npm install vite-plugin-prerender -D
Configure your vite.config.js to list your routes.
Run your build command.
This method gives you SEO benefits without the complexity of full SSR.
Source: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd