¿Qué añade el server-side rendering con Nuxt?

Question

Accepted Answer

**Nuxt** es el meta-framework para Vue (el equivalente de Next.js para React). Añade **server-side rendering (SSR)**, enrutamiento basado en archivos y capacidades full-stack sobre Vue — convirtiendo Vue de una biblioteca del lado del cliente en un framework de aplicación completo. ## El problema central que resuelve SSR ```text Plain Vue SPA: server sends an empty

+ JS bundle → browser downloads JS, runs Vue, THEN renders content → slow first paint, and crawlers may see a blank page (bad SEO) Nuxt SSR: server renders the full HTML and sends it ready-to-view → fast first paint, content visible immediately, great SEO → Vue then "hydrates" it to make it interactive ``` SSR significa que el servidor genera HTML completo por solicitud, para que los usuarios y los motores de búsqueda obtengan contenido real de inmediato, y luego Vue toma el control (hidratación) para la interactividad. ## Lo que proporciona Nuxt ```text ✓ Rendering modes per route: SSR, SSG (static), ISR, or SPA — your choice ✓ File-based routing — pages/ folder = routes (no manual router config) ✓ Auto-imports — components/composables imported automatically ✓ Server routes / API — server/api/ for backend endpoints (full-stack) ✓ Data fetching — useFetch / useAsyncData that work on server AND client ✓ SEO helpers — useHead/useSeoMeta for meta tags ``` ## Ejemplo de enrutamiento basado en archivos ```text pages/index.vue → / pages/about.vue → /about pages/users/[id].vue → /users/:id (dynamic) ``` ## Obtención de datos universal ```vue ``` `useFetch`/`useAsyncData` obtienen datos en el servidor durante SSR (para que los datos estén en el HTML inicial) y evitan una doble obtención en la hidratación — una conveniencia clave de Nuxt. ## Flexibilidad de modo de renderizado ```text SSR → fresh HTML per request (dynamic, personalized, SEO) SSG → pre-rendered at build (fastest, for mostly-static content) Hybrid → choose per route via routeRules ``` ## Por qué es importante Nuxt aporta a Vue lo que Next.js aporta a React: SSR/SSG para **SEO y renderizado rápido inicial**, enrutamiento basado en archivos, una capa de servidor para aplicaciones full-stack, y convenciones sensatas (auto-imports, obtención de datos universal). Para sitios de contenido, comercio electrónico o cualquier cosa que requiera SEO y cargas rápidas, una SPA de Vue simple se queda corta — el renderizado del servidor de Nuxt es la respuesta, mientras le permite elegir el modo de renderizado óptimo por ruta.