¿Qué es Gatsby.js?

Gatsby.js es un generador de sitios estáticos basado en React que combina el poder de React con GraphQL para crear sitios web ultra-rápidos. Es conocido por sus optimizaciones automáticas y su capacidad de integrar datos de múltiples fuentes.

¿Para qué sirve Gatsby.js?

Gatsby.js es ideal para:

• Sitios web estáticos con performance excepcional (blogs, portfolios, documentación).
• E-commerce con contenido mayormente estático.
• Sitios corporativos y landing pages.
• Aplicaciones que consumen datos de múltiples APIs y CMSs.
• Proyectos que priorizan SEO y Core Web Vitals.

¿Cómo funciona?

Gatsby pre-construye todo el sitio en tiempo de build, generando HTML estático optimizado. Imagina Gatsby como una fábrica inteligente que toma ingredientes de diferentes lugares (APIs, CMSs, archivos) y produce un producto final perfectamente empaquetado listo para servir.

Ejemplo: Página básica en Gatsby

Gatsby usa React para los componentes y GraphQL para consultar datos:

// src/pages/index.js
import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';

export default function HomePage({ data }) {
  const { site, allMarkdownRemark } = data;
  
  return (
    <Layout>
      <h1>{site.siteMetadata.title}</h1>
      <p>{site.siteMetadata.description}</p>
      
      <section>
        <h2>Posts Recientes</h2>
        {allMarkdownRemark.nodes.map(post => (
          <article key={post.id}>
            <h3>{post.frontmatter.title}</h3>
            <p>{post.frontmatter.date}</p>
            <p>{post.excerpt}</p>
          </article>
        ))}
      </section>
    </Layout>
  );
}

// Query GraphQL que se ejecuta en build time
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
    allMarkdownRemark(sort: {frontmatter: {date: DESC}}, limit: 5) {
      nodes {
        id
        excerpt
        frontmatter {
          title
          date(formatString: "DD MMMM, YYYY")
        }
      }
    }
  }
`;

GraphQL Data Layer

La característica distintiva de Gatsby es su capa de datos unificada con GraphQL:

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "Mi Blog con Gatsby",
    description: "Un blog increíble"
  },
  plugins: [
    // Fuentes de datos
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts/`,
      },
    },
    `gatsby-transformer-remark`, // Transforma Markdown
    {
      resolve: `gatsby-source-contentful`, // CMS Contentful
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
    // Optimizaciones
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
  ],
};

Generación de páginas dinámicas

Gatsby puede generar páginas automáticamente desde datos:

// gatsby-node.js
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  
  // Consultar todos los posts
  const result = await graphql(`
    query {
      allMarkdownRemark {
        nodes {
          fields {
            slug
          }
          frontmatter {
            title
          }
        }
      }
    }
  `);
  
  // Crear una página para cada post
  result.data.allMarkdownRemark.nodes.forEach(post => {
    createPage({
      path: `/blog${post.fields.slug}`,
      component: require.resolve(`./src/templates/blog-post.js`),
      context: {
        slug: post.fields.slug,
      },
    });
  });
};

Template de página dinámica

// src/templates/blog-post.js
import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';

export default function BlogPost({ data }) {
  const { markdownRemark } = data;
  
  return (
    <Layout>
      <article>
        <h1>{markdownRemark.frontmatter.title}</h1>
        <p>Publicado: {markdownRemark.frontmatter.date}</p>
        <div dangerouslySetInnerHTML={{ __html: markdownRemark.html }} />
      </article>
    </Layout>
  );
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        date(formatString: "DD MMMM, YYYY")
      }
    }
  }
`;

Optimizaciones automáticas

Gatsby incluye optimizaciones de performance por defecto:

import React from 'react';
import { StaticImage, GatsbyImage, getImage } from 'gatsby-plugin-image';

export default function OptimizedImages({ data }) {
  const image = getImage(data.file);
  
  return (
    <div>
      {/* Imagen estática optimizada */}
      <StaticImage
        src="../images/hero.jpg"
        alt="Hero"
        placeholder="blurred"
        layout="fixed"
        width={800}
        height={400}
      />
      
      {/* Imagen dinámica desde GraphQL */}
      <GatsbyImage 
        image={image} 
        alt="Imagen dinámica"
      />
    </div>
  );
}

Ecosystem de plugins

Gatsby tiene un ecosistema de plugins muy robusto:

// gatsby-config.js - Plugins populares
module.exports = {
  plugins: [
    // SEO y meta tags
    `gatsby-plugin-react-helmet`,
    
    // Estilos
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-sass`,
    
    // Imágenes
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    
    // Fuentes de datos
    `gatsby-source-filesystem`,
    `gatsby-transformer-remark`,
    `gatsby-source-contentful`,
    `gatsby-source-strapi`,
    
    // Performance
    `gatsby-plugin-offline`, // Service Worker
    `gatsby-plugin-sitemap`,
    
    // Analytics
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "GA_TRACKING_ID",
      },
    },
  ],
};

Características principales

• Static Site Generation: Todo se pre-construye para máxima velocidad.
• GraphQL integrado: Una sola query para todos tus datos.
• Optimizaciones automáticas: Code splitting, lazy loading, prefetching.
• Ecosistema de plugins: Miles de plugins para cualquier necesidad.
• Hot reloading: Desarrollo rápido con recarga en caliente.
• Progressive Web App: PWA por defecto con service workers.

Fuentes de datos múltiples

Gatsby puede combinar datos de diferentes fuentes:

// Una query que combina múltiples fuentes
export const query = graphql`
  query {
    # Datos del sitio
    site {
      siteMetadata {
        title
      }
    }
    
    # Posts desde archivos Markdown
    allMarkdownRemark {
      nodes {
        frontmatter {
          title
        }
      }
    }
    
    # Contenido desde Contentful CMS
    allContentfulBlogPost {
      nodes {
        title
        publishedDate
      }
    }
    
    # Datos desde una API REST
    allApiData {
      nodes {
        name
        description
      }
    }
  }
`;

¿Cuándo usar Gatsby.js?

• Blogs y sitios de contenido con múltiples fuentes de datos.
• Sitios corporativos que necesitan performance extrema.
• Portfolios y sitios personales.
• Documentación técnica.
• E-commerce con catálogos estáticos.
• Cuando necesitas SEO perfecto y Core Web Vitals óptimos.

Comparación con otros frameworks

Característica	Gatsby	Next.js	Astro
Tipo	SSG puro	Híbrido	SSG + Islands
Data Layer	GraphQL	File/API	File/API
Plugins	Extenso	Moderado	Creciente
Curva de aprendizaje	Media-Alta	Media	Baja
Performance	Excelente	Excelente	Excelente
Casos de uso	Sitios estáticos complejos	Apps full-stack	Sitios estáticos simples

Proceso de build

# Desarrollo
gatsby develop  # Hot reloading en localhost:8000

# Producción
gatsby build   # Genera sitio estático en /public
gatsby serve   # Sirve el sitio construido para testing

Limitaciones a considerar

• Build times largos en sitios grandes (muchas páginas/imágenes).
• Curva de aprendizaje de GraphQL.
• Menos flexible para contenido dinámico en tiempo real.
• Sobre-ingeniería para sitios simples.

Conclusión

Gatsby.js es la elección perfecta cuando necesitas un sitio estático de alta performance con datos complejos de múltiples fuentes. Su enfoque en optimizaciones automáticas y GraphQL como capa de datos unificada lo hace ideal para proyectos donde la velocidad y SEO son críticos.

Aunque tiene una curva de aprendizaje más pronunciada que otros frameworks, la performance resultante y el ecosistema de plugins lo convierten en una opción poderosa para sitios web estáticos sofisticados.

---