Surmonter les limitations des SPA
Les Single Page Applications (SPA) comme Vue.js offrent une grande rapidité et une excellente expérience utilisateur. Des transitions fluides et une gestion d'état rapide facilitent le développement.
Vous êtes confronté à un problème si votre activité repose sur le trafic de recherche organique. Les robots des moteurs de recherche ne voient souvent qu'une coquille HTML vide lorsqu'ils visitent une SPA. Google traite le JavaScript lentement. D'autres moteurs de recherche ont même du mal à indexer votre contenu.
Nous avons développé Global Full-Stack Developer (GFD) en utilisant Vue 3. Nous avions besoin de SEO sans avoir à migrer l'intégralité de la base de code vers un framework de Server-Side Rendering (SSR) comme Nuxt.
Nous avons choisi le pré-rendu au moment du build (build-time prerendering).
Le pré-rendu transforme des routes spécifiques en fichiers HTML statiques lors de votre processus de build. Lorsqu'un robot visite votre site, il reçoit un document HTML complet, au lieu d'une div vide.
Nous avons utilisé vite-plugin-prerender pour notre configuration Vite.
Suivez ces étapes pour l'implémenter :
Installez le plugin en tant que dépendance de développement : npm install vite-plugin-prerender -D
Configurez votre vite.config.js pour lister vos routes.
Lancez votre commande de build.
Cette méthode vous offre les avantages du SEO sans la complexité d'un SSR complet.
Source : https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd