Gatsby vs Hugo, una comparación detallada

En este artículo, comparo dos generadores de sitios estáticos, Gatsby y Hugo. Hablo de la familiaridad con el marco, la estabilidad, la seguridad, las herramientas, la velocidad de construcción, el rendimiento y la comunidad que los rodea. Entonces empecemos.

Hace aproximadamente un año, cambié mi sitio web de Wordpress a Hugo, que es un generador de sitios estático escrito en Go que usa las bibliotecas de plantillas de Go para crear plantillas. Recientemente hice una evaluación de viabilidad de Gatsby, otro generador de sitios estáticos escrito en React que usa React para crear plantillas.

En este artículo, comparo las diferencias entre Hugo v0.42 y Gatsby v1.93. Para la comparación, utilicé este sitio de Hugo y este sitio de Gatsby. El código de cada uno se puede encontrar en Github para el sitio de Hugo y para el sitio de Gatsby.

Familiaridad con el marco

Si no está familiarizado con React y no planea aprender React, probablemente debería elegir Hugo. Si conoces React y te gusta, ¿deberías elegir a Gatsby? Bueno, no necesariamente.

Yo diría que necesita una comprensión decente de React (consulte Aprenda React con estos recursos) si desea usar Gatsby. Y para comprender React, necesita una comprensión decente de JavaScript (consulte Aprenda JavaScript con estos recursos).

Aunque he estado usando Hugo durante casi un año, no era necesario que entendiera Go. También tuve que aprender un poco sobre las bibliotecas de plantillas de Go. Sin embargo, descubrí que tenía que consultar la documentación con más frecuencia con Hugo debido a mi falta de familiaridad. Gatsby requiere una comprensión más profunda de React de lo que Hugo espera de Go. Sin embargo, si la familiaridad con el marco fuera el único criterio, elegiría Gatsby porque es bueno no tener que consultar la documentación mientras agrego nuevas funciones a mi sitio web.

Estabilidad

Una forma de evaluar la estabilidad sería comparar los problemas de Hugo en GitHub con los problemas de Gatsby en GitHub. Verás que Gatsby tiene más funciones (lo cual es emocionante) pero también tiene más errores (lo cual no es tan emocionante). Inicialmente no consideré la estabilidad como un criterio hasta que encontré este error y eso me hizo darme cuenta de la importancia de la estabilidad en el software. Puede que me lo esté tomando personalmente por el tiempo y el esfuerzo que dediqué a encontrar ese error, pero sigo pensando que Hugo es más estable que Gatsby.

Seguridad

Gatsby usa JavaScript, y las aplicaciones de JavaScript son conocidas por requerir muchos módulos de nodo para ejecutarse. Incluso hay un módulo Node que envía tweets Hot Pocket y otro que recolecta números de tarjetas de crédito: D. Los sitios estáticos tienden a ser más seguros por naturaleza, pero todavía creo que vale la pena mencionar que más dependencias dan como resultado más código en el que no puedes confiar.

Estampación

Gatsby tiene todas las ventajas de la cadena de herramientas de JavaScript y todas las desventajas de la fatiga de JavaScript. Además de eso, Gatsby tiene una biblioteca de complementos realmente agradable. En particular, gatsby-plugin-offline me permitió agregar fácilmente capacidades fuera de línea a mi sitio web, que todavía no he descubierto con Hugo.

Por otro lado, algunas cosas que requieren un complemento con Gatsby simplemente salen de la caja con Hugo. Por ejemplo, se necesita gatsby-plugin-react-helmet para editar la etiqueta head, mientras que esto se puede hacer con HTML simple en Hugo. Como disfruté usando las herramientas que venían con Gatsby, le doy esta a Gatsby.

Velocidad de construcción

Hugo puede crear mi sitio web sin herramientas adicionales en menos de 100 ms. Gatsby puede crear mi sitio web en unos 15 segundos, pero esto incluye muchas herramientas adicionales. Al agregar PostCSS e Imagemin a la compilación de Hugo, el tiempo de compilación aumenta a aproximadamente 5 segundos. Observar los cambios durante el desarrollo también fue más rápido con Hugo. Creo que Hugo es el ganador aquí.

Documentación

Tanto Gatsby como Hugo tienen muy buena documentación. Hugo tiene un inicio rápido y Gatsby tiene una sección de inicio. Gatsby también tiene un tutorial realmente agradable, que nivela la curva de aprendizaje más empinada. Personalmente, me resultó más fácil comenzar con Gatsby, pero eso se debe a que ya entendí React. Creo que es justo decir que tanto Hugo como Gatsby tienen una gran documentación.

Actuación

Con Lighthouse, la puntuación de rendimiento fue 100 para mi sitio en Hugo y 95 para mi sitio en Gatsby. La primera pintura con contenido para una conexión 3G fue de aproximadamente 1 segundo para el sitio de Hugo y 1,5 segundos para el sitio de Gatsby. Con la prueba de página web, el tiempo de carga en una conexión 2G fue de 8,7 segundos en Hugo y 11,7 segundos en Gatsby.

Sin embargo, al hacer una prueba manual simple para ver qué sitio se carga primero, Gatsby fue notablemente más rápido, por lo que realmente no entiendo qué estaba midiendo Lighthouse o Web Page Test. Además, como Gatsby es una aplicación de una sola página, navegar dentro del sitio web no requiere una solicitud del servidor. Las páginas simplemente se vuelven a renderizar con JavaScript. De todos modos, puedo decir con certeza que tanto Hugo como Gatsby son rápidos. Me interesaría escuchar sus opiniones en los comentarios a continuación.

Comunidad

Gatsby está ganando popularidad rápidamente, lo que viene con una comunidad próspera. Eso no quiere decir que la comunidad de Hugo sea aburrida. Si nos guiamos por las estrellas de GitHub, Hugo tiene más de 27 mil y Gatsby tiene más de 23 mil. En Twitter, Gatsby parece ser más activo que Hugo.

Pensamientos finales

Entonces, ¿cuál deberías elegir? Gatsby usa React, con el que estoy más familiarizado, tiene mejores herramientas y tiene una comunidad próspera. Por otro lado, Hugo es más estable y dedica menos tiempo a construir. Para sitios web más grandes, las velocidades de compilación se vuelven más importantes y es posible que a algunos de ustedes no les interese React en absoluto. En mi caso, la estabilidad era el criterio más importante, así que decidí quedarme con Hugo. Estoy muy emocionado de ver lo que trae el futuro en este espacio.

Antes de ir ... ¡ Gracias por leer el artículo! Escribo sobre mis experiencias profesionales y educativas como desarrollador de software autodidacta, así que consulte mi blog o suscríbase a mi boletín para obtener más contenido.

También podría gustarte:

  • Cómo publico actualizaciones en mi sitio web personal
  • Material de aprendizaje: desarrollo de software (una lista de recursos de aprendizaje, comenzando con Introducción a la informática)
  • ¿Vale la pena aprender el desarrollo web full-stack?