Qué es SSR
SSR (Server-Side Rendering) es la técnica de generar el HTML en el servidor cada vez que un usuario solicita la página.
Flujo:
- Usuario solicita
/sobre-nosotros/ - Servidor ejecuta código (Node.js, PHP, Python…)
- Genera el HTML personalizado
- Lo envía al navegador
Qué es SSG
SSG (Static Site Generation) es la técnica de generar todas las páginas HTML en build time, antes de que nadie las solicite.
Flujo:
- Durante
npm run build, se generan archivos HTML estáticos - Estos archivos se suben a un CDN
- Cuando un usuario solicita una página, recibe el HTML pre-generado
Comparativa
| Aspecto | SSR | SSG |
|---|---|---|
| TTFB | 100-500 ms (depende del servidor) | 30-100 ms (desde CDN edge) |
| Contenido dinámico | Sí, cada request | No, solo cambios en build |
| Personalización por usuario | Sí | No (sin JS adicional) |
| Coste servidor | Alto (servidor Node ejecutando) | Bajo (CDN estático) |
| Escalabilidad | Limitada por servidor | Casi infinita |
| SEO | Bueno (HTML servido) | Excelente (HTML pre-generado) |
| Complejidad | Mayor | Menor |
Cuándo usar SSR
- Aplicaciones con datos dinámicos en cada request (dashboards SaaS, feeds personalizados)
- Contenido personalizado por usuario (carrito, sesión)
- Pricing dinámico o stock en tiempo real
- Necesidad de SEO sobre contenido cambiante
Cuándo usar SSG
- Webs de contenido: blog, magazine, web corporativa
- Landing pages comerciales
- Documentación
- Marketing sites
- Ecommerce pequeño-mediano con catálogo estable
- Cualquier sitio donde el contenido cambia <1 vez/día
Frameworks por tipo
SSG puro
- Astro (recomendado para SEO/contenido)
- Hugo
- Eleventy
- Jekyll
SSR puro
- Next.js (App Router con RSC)
- Nuxt
- SvelteKit
- Remix
Híbridos (SSG + SSR + ISR)
- Astro con adapter (Cloudflare, Vercel)
- Next.js (puede ser ambos según ruta)
- Nuxt 3
ISR (Incremental Static Regeneration)
Un híbrido moderno: páginas estáticas que se re-generan periódicamente o on-demand sin un nuevo build completo. Lo popularizó Vercel con Next.js.
Útil para ecommerce con miles de productos: las fichas son SSG pero se regeneran cuando cambia el stock.
Recomendación
Para la mayoría de webs pyme: SSG es la elección correcta. Más rápido, más barato, más simple. SSR solo para SaaS complejos.
Lee Astro vs Next.js para empresas para profundizar.