Generadores de sitios estáticos comparados, con tiempos de build medidos
Comparativa de generadores de sitios estáticos
Generadores de sitios estáticos: Astro vs Hugo vs Eleventy, tiempos de build | We.Inc
Astro, Hugo, Eleventy, Next.js static export y Jekyll comparados, con tiempos de build medidos sobre los mismos 1,000 posts en Markdown, una tabla de funciones y la misma plantilla de post en cada uno.
Un generador de sitios estáticos convierte Markdown y plantillas en archivos HTML simples durante el build, que cualquier hosting o CDN puede servir rápidamente. Hugo es el más rápido; en nuestra prueba convirtió 1,000 posts en páginas en menos de medio segundo. Eleventy es el más flexible, y Astro es la mejor opción cuando algunas partes necesitan componentes interactivos.
Elige en una línea
Si
Usa
Quieres los builds más rápidos para miles de páginas
Hugo
Quieres JavaScript puro y pocas convenciones impuestas
Eleventy
Necesitas algunos componentes interactivos
Astro
Ya tienes un código en React o Next.js
Next.js static export
Dimos a Astro, Eleventy y Hugo los mismos 1,000 posts en Markdown y cronometramos tres builds limpios de cada uno, para que los números sean comparables. Debajo de los resultados, la misma página de post en cada herramienta muestra cómo es trabajar con ella.
Escribe el contenido como archivos Markdown con front matter.
Escribe una plantilla que envuelva cada post en el diseño de tu página.
Ejecuta el build; cada archivo se convierte en una página HTML.
Sube la carpeta de salida a cualquier hosting estático o CDN.
El tiempo de build importa sobre todo en sitios grandes y despliegues de vista previa; por debajo de unos cientos de páginas, todos son rápidos.
No pongas imágenes en carpetas de Markdown que se copian tal cual; deja que el sistema de imágenes de la herramienta las redimensione.
Añade un sitemap y URL canónicas desde el principio; la mayoría de los generadores tienen un plugin para ambas cosas.
Para editores sin perfil técnico, combina el generador con un CMS headless o basado en Git.
Preguntas frecuentes
¿Qué es el Jamstack?
Una forma de crear sitios como HTML, CSS y JavaScript pregenerados y servidos desde una CDN, con funciones dinámicas añadidas mediante APIs. Los generadores de sitios estáticos producen la parte pregenerada.
¿Es Hugo más rápido que Astro?
Para páginas de Markdown simples, sí, y por mucho en nuestra prueba: unos 0.3 segundos frente a aproximadamente 1 segundo para 1,000 posts una vez calentada la caché. Astro hace más trabajo por página, como comprobar los tipos del contenido y renderizar componentes.
¿Puede un sitio estático tener formularios y búsqueda?
Sí. Los formularios pueden enviar a un servicio de formularios o a una función serverless, y la búsqueda puede ejecutarse en el navegador a partir de un índice pregenerado. Ninguna de las dos cosas necesita un servidor tradicional.
¿Es bueno un sitio estático para el SEO?
Mucho. Cada página es HTML completo desde la primera carga, rápido de servir y fácil de leer para los rastreadores. Aun así necesitas buenos títulos, descripciones, enlaces internos y un sitemap.
Cuándo no usar un generador
Si las personas que actualizan el sitio no se sienten cómodas con Markdown y Git, un creador de sitios web alojado o un CMS con editor visual te ahorrará mucho acompañamiento. Los generadores brillan cuando el sitio lo gestionan desarrolladores o cuando un CMS les suministra el contenido.
Tiempos de build, medidos
Los mismos 1,000 posts en cada herramienta, borrando la salida antes de cada ejecución. Las ejecuciones repetidas son más rápidas porque las herramientas y el sistema operativo ya tienen las cachés calientes.
Medido: 1,000 posts en Markdown a HTML (segundos)
Generador
Primera ejecución
Ejecuciones repetidas
Hugo 0.167
Eleventy 3.1
Astro 7.3
0.97 a 1.01
Cómo se comparan
Uno al lado del otro
Astro
Hugo
Eleventy
Next.js export
Jekyll
Lenguaje
JavaScript / TypeScript
Go (un solo binario)
JavaScript
JavaScript / TypeScript
Ruby
Plantillas
.astro, además de React, Vue, Svelte
Plantillas de Go
Nunjucks, Liquid, WebC, JS y más
React
Liquid
JavaScript enviado por defecto
Ninguno
Ninguno
Ninguno
Runtime de React
Ninguno
Partes interactivas
Islas con directivas de cliente
Añade tus propios scripts
Añade tus propios scripts o WebC
Cualquier componente de React
Añade tus propios scripts
Licencia
MIT
Apache-2.0
MIT
MIT
MIT
Ideal para
Sitios de contenido que necesitan algunas partes interactivas
Sitios muy grandes, builds rápidos
Sitios flexibles y minimalistas
Equipos de React que quieren salida estática
Blogs en GitHub Pages
La misma página de post en cada uno
Astro: una página de post a partir de una colección de contenido
La colección comprueba el front matter de cada post contra un schema, y getStaticPaths crea una página por post durante el build.
Eleventy: un diseño para cada post de una carpeta
Un archivo posts.json en la carpeta aplica el diseño a todos los archivos Markdown que contiene, mediante la cascada de datos de Eleventy.
Hugo: una plantilla de página individual
Hugo elige esta plantilla para cada página de content/. .Content es el Markdown renderizado.
Next.js: static export
Poner output en export escribe archivos HTML simples en la carpeta out durante el build. Las funciones que necesitan un servidor, como las server actions y el renderizado bajo demanda, no están disponibles en este modo.