Published
- 8 min de lectura
Opinión de Gatsby y "Desarrollando Gatsby: Más estabilidad y confiabilidad"

Opinión
Me confieso: no estoy dentro del público que aclama a Gatsby. Sus actualizaciones no parecen provocar un resurgimiento del interés de la comunidad de Javascript, a comparación de sus competidores. Cuando desarrollo, volteó más hacia Astro y Next. Sin embargo, reconozco que Gatsby guarda mérito en ser pionero en relación a la utilización de GraphQL de manera expansiva y completa: al menos así es como lo veo yo.
Entrada
Traducido de la entrada de Marc Littlemore en el blog de Netlify.
Gatsby es un framework de código abierto basado en React muy apreciado desde hace mucho tiempo. Su arquitectura estable y su enfoque en el rendimiento lo han convertido en una de las principales opciones entre los clientes empresariales para aplicaciones web de misión crítica.
Durante el último trimestre, nuestro equipo de Frameworks ha trabajado duro para garantizar que Gatsby no caiga en el olvido. Nos hemos esforzado por llevar las mejores partes de Gatsby Cloud a Netlify y hemos abordado correcciones de errores críticos y optimizaciones de rendimiento. También estamos muy contentos de compartir algunas mejoras que mejorarán aún más las capacidades de Gatsby.
Estabilidad del Framework
La fiabilidad y la estabilidad de tu framework frontend son clave cuando estás construyendo grandes sitios de alto tráfico - un mensaje que escuchamos alto y claro de nuestros muchos clientes empresariales que eligen Gatsby para sus proyectos.
Para asegurarnos de que puedes confiar en Gatsby para tus sitios web, nos hemos centrado inicialmente en la estabilidad:
- Arreglamos algunos problemas complejos con los internos de Gatsby cuando se usa el almacén de datos Gatsby LMDB en las funciones generadas Server-Side Rendered (SSR) o Deferred Static Generated (DSG).
- Echamos un vistazo a algunos complicados problemas de dependencia en nuestras funciones sin servidor. Ahora, Gatsby puede auto-repararse para evitar problemas con binarios incorrectos que causaban problemas en tiempo de ejecución con páginas basadas en SSR y DSG.
- También aprovechamos esta oportunidad para solucionar un problema con el popular plugin Gatsby Contentful. El problema estaba causando fallos intermitentes de construcción para algunas personas. Afortunadamente, un poco de depuración seria nos llevó a la raíz del problema.
Mejoras en Gatsby Adapter
Otro enfoque significativo ha sido la solidificación del trabajo que hemos hecho desde que lanzamos nuestros Gatsby adapters a principios de este año.
Nuestro objetivo al avanzar hacia el patrón de adaptadores es facilitar el despliegue de sus sitios en Netlify, o en cualquier otra plataforma que desee, tomando la salida de producción de su sitio y convirtiéndola en algo que su plataforma entienda. Como nuestro Director de Ingeniería, Claire Knight, escribió a principios de este año, “Queremos asegurarnos de que el ecosistema Gatsby permanece abierto y animar a otras plataformas a construir sus propios adaptadores también.”
Tras el lanzamiento inicial de nuestro gatsby-adapter-netlify
los miembros de la comunidad han destacado algunos problemas que tuvieron al adoptarlo. Como resultado de esta retroalimentación, hemos hecho mejoras. En concreto, hemos solucionado problemas con sitios web muy grandes y hemos añadido opciones de configuración adicionales.
Algunos de nuestros usuarios aprovechan el poder de Gatsby para construir sitios extensos con decenas de miles de páginas. Hemos dedicado algún tiempo a mejorar el rendimiento de la generación de sitios y a solucionar algunos errores y características que faltaban.
Por ejemplo, nuestro Gatsby adapter crea un archivo de manifiest a partir del cual se genera un archivo Netlify _headers
, que le permite aplicar encabezados de respuesta personalizados a su sitio o a partes del mismo. En algunos casos extremos, este archivo se hizo demasiado grande y causó que las construcciones se rompieran, por lo que optimizamos el código para generar un conjunto más mínimo de patrones de ruta.
Nuestra implementación del adaptador también necesitaba un par de características clave que la comunidad Gatsby estaba pidiendo. Os escuchamos y nos aseguramos de trabajar en ellas también:
En primer lugar, añadimos soporte pathPrefix
para asegurar que puedes alojar tu sitio Gatsby en un directorio distinto de la raíz de tu dominio. Esto permite que tu sitio funcione y que todos los recursos sean servidos correctamente si tu sitio está en un subdirectorio.
También, agregamos soporte para la trailing slash
(barra diagonal) final para ayudar a hacer sitios Gatsby amigables con SEO y arreglamos algunos problemas con las opciones de país e idioma que no eran respetadas con las redirecciones Gatsby.
CDN de imágenes
Recientemente anunciamos nuestra nueva Netlify Image CDN beta para reducir los tiempos de carga de la página mediante la entrega de imágenes más pequeñas y optimizadas. Para asegurarnos de que los usuarios de Gatsby puedan beneficiarse de esto también, hemos aprovechado la CDN de imágenes tanto en el Gatsby build plugin como en el nuevo Gatsby Netlify adapter.
Para habilitar la imagen CDN en tu proyecto Gatsby, establece la variable de entorno NETLIFY_IMAGE_CDN
a true
. Esto habilitará el uso de la CDN para la transformación tanto de imágenes locales de tu sitio como de imágenes remotas de otros servidores.
Si está utilizando imágenes remotas, también necesita establecer una lista de patrones de URL permitidos desde los que se sirven sus imágenes externas, como una lista de dominios que pueden ser expresiones regulares. Tanto esta lista como la variable de entorno anterior pueden establecerse en el archivo de configuración netlify.toml
:
[build.environment]
NETLIFY_IMAGE_CDN = "true"
[images]
remote_images = [
# Example to load from Contentful - replace contentful - space - id with your space id
'https://images.ctfassets.net/contentful-space-id/.*',
# Example to load from WordPress or Drupal hosted on Pantheon.io - replace the domain with your own
'https://live-contentacms.pantheonsite.io/.*'
]
Si está utilizando un sistema de gestión de contenidos (CMS) externo, asegúrese de ajustar la lista de remote_images
para que coincida con los dominios de imagen que utiliza el CMS. Para más detalles, consulte la documentación del plugin Netlify Gatsby o del Gatsby Netlify adapter.
Esta sencilla configuración única aporta beneficios reales: puede mejorar el rendimiento de sus páginas, reducir el ancho de banda sirviendo imágenes de tamaño correcto, redimensionar o recortar sus imágenes y servirlas en un formato de imagen optimizado como AVIF o WebP.
Además, como ahora las imágenes se sirven desde nuestra CDN en lugar de transformarse en el momento de la compilación, también se ahorran valiosos minutos de compilación. En las pruebas realizadas con algunos de nuestros clientes empresariales más grandes, hemos visto cómo los tiempos de compilación se reducían en un 80% con sólo añadir unas pocas líneas de configuración.
Aunque nos encantaría que utilizara nuestra CDN de imágenes para transformar sus imágenes, el código de nuestro generador de URL de imágenes es de código abierto. Puede utilizarlo para crear su propia implementación para otros proveedores de CDN de imágenes.
El futuro de Gatsby
Aunque el framework Gatsby ya no es el chico nuevo del barrio, no va a desaparecer pronto. Ha sido probado por compañías durante muchos años y es usado para sitios web grandes, reales y de alto rendimiento, incluyendo muchos de nuestros clientes empresariales.
Aquí en Netlify, estamos comprometidos a seguir apoyando Gatsby, así como a trabajar con la comunidad en torno a él.
Además de asegurar que el framework es estable, predecible y de alto rendimiento, estamos trabajando para darle superpoderes adicionales a través de una fuerte integración con nuestra Composable Web Platform, específicamente Connect y Create.
Al mismo tiempo, también continuaremos desacoplando las partes del núcleo de Gatsby que estaban estrechamente vinculadas a la infraestructura de nube propietaria, a través de la función adapters.
Las conversaciones periódicas que mantenemos con nuestros clientes empresariales nos han ayudado a comprender que muchas organizaciones maduras y consolidadas dan prioridad a la estabilidad, la solidez y la previsibilidad frente a la innovación puntera y el cambio rápido en las herramientas que seleccionan para crear sus experiencias web.
Queremos satisfacer esa necesidad, como dijo recientemente nuestro CEO, Matt Biilman:
While we don’t plan for Gatsby to be a place where the main innovation in the framework ecosystem takes place, it will be a safe, robust and reliable choice to build production quality websites and e-commerce stores, and will gain new powers by ways of great complementary tools.
Over the last few years, Gatsby’s static-first approach guaranteed high performance and uptime for customers, while allowing teams to build compelling front-end experiences.
Our aim to make sure that this is still the case over the next few years.