Webinar

“Digging into Gatsby 5’s Slice API” Register now

Gatsby Concepts

Concepts specific to working within Gatsby: components, GraphQL, image optimization, builds, plugins, starters, data fetching, rendering options.

 Main Guides 9

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.

Image Optimizations

Image optimization includes 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.

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.

Data Fetching

Choose between generating content at build time, making calls to external services at runtime, or a hybrid approach.

Rendering Options

The differences between Static Site Generation, Deferred Static Generation, and Server-Side Rendering.

React Hydration

At build time, Gatsby statically generates HTML content using React DOM server-side APIs. Then at runtime, Gatsby enhances with client-side JavaScript via React hydration.

Partial Hydration

Partial Hydration enables you to selectively add interactivity to your otherwise completly static app. This results in improved frontend performance while keeping the benefits of client-side apps. Gatsby uses React Server Components to achieve this.

 Additional Guides 7

  • What is a plugin?
  • Content Sync
  • Image Plugin Architecture
  • The Gatsby Core Philosophy
  • Gatsby Jargon
  • What Are Gatsby Themes?
  • Theme Shadowing
© 2022 Gatsby, Inc.