Gatsby y Next

Qué es Gatsby

Gatsby es un framework (gatsbyjs.org) y también una empresa dedicada al hosting (que compartan dominio es ciertamente polémico)

Gatsby se construye sobre React y se orienta hacia el desarrollo web por lo que da una serie de herramientas para hacerte la vida más fácil

Lo mejor y lo peor de Gatsby se resume en esta frase:

• Gatsby está diseñado para compilarse una vez y presentar una web estática encapsulada dentro de React

Es decir, Gatsby te permite construir una web aprovechando todo lo que te ofrece React (que es mucho)

Pero al mismo tiempo te da una web estática que va encapsulada con React, con lo que necesita que el navegador construya la web interpretando javascript y no a partir de los clásicos html y css

• Lo mejor de Gatsby es sin duda React, desarrollar webs con React es tremendamente potente y agradable

• Lo peor de Gatsby es que al darte esa web embadurnada de React, el navegador necesita interpretar React, y eso conlleva una penalización de rendimiento que Google ya la está subrayando en sus métricas de LightHouse (algo que cuenta para el SEO)

Qué es Next

Next es lo mismo que Gatsby (un framework nextjs.org) pero que también incluye la posibilidad de tener un backend con NodeJS

La experiencia de desarrollo de Next es muy parecida a la de Gatsby, Next es mucho menos exigente a la hora de pedirte ciertos requerimientos como pasa con Gatsby y GraphQL, pero por otro lado también tiene un ecosistema de plugins más pobre que Gatsby

Aparte de esto tiene las mismas ventajas e inconvenientes que Gatsby, es decir, React

La gran ventaja de utilizar Gatsby o Next para generar sitios estáticos

Gatsby por defecto, y Next de forma opcional, ambos permiten generar sitios estáticos que se resumen en html, css y javascript en forma de React

Plantear una web sin backend presenta un gran beneficio:

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

Esto no lo encuentras en WordPress ni en NextJS cuando quieres utilizar su backend

La gran desventaja de utilizar Gatsby o Next versus WordPress

Gastby y Next permiten desarrollar en React, y en mi opinión la experiencia del desarrollador está bastantes niveles por encima de lo que te ofrece WordPress y su php

Sin embargo, es perfectamente posible utilizar WordPress como implementador o como usuario (avanzado o no tan avanzado)

Utilizar Gatsby o Next como implementador o usuario, esto yo lo veo totalmente imposible y es ciertamente una limitación si quieres desarrollar webs para terceros

Qué aporta WordPress a 2021

WordPress es un elefante antiguo con todo lo que eso conlleva, aunque su movimiento de introducir React en su editor Gutenberg fue una gran noticia

Con el tiempo es muy posible que termine eliminando php y abrazando React para todo el ciclo (o quizá creando un WordPress paralelo durante un tiempo de transición), pero aunque no lo haga, WordPress sigue siendo un actor muy potente en el ecosistema del desarrollo web, básicamente por lo siguiente:

• Hay infinidad de hostings preparados para ofrecer WordPress, muy baratos e incluso algunos gratuitos

• Hay infinidad de plugins

• Hay un ecosistema gigante

Con estas credenciales no hay ninguna duda de que WordPress tiene una larga vida por delante

WordPress y la velocidad

Una crítica recurrente con WordPress es que su velocidad es lenta si lo comparamos con cualquier sitio web estático

Eso es discutible, pero si es cierto que todo lo que implique el uso de un servidor va a requerir que ese servidor sea rápido, y eso al final depende de lo que nos gastemos con el servicio de hosting

Con Gatsby o Next, utilizando servicios como Netlify, la velocidad cuesta 0 y está garantizada

Sin embargo WordPress puede ejecutarse de muchas maneras, y si construyes una web que no tenga React en el frontend sus métricas posiblemente puedan competir con los números de Gatsby o Next

Esto no quita lo siguiente, que es que con WordPress puedes hacer desarrollos muy lentos, algo que con Gatsby y Next simplemente es más complicado porque de serie ya viene todo pensado y orientado para ofrecer velocidad

Eleventy y Svelte

Eleventy (o 11ty) y Svelte son dos desarrollos que han ganado tracción en los últimos tiempos

Los dos buscan solucionar el problema de React, esto es, que es lento para ordenadores antiguos (o móviles)

El problema de descartar React es que descartas su magnífica experiencia de desarrollador, y descartas su tremendo ecosistema

Con Svelte svelte.dev tienes que aprender una alternativa a React, lo cual es un esfuerzo que no es menor, pero a cambio tienes una manera de organizar un useState que parece más lógica y mucho más liviana que lo que ofrece React

Con 11ty 11ty.dev tienes muchos lenguajes para desarrollar la web, y en ningún caso añaden javascript

Puedes añadir todo el javascript que quieras, pero será de forma independiente a 11ty (y nada te impide añadirle React)

El gran què de 11ty es que puedes desarrollar la web con React y con styled-components, o más específicamente con todo lo que no es javascript de ejecución (o runtime), lo que en la práctica quiere decir no poder utilizar un useState o useEffect, o tener que utilizar styled-components con un estilo parecido al que utiliza linaria

Traducido, esto quiere decir preservar gran parte de la excelente experiencia de desarrollo de React y conseguir métricas de 100 en LightHouse, y esta combinación perfecta (en mi opinión) la encuentras en 11ty

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