Gatsby es un framework gratuito y de código abierto basado en React, diseñado para ayudar a los desarrolladores a crear sitios web y aplicaciones de alto rendimiento. En términos simples, Gatsby es un constructor de sitios estáticos que utiliza React.
¿Qué es React?
React es una biblioteca que tiene como objetivo proporcionar un conjunto específico de características básicas que los desarrolladores pueden utilizar. Es ligero y está diseñado para ser ampliamente aplicable. Gatsby, por otro lado, es un generador de aplicaciones web progresivas (PWA) estáticas, que proporciona una partición de código y datos tal cual.
Para mejorar el rendimiento, Gatsby sólo carga HTML, CSS, JavaScript y otros datos importantes. Una vez cargado, se necesitan recursos para navegar a otras páginas. Esto garantiza que el sitio se cargue lo más rápidamente posible y que la interacción con el usuario sea perfecta.
¿Qué es un sitio estático?
Los sitios estáticos existen desde hace mucho tiempo. De hecho, los sitios estáticos son el prototipo de un sitio web que consiste en HTML, CSS y JavaScript. Los sitios estáticos no se renderizan en tiempo de ejecución y no hay código del lado del servidor ni base de datos.
Un generador de sitios estáticos es una herramienta que genera un sitio estático; en el caso de los frameworks y las librerías JS, el contenido HTML suele generarse en el lado del cliente en tiempo de ejecución. Los generadores de sitios estáticos generan este contenido en el momento de la construcción. Luego, una vez cargado, React toma el control y la aplicación de una sola página está completa.
¿En qué se diferencia de la renderización del lado del servidor?
Esa es una gran pregunta. La principal diferencia es que no hay código del lado del servidor. Esto significa que, a diferencia de herramientas como Next.js, Gatsby no renderiza nada en el servidor cuando se realiza una petición. Todo esto se hace en el momento de crear la aplicación.
Las ventajas de los sitios estáticos son la velocidad, la optimización de los motores de búsqueda y la seguridad. Los sitios construidos con Gatsby no sólo son extremadamente rápidos, sino que también tienen seguridad implícita, ya que no hay base de datos ni servidor. El SEO es mucho más fácil ya que los rastreadores pueden encontrar el contenido.
¿Qué hace que Gatsby sea único?
Gatsby tiene algunas características interesantes que lo diferencian de otros generadores de sitios estáticos.
En primer lugar, Gatsby utiliza React, lo que lo convierte en una gran opción para aquellos que conocen y aman React.
Funciona muy bien con plataformas como Netlify y puede ser fácilmente configurado para construir y desplegar cada vez que se confirma y empuja a GitHub.
Cuenta con un excelente ecosistema de plugins para satisfacer una gran variedad de necesidades. Estos plugins le ayudan a recuperar datos de CMS como WordPress y Contentful, a integrarse con herramientas como Algolia y a gestionar sus imágenes cargándolas y optimizándolas de forma perezosa.
Proporciona una rica API que facilita el desarrollo de sitios estáticos. La API createPage, por ejemplo, facilita la conversión de archivos markdown en páginas estáticas con plantillas en tiempo de construcción.
Por último, Gatsby tiene una serie de grandes componentes que simplifican el enrutamiento, la vinculación, la gestión de imágenes y otras cosas que no se incluyen en la biblioteca principal de React.
¿Necesito conocer React y GraphQL para usar Gatsby?
GraphQL es un popular y potente lenguaje de consulta y motor de ejecución del lado del servidor para la ejecución de consultas. Independientemente de la base de datos o del motor de escena, GraphQL es compatible con el código existente. Los servicios GraphQL se pueden crear definiendo tipos y campos de esos tipos y proporcionando funciones para cada campo de cada tipo.
Gatsby utiliza GraphQL para gestionar los datos en toda la aplicación. Se puede utilizar Gatsby sin GraphQL, pero el uso de GraphQL hace que el desarrollo de aplicaciones sea más declarativo e intuitivo.
