Conceptual Guides

Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.

Building with Components

React’s component architecture simplifies building large websites by encouraging modularity, reusability, and clear abstractions.

GraphQL Concepts

Gatsby uses GraphQL to provide a uniform way for page and StaticQuery components to declare what data they and their sub-components need.

Making Your Site Accessible

Gatsby helps you create websites that work for everyone, with defaults that bake in web accessibility as well as performance optimizations.

Plugins, Themes, & Starters

In the Gatsby ecosystem, there’s more than one way to build a site. This guide walks through some of the differences between plugins, themes, and starters.

Gatsby for E-commerce

E-commerce includes both core (products, catalog, cart/checkout) and additional functionality (accounts, promotions, reviews, etc). If your org is using or considering Gatsby, you are likely optimizing for properties like performance, dev environment, UX and security.

Choosing Your CMS(s)

At their core, most medium-sized and large Gatsby websites are backed by a so-called “headless CMS”; choosing the best one for your project is a key architectural decision.

Gatsby's Automatic Image Optimizations

Image loading is an important part of the overall page load experience. There are three main components of an ideal experience, each simplified with Gatsby Image: fetching “above the fold” images immediately, providing a placeholder, and minimizing image file size.

Image Plugin Architecture

Gatsby image processing has a large number of parts. gatsby-image-plugin serves as a core but other plugins are used in order to perform the job.

The Gatsby Build Process

Gatsby's build process is a compilation step turning your code and content into static HTML files that can be served on a CDN.

Build Time and Run Time Data Fetching

Because Gatsby is capable of generating content at build time as well as making calls to external services at runtime, you can make hybrid pages that take advantage of the benefits of static content as well as dynamic content.

Security in Gatsby

By taking advantage of the benefits of static content, Gatsby sites get a significant out-of-the-box boost. There is still work to do for you, though.

The Gatsby Core Philosophy

Gatsby's core philosophy can be divided into three parts: our vision, our tooling philosophy, and our community philosophy

Gatsby Jargon

Gatsby has lots of amazing features that make it easier to add new functionality to your websites. But, like any technology, that means there is some jargon that can be confusing to newcomers.

What Are Gatsby Themes?

Gatsby themes allow Gatsby site functionality to be packaged as a standalone product for others (and yourself!) to easily reuse.

Theme Shadowing

Gatsby themes rely on a concept called shadowing that allows user code to override the theme if contained in files with the same name and location.

React Hydration

Gatsby statically generates HTML content using React DOM server-side APIs. This content can then be enhanced with client-side JavaScript via React hydration, which allows for app-like features in Gatsby sites.