Gatsby Explained: React Sites With Data From Anywhere

Introduction

React (covered earlier) is a UI library, not a site builder — turning it into a fast content site takes routing, data fetching, and build tooling. Gatsby, released in 2015, packages all of that for content-heavy sites: blogs, docs, marketing pages, and portfolios. Its signature idea is a unified data layer: pull content from Markdown files, a headless CMS, or APIs into one GraphQL layer, then render it all as a static React site. It was the default React static-site choice for years, and its model still shapes how developers think about content sites.

The GraphQL data layer and the build

Gatsby's workflow has three stages:

• Source — source plugins pull data in: Markdown files, WordPress, Contentful, or any API, all normalised into Gatsby's data layer.
• Query — pages and components query that layer with GraphQL, asking for exactly the fields they need, at build time.
• Build — Gatsby renders every page to static HTML with React hydration, so visitors get fast first loads and the site deploys to any static host.

A page query shows the shape — GraphQL describing the data, the component receiving it as props:

query {
  allMarkdownRemark {
    nodes {
      frontmatter {
        title
        date
      }
      excerpt
    }
  }
}

Images get the same treatment: Gatsby's image plugin generates responsive sizes and lazy loading automatically, which is why Gatsby sites famously scored well on performance audits.

The honest trade

Gatsby's trade is build complexity: its GraphQL layer and plugin ecosystem add a learning curve and, for large sites, slow builds — a pain Astro (the batch 19 post) largely avoids by shipping less JavaScript, and Next.js (batch 9) avoids by offering server rendering alongside static output. Gatsby's momentum has also cooled since its 2023 acquisition. The rule of thumb: Gatsby when a React team needs a content site with data from many sources unified in one layer; Astro for simpler content sites, Next.js when server rendering matters too.

Takeaway

Gatsby is React sites with data from anywhere: source plugins feed a GraphQL layer, pages query it at build time, and the result ships as fast static HTML. It trades simplicity for a unified content model — and for content-rich React sites, that model was its breakthrough.

Originally published at https://practicaldevblog.blogspot.com/2026/10/gatsby-explained-react-sites-with-data.html