Gatsby

Descripción general

Gatsby es un framework moderno basado en react para la construcción de sitios web de alto rendimiento. Combina características de SPA, SSG y capacidades de SSR híbrido, permitiendo generar sitios estáticos optimizados mientras conserva flexibilidad para contenido dinámico. Su arquitectura está centrada en un sistema de data layer unificado mediante GraphQL, lo que simplifica la integración con APIs, archivos locales, servicios externos o un CMS headless.

Características principales

  • Enfoque estático por defecto (SSG)
    • Generación anticipada de páginas a partir de contenido estructurado.
    • Beneficios: carga rápida, SEO alto, despliegue sencillo en plataformas como netifly.
  • Soporte para SSR e ISR (híbrido)
    • Renderizado de páginas en tiempo de petición cuando se necesita contenido fresco.
    • Incremental Static Regeneration (ISR) permite regenerar páginas según demanda.
  • Data Layer unificado con GraphQL
    • Todas las fuentes de datos se consultan mediante GraphQL.
    • Evita mezclar múltiples llamadas rest o servicios aislados.
    • Facilita la composición y el filtrado de datos complejos.
  • Arquitectura basada en React
    • Componentes reutilizables para el frontend.
    • No usa un Motor de plantillas, sino lógica y vistas unificadas en JavaScript/JSX.
  • Ecosistema de plugins
    • Integración con imágenes optimizadas, fuentes, CMS, APIs, seguridad, rutas, etc.
    • Extensión mediante gatsby-config.js sin duplicar lógica.
  • Performance por defecto
    • Optimización de imágenes.
    • Prefetch de recursos.
    • División automática de bundles.
    • Rutas rápidas mediante hidración progresiva.

Arquitectura del flujo de datos

  • Fuentes de datos (Sources)
    • Markdown, JSON, APIs rest, bases de datos, servicios headless CMS.
    • Todo se transforma en un “Gatsby Data Graph”.
  • Transformers
    • Procesan y normalizan contenido (Markdown a HTML, imágenes a formatos optimizados…).
  • GraphQL Layer
    • Punto único de acceso a todo el contenido.
    • Las páginas consultan datos solo con las queries necesarias.
  • Build System
    • Genera HTML estático (SSG) o renderiza en tiempo real (SSR).
    • Empaqueta assets optimizados.
  • Runtime
    • Se comporta como SPA una vez cargado el cliente.
    • Navegación instantánea entre páginas.

Cuándo usar Gatsby

  • Sitios que necesitan velocidad y SEO: blogs, documentación, landing pages.
  • Proyectos basados en múltiples fuentes de contenido.
  • Integraciones intensivas con CMS headless.
  • Necesidad de un equilibrio entre SSG y SSR sin perder rendimiento.

Cuándo NO usar Gatsby

  • Aplicaciones altamente interactivas orientadas a estado complejo, donde un framework puramente SPA puede ser más simple.
  • Proyectos donde no se justifica la capa de GraphQL.

Comparación con otras arquitecturas

Gatsby vs SSG tradicional

  • Gatsby ofrece:
    • GraphQL para datos, en lugar de pipeline manual.
    • Imagen optimizada automáticamente.
    • Navegación estilo SPA.

Gatsby vs Motor de plantillas

  • Los motores de plantillas generan HTML mediante plantillas estáticas (Ej: EJS, Liquid).
  • Gatsby trabaja con componentes de react, lógica de estado y GraphQL.

Gatsby vs SPA

  • SPA: renderiza todo en el cliente, peor para SEO sin SSR.
  • Gatsby: renderizado previo del HTML, mejor SEO y rendimiento.

Gatsby vs SSR puro

  • SSR puro genera páginas en cada petición.
  • Gatsby permite SSR solo cuando es necesario y combina esto con SSG e ISR.

Instalación y configuración básica

Requisitos

  • Node.js
  • npm o yarn
  • Conocimientos básicos de react

Instalación inicial

npm init gatsby

`

Estructura básica del proyecto

.
├─ gatsby-config.js        # Configuración general y plugins
├─ gatsby-node.js          # Lógica avanzada: creación de páginas, hooks
├─ src/
│	├─ pages/
│	│	├─ index.js
│	│	└─ about.js
│	├─ components/
│	└─ styles/
└─ static/

Páginas y componentes

Creación de páginas

import * as React from "react"

export default function AboutPage() {
	return (
		<main>
			<h1>Acerca de mí</h1>
			<p>Esta es una página creada con Gatsby.</p>
		</main>
	)
}

import { Link } from "gatsby"

<Link to="/about">Ir a About</Link>

Uso de GraphQL

Query en una página

import React from "react"
import { graphql } from "gatsby"

export default function BlogPage({ data }) {
	return (
		<div>
			<h1>{data.site.siteMetadata.title}</h1>
		</div>
	)
}

export const query = graphql`
	query {
		site {
			siteMetadata {
				title
			}
		}
	}
`

Consultas con variables (ejemplo)

query($slug: String!) {
	markdownRemark(fields: { slug: { eq: $slug } }) {
		html
		frontmatter {
			title
		}
	}
}

Plugins esenciales

Configuración básica (gatsby-config.js)

module.exports = {
	siteMetadata: {
		title: "Mi sitio Gatsby",
		description: "Ejemplo básico con plugins",
	},
	plugins: [
		"gatsby-plugin-image",
		"gatsby-plugin-sharp",
		"gatsby-transformer-sharp",
		{
			resolve: "gatsby-source-filesystem",
			options: { name: "images", path: `${__dirname}/src/images/` },
		},
	],
}

Tipos de plugins

  • Source: conectan con datos (Markdown, CMS, APIs).
  • Transformer: procesan el contenido (markdown→HTML…).
  • UI y rendimiento: imágenes, fuentes, cache, scripts.
  • SEO: metadata automática, sitemap, robots, etc.

Integración con CMS

Gatsby se integra fácilmente con:

  • Sanity
  • Strapi
  • Contentful
  • WordPress como CMS headless
  • Ghost
  • Archivos Markdown locales

La capa GraphQL unifica todo antes del build.

Despliegue

  • netifly
  • Vercel
  • Gatsby Cloud
  • Render
  • Cualquier hosting estático (SSG)
  • SSR requiere plataforma compatible con serverless o Node.

Recursos