SSG / SSR / Híbrido
¿Qué es SSG, SSR y el enfoque híbrido?
Cuando trabajamos con aplicaciones web modernas —especialmente en arquitecturas JAMstack y CMS headless como Content Island— es importante entender cómo se genera y entrega el contenido. Existen tres enfoques principales: SSG (Static Site Generation), SSR (Server-Side Rendering) y el enfoque híbrido, que combina lo mejor de ambos mundos.
🏗️ SSG – Static Site Generation (Generación Estática)
En SSG, las páginas del sitio web se generan en tiempo de construcción (build time). Esto significa que el contenido dinámico del CMS se consulta durante el build y se convierte en archivos HTML estáticos listos para ser servidos desde un CDN.
Ventajas
- ⚡ Rendimiento excelente: los archivos HTML ya están pre-generados.
- 🔒 Mayor seguridad: no hay lógica en el servidor que se pueda explotar.
- 📦 Fácil de desplegar: puede servirse desde cualquier CDN globalmente.
- 🔄 Contenido actualizable automáticamente: si se configura un webhook desde el CMS, se puede lanzar un nuevo build automáticamente cada vez que el contenido se actualiza.
Desventajas
- 🕐 No ideal para contenido que cambia constantemente.
- 🧱 Requiere reconstrucción del sitio (total o parcial) para reflejar cambios en el contenido.
🌐 SSR – Server-Side Rendering (Renderizado del lado del servidor)
En SSR, las páginas se generan dinámicamente en el servidor para cada solicitud. El contenido se consulta en tiempo real desde el CMS y se convierte en HTML justo antes de enviarlo al navegador.
Ventajas
- 🔄 Contenido siempre actualizado: ideal para contenido dinámico o personalizado.
- 🛠️ Perfecto para experiencias personalizadas (ej. usuarios autenticados).
- 🧠 Algunas plataformas permiten caché en el SSR, lo que mejora el rendimiento al evitar la generación repetida para contenido que no cambia.
Desventajas
- 🐢 Más lento que SSG: se genera bajo demanda.
- 🌩️ Dependencia del servidor: mayor complejidad y puntos de fallo.
🔀 Enfoque Híbrido
Muchas plataformas modernas (como Next.js o Nuxt) permiten combinar ambos enfoques. Puedes decidir qué páginas se generan estáticamente (SSG) y cuáles se sirven dinámicamente con SSR.
Ejemplos comunes:
- Landing pages o posts de blog: con SSG.
- Dashboards de usuario, carritos de compra: con SSR.
- También puedes usar técnicas como ISR (Incremental Static Regeneration), que permiten regenerar páginas estáticas de forma automática tras cierto tiempo o eventos.
Ventajas
- 🎯 Flexibilidad total: cada página usa el enfoque que más le conviene.
- ⚖️ Mejor rendimiento general, sin sacrificar actualización del contenido.
- 🧩 Escalabilidad y optimización por secciones del sitio.
Comparativa General
| Criterio | SSG | SSR | Híbrido |
|---|---|---|---|
| Frecuencia de cambio | Baja | Alta | Mixta |
| Rendimiento | Excelente (CDN) | Bueno (servidor + caché) | Óptimo por página |
| SEO | Muy bueno | Muy bueno | Muy bueno |
| Complejidad | Baja | Media/Alta | Media |
| Escenarios ideales | Blogs, landings, docs | Dashboards, apps dinámicas | Sitios complejos y escalables |