Gatsby

¿Qué es Gatsby?

Gatsby es un framework de código abierto basado en React para crear sitios web. Reúne contenido de archivos, un CMS o APIs en una capa de datos GraphQL, genera las páginas como HTML estático en el momento de la compilación y añade React en el cliente. Gatsby 5 es la versión mayor actual (5.16 al redactar este texto) y Netlify, que adquirió Gatsby en 2023, lleva ahora el proyecto.

Cómo funciona Gatsby

1. Origen: los plugins leen contenido de archivos Markdown, un CMS headless o una API y lo convierten en nodos de la capa de datos de Gatsby.
2. Consulta: las páginas y los componentes piden con GraphQL exactamente los datos que necesitan, mediante consultas de página o el hook useStaticQuery. Gatsby infiere un esquema a partir de los datos y puedes sustituirlo con la personalización del esquema.
3. Compilación: Gatsby genera cada página como HTML y empaqueta el JavaScript, una forma de generación de sitios estáticos.
4. Servir e hidratar: los archivos HTML se sirven desde una CDN o cualquier hosting estático, y en el navegador React toma el control de la página mediante la hidratación, de modo que se comporta como una app React normal.

Según gatsbyjs.com, Gatsby también admite renderizado en servidor, generación estática diferida (DSG) y funciones serverless para páginas que no pueden generarse por completo de antemano.

En qué punto está Gatsby hoy

Sé realista al elegirlo. Netlify adquirió Gatsby en 2023 y cerró Gatsby Cloud, el producto de alojamiento de pago, trasladando a los clientes a Netlify. Netlify afirmó que el framework de código abierto seguiría manteniéndose. Siguen saliendo versiones, pero a un ritmo más lento que en los primeros años, y la comunidad ha planteado dudas sobre la hoja de ruta. Para un proyecto nuevo, compáralo con Next.js, Astro, Hugo o Eleventy; en un sitio Gatsby existente, comprueba antes de actualizar, sobre todo de Gatsby 4 a 5, que tus plugins siguen funcionando.

Ejemplo

Un sitio de documentación guarda las guías en Markdown. Un plugin de origen convierte cada archivo en un nodo, una plantilla de página consulta el título y el cuerpo con GraphQL y, al compilar, Gatsby escribe un archivo HTML por guía. Los visitantes reciben HTML ya listo desde una CDN, lo que mantiene bajo el Largest Contentful Paint si se controlan imágenes y scripts.

Errores comunes

• Ignorar las compilaciones lentas. Miles de páginas y un procesado pesado de imágenes alargan la compilación. Usa caché, limita lo que se recompila y vigila el tiempo.
• Demasiados plugins. Cada plugin añade JavaScript, tiempo de compilación y riesgo al actualizar. Conserva solo los que uses.
• Paquetes de cliente grandes. El HTML estático no ayuda si el JavaScript que lo hidrata pesa mucho. Fija un presupuesto de rendimiento para el tamaño del paquete.
• Creer que "estático" significa "sin backend". La búsqueda, los formularios, los inicios de sesión y las vistas previas llaman a APIs y funciones que necesitan su propia capacidad y sus pruebas.
• No planificar según el ritmo del proyecto. Fija versiones y mantén una ruta de actualización probada.

Relación con las pruebas de rendimiento y la monitorización

Un sitio Gatsby estático es barato de servir, así que el riesgo está sobre todo en las partes dinámicas: APIs, funciones serverless y scripts de terceros. Usa las pruebas de carga de LoadFocus sobre esos endpoints, desde 25 regiones en la nube. El verificador gratuito de Core Web Vitals muestra cómo experimentan el sitio los usuarios reales de Chrome, y la monitorización de velocidad de página detecta regresiones tras cada despliegue. Para mejoras de frontend válidas con cualquier framework, consulta la guía de 10 pasos para acelerar tu web (en inglés).

Preguntas frecuentes: Gatsby

¿Gatsby sigue manteniéndose?

Sí, el proyecto de código abierto sigue publicando versiones, con Gatsby 5 como versión mayor actual. El ritmo y la hoja de ruta son más lentos que antes, así que evalúalo según tus necesidades a largo plazo.

¿Gatsby necesita GraphQL?

La capa de datos de Gatsby es GraphQL y los componentes suelen consultarla en la compilación. También puedes pedir datos en el navegador como en cualquier app React.

¿Qué pasó con Gatsby Cloud?

Netlify cerró Gatsby Cloud tras adquirir Gatsby y ofreció a los clientes rutas de migración a Netlify. El framework de código abierto es independiente y sigue funcionando en cualquier hosting.

¿Gatsby es bueno para el SEO?

Las páginas son HTML prerrenderizado, que los buscadores leen con facilidad. El posicionamiento sigue dependiendo del contenido, la velocidad y la estructura, no solo del framework.

¿Debo hacer pruebas de carga a un sitio Gatsby?

Prueba las partes dinámicas de las que depende, como APIs, funciones y el proceso de pago. Las páginas estáticas las sirve una CDN.