Superando la limitación de las SPA

Las Single Page Applications (SPA) como Vue.js ofrecen una gran velocidad y experiencia de usuario. Las transiciones fluidas y la gestión rápida del estado facilitan el desarrollo.

Te enfrentas a un problema si tu negocio depende del tráfico de búsqueda orgánica. Los bots de los motores de búsqueda a menudo ven un cascarón HTML vacío cuando visitan una SPA. Google procesa JavaScript lentamente. Otros motores de búsqueda tienen dificultades para indexar tu contenido en absoluto.

Construimos Global Full-Stack Developer (GFD) usando Vue 3. Necesitábamos SEO sin tener que migrar todo el código base a un framework de Server-Side Rendering (SSR) como Nuxt.

Elegimos el prerendering en tiempo de compilación.

El prerendering convierte rutas específicas en archivos HTML estáticos durante tu proceso de compilación. Cuando un bot visita tu sitio, recibe un documento HTML completo. Esto ocurre en lugar de un div vacío.

Usamos vite-plugin-prerender para nuestra configuración de Vite.

Sigue estos pasos para implementarlo:

  1. Instala el plugin como una dependencia de desarrollo: npm install vite-plugin-prerender -D

  2. Configura tu vite.config.js para listar tus rutas.

  3. Ejecuta tu comando de build.

Este método te brinda beneficios de SEO sin la complejidad de un SSR completo.

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