Qué es Gatsby (y Next)?

Gatsby es un framework (gatsbyjs.org) y también una empresa dedicada al hosting (gatsbyjs.com), repitiendo la fórmula de wordpress.org (framework) y wordpress.com (empresa)

Bueno, eso era antes, ahora han decidido (con cierta polémica) unir ambos dominios, por lo que el trabajo altruista de la comunidad de repente ve cómo sus esfuerzos sirven para promocionar una empresa privada

Ciertamente es complicado justificar ese movimiento, aunque si Gatsby como empresa sale adelante, Gatsby como framework se verá sin lugar a dudas muy reforzado

Y qué aporta Gatsby que no aportase React?

Mayor facilidad de uso, cuando uno piensa en desarrollo web

Es decir, cuando uno se plantea desarrollar una aplicación con React también tiene sentido utilizar Gatsby o Next, pero las ventajas son menos claras y las limitaciones impuestas pesan más en el desarrollo

Aún y así, desarrollar una aplicación con Gatsby para móvil puede tener todo el sentido del mundo, la decisión no está clara y al final dependerá de varios factores, y uno de ellos (quizá el más importante) es ver con qué tecnología está más cómodo el programador

Sin embargo, para una aplicación web, utilizar Gatsby o Next aceleran notablemente el desarrollo aunque tengas que pasar sí o sí por la curva de rigor para aprender cómo funciona el framework en concreto

Las ventajas tanto para Gatsby como para Next (en su aplicación de sitio estático) son las siguientes:

• Hay varias opciones de hostings gratuitos de primer nivel con la máxima velocidad

• Cada cambio de la página requiere una nueva compilación, pero el flujo de trabajo está tan bien engrasado que en realidad es una ventaja

• El lenguaje es JavaScript, quizá el mejor lenguaje para programar en los tiempos modernos

Las desventajas? Básicamente (pensando en WordPress) una gran desventaja

• Es (yo diría) imposible utilizar Gatsby o Next sin ser desarrollador

Por contra, WordPress presenta las siguientes ventajas:

• Hay infinidad de hostings preparados para ofrecer WordPress, también gratuitos aunque con prestaciones limitadas

• Puedes perfectamente implementar y/o mantener un website WordPress siendo usuario final, puede que necesites ayuda en la parte más técnica pero definitivamente está preparado para que puedas ser un editor y actualizar el site sin ayuda externa

• Para el desarrollador, que WordPress haya incluido Ract en su frontend (más o menos) es una gran noticia

Y las desventajas:

• Es un infierno (exagero) para el desarrollador (si éste está acostumbrado a los entornos modernos), y así será mientras el backend sea en php, aunque tampoco sería descabellado que php siguiera evolucionando y modernizándose a todos los niveles con el tiempo

Hay otra grandísima diferencia entre ambas tecnologías: WordPress es omnipresente, con una comunidad gigantesca y un mercado muy sólido, sin duda el éxito reside en su orientación hacia el usuario final

Con esto, es difícil que Gatsby sea competencia para WordPress puesto que siempre habrá la necesidad de un sistema para un usuario final que no quiere desembolsar dinero de forma recurrente para el mantenimiento de una web sencilla

En tanto a Next vs Gatsby, el primero es más completo al ofrecer (opcional) todo un sistema de backend basado en NodeJS

Sin embargo, ambos sistemas tienen un problema relativamente reciente:

La velocidad

El problema de la velocidad

WordPress es lento

Esto tradicionalmente ha sido así, y se razona con el simple hecho de tener un backend, ya que esto representa una factura importante de tiempo puesto que en cada petición hay que ejecutar una serie de funciones que tardan su tiempo (y aquí la calidad del hosting es importante)

La diferencia con Gatsy | Next-estático es que en una página estática no hay nada que ejecutar, hay una petición y simplemente se sirve el código de la página, nada más

Esto, por definición es muy rápido

Next en su versión estática es "exactamente" lo mismo que Gatsby, aunque la filosofía es distinta y su implementación es marcadamente diferente

Sin entrar en detalles, Gatsby te ofrece una manera de hacer las cosas muy particular y que puede verse como exagerada

Next es más "normal" en este sentido, y además te ofrece un backend en NodeJS, esto (si tienes el hosting) es una gran diferencia y podría valer la pena aprender Next sólo por la mayor versatilidad que te ofrece

Por contra, Gatsby tiene un ecosistema de plugins espectacular, y al final esto también cuenta, y mucho

Pero ambos tienen un gran problema, la velocidad

No estoy hablando del backend NodeJS de Next (que es rápido, aunque mínimamente más lento que el de WordPress si no recuerdo mal)

Hablo de los websites estáticos, páginas sin backend que deberían ser extremadamente rápidos

No lo son

Lo eran hace 1 año, cuando Google (quien determina en última instancia si algo es rápido o no, y esto lo tiene en cuenta para ordenar webs en su página de búsquedas) puntuaba las webs de una manera

Pero desde hace poco Google ha afinado esa valoración, y en esa afinación ha saltado la liebre:

• Gatsby y Next no envían código html, envían React para que el cliente lo ejecute en el navegador

Y esto resulta que es crítico, puesto que el tiempo necesario para ejecutar e interpretar este código es alto en ordenadores antiguos, y muchos usuarios utilizan ordenadores antiguos (y aquí claro está se incluyen móviles)

Con esto, y aunque Next sale algo mejor parada que Gatsby, su velocidad ya no puede ser su slogan

Eleventy (y Svelte)

Sin duda React no es solo velocidad (que la tiene, aunque menor de la que nos gustaría), es un ecosistema brutal y un soporte impresionante

Sin embargo, hay opciones recientes muy interesantes (puedes ver las tecnologías disponibles para sitios estáticos en staticgen.com)

La primera que quiero mencionar es Svelte

Svelte ha desarrollado un sistema para implementar el state de React de forma simple y sin florituras, para dar el mínimo JavaScript necesario y todo lo demás en código html sin más

Esto, por definición, es muy rápido, y aparentemente consigue gran parte de lo que ofrece React sin la gran mochila de React, aunque en términos de velocidad vale la pena ver las reflexiones de elderJS cuando se compara con sapperJS, el que debería ser el framework de referencia de Svelte

La reflexión es que no vale la pena utilizar React si sólo necesitas una fracción de React

La segunda que quiero mencionar, y que de momento es mi favorita, es Eleventy o 11ty

Un sistema sin JavaScript (es trabajo tuyo implementarlo en el lado del cliente, yo incluyo React cuando me hace falta), con compilaciones ultrarápidas, y con puntuaciones de Google máximas

Además, puedes utilizar React para estructurar tus páginas, junto con styled-components, con lo que la experiencia del desarrollador es casi casi la misma que cuando programas con React, Gatsby o Next (a diferencia de Svelte, que te obliga a aprender un nuevo pseudo-lenguaje)

Eleventy no es un framework para todo, evidentemente, pero la pregunta siempre es relevante: Realmente necesitas React?

Cuando la respuesta es no, o sólo en forma de aplicaciones concretas, 11ty es una opción magnífica

Si te interesa, de momento tengo un curso de Gatsby básico, un curso de bloques de Gutenberg para WordPress, y otro curso de curso de themes con WordPress, Gutenberg y React