Conceptual Guides

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

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

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

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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

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.

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.