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.
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.
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.