0Pricing
Vue Academy · Lección

Modo SSR frente a SSG y SPA

ssr:true/false, prerender de Nitro, comando generate y renderizado híbrido por ruta

Modo SSR frente a SSG y SPA es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Descripción general de los modos de renderizado

Nuxt puede renderizar su aplicación de tres formas: SSR (el servidor renderiza cada solicitud), SSG (las páginas se generan previamente durante la compilación) y SPA (todo se renderiza en el navegador). Incluso puede combinarlas por ruta.

SSR: el modo predeterminado

Con ssr: true (el valor predeterminado), el servidor renderiza HTML para cada solicitud y el cliente lo hidrata. Esto proporciona una primera visualización rápida y un buen SEO, porque los rastreadores ven todo el marcado.

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

Cuándo destaca SSR

SSR es adecuado para contenido que cambia con frecuencia o está personalizado, como paneles, feeds y tiendas online con precios en tiempo real, cuando necesita HTML actualizado en cada solicitud.

Modo SPA

Establecer ssr: false convierte Nuxt en una aplicación de una sola página: el servidor envía una estructura vacía y el navegador lo renderiza todo. Es más sencillo de alojar, pero ofrece un SEO más débil y una primera visualización más lenta.

export default defineNuxtConfig({
  ssr: false
})

Cuándo conviene SPA

El modo SPA es adecuado para herramientas internas y aplicaciones protegidas por un inicio de sesión, donde el SEO no importa y desea desplegar archivos estáticos en cualquier CDN.

SSG: generación de sitios estáticos

Al ejecutar nuxt generate, se renderiza previamente cada página como HTML estático durante la compilación. El resultado es una carpeta de archivos que puede alojar en cualquier lugar sin un servidor Node.

npx nuxt generate
# outputs static HTML to .output/public

Cuándo conviene SSG

SSG es perfecto para contenido que cambia pocas veces, como blogs, documentación y sitios de marketing. Las páginas son extremadamente rápidas y económicas de servir desde una CDN.

Renderizado por ruta con routeRules

La configuración routeRules establece el modo de renderizado según el patrón de la ruta. Esto es renderizado híbrido: distintas partes de una misma aplicación usan estrategias diferentes.

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

Opciones habituales de routeRules

prerender: true genera la página durante la compilación; ssr: false la convierte en una SPA; swr: n almacena en caché el resultado SSR durante n segundos (stale-while-revalidate); redirect redirige a los usuarios a otro lugar.

Regeneración estática incremental

La opción isr renderiza previamente la página en la primera solicitud y almacena el resultado en caché, regenerándolo periódicamente. Combina la velocidad de SSG con la frescura de SSR para las páginas populares.

routeRules: {
  '/products/**': { isr: 600 }
}

Elegir una estrategia

Comience con SSR como opción predeterminada para obtener el mejor equilibrio entre SEO e interactividad. Use SSG para contenido estático, SPA para aplicaciones privadas y routeRules para ajustar rutas individuales a medida que surjan necesidades de rendimiento.

Comprobación rápida

Compruebe sus conocimientos sobre los modos de renderizado.

Resumen

Ha aprendido sobre los modos de renderizado:

  • SSR (predeterminado) renderiza por solicitud: ofrece buen SEO y una primera visualización rápida.
  • ssr:false proporciona una SPA para aplicaciones privadas.
  • nuxt generate produce un sitio SSG estático.
  • routeRules permite el renderizado híbrido: prerender, swr, isr y ssr:false por ruta.

Preguntas frecuentes

¿La lección «Modo SSR frente a SSG y SPA» es gratis?

Sí — el texto completo de «Modo SSR frente a SSG y SPA» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Modo SSR frente a SSG y SPA»?

ssr:true/false, prerender de Nitro, comando generate y renderizado híbrido por ruta Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Modo SSR frente a SSG y SPA»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3
  2. Obtención de datos: useFetch y useAsyncData
  3. Rutas de servidor y endpoints de API en Nuxt
  4. Modo SSR frente a SSG y SPA
← Volver a Vue Academy