Nivel Principiante
Imagina que tienes que hacer 100 invitaciones para una fiesta. En lugar de escribir a mano cada una, lo que te llevaría mucho tiempo, usas una plantilla de computadora. Escribes los datos una sola vez, y la computadora crea las 100 invitaciones de forma automática. Un SSG es un programa que hace lo mismo con tu página web: toma tu contenido, lo mezcla con una plantilla y crea todas las páginas de tu sitio antes de que nadie las visite. El resultado es un sitio súper rápido que no necesita un servidor.
Nivel Intermedio
Un SSG (Static Site Generator), o Generador de Sitios Estáticos, es una herramienta de software que crea un sitio web estático (compuesto por archivos HTML, CSS y JavaScript) a partir de contenido dinámico (como archivos Markdown, bases de datos o APIs). A diferencia de los CMS tradicionales, que generan la página «sobre la marcha» cada vez que un usuario la solicita, un SSG genera todas las páginas del sitio de antemano. El resultado es una colección de archivos estáticos que se pueden servir directamente a un navegador, sin necesidad de un servidor de base de datos o un backend dinámico.
Esta arquitectura ofrece grandes ventajas en cuanto a seguridad, rendimiento y escalabilidad. Es ideal para sitios web con contenido que no cambia frecuentemente, como blogs, portafolios o sitios de documentación. Ejemplos populares de SSG incluyen Gatsby, Next.js (que puede funcionar como SSG), Hugo y Jekyll.
Nivel Avanzado
Técnicamente, un SSG utiliza una arquitectura de pre-renderizado que desacopla la capa de datos de la capa de presentación. El flujo de trabajo típico de un SSG es el siguiente:
- Entrada de Datos: El SSG recibe el contenido del sitio, que puede estar en un formato de marcado simple (Markdown, YAML, JSON), o puede ser extraído de una API o un CMS headless.
- Plantillas: Utiliza un sistema de plantillas (como React, Vue, Go o Liquid) para definir la estructura de las páginas.
- Generación del Sitio: Al ejecutar un comando, el SSG combina los datos con las plantillas para generar una colección de archivos HTML, CSS y JavaScript completamente estáticos.
- Despliegue: Los archivos estáticos resultantes se despliegan en un servidor web o en una CDN, que los puede servir a los usuarios de forma extremadamente rápida.
Las ventajas técnicas del SSG son significativas:
- Rendimiento: Las páginas se cargan de forma casi instantánea porque el navegador no tiene que esperar a que el servidor las genere, lo que es un factor clave para el SEO y la UX.
- Seguridad: Al no tener una base de datos o un backend dinámico expuesto, el riesgo de ataques como la inyección SQL o XSS se reduce drásticamente.
- Escalabilidad: Los archivos estáticos son fáciles de replicar y servir a través de una CDN a millones de usuarios sin sobrecargar el servidor de origen.
Sin embargo, los SSG tienen limitaciones para sitios con mucho contenido dinámico que requiere actualizaciones en tiempo real. Para mitigar esto, frameworks modernos como Next.js han introducido un enfoque híbrido, combinando la generación estática para las páginas que lo permiten y el SSR para las que necesitan contenido dinámico.
« Volver al índice del glosario