Now 100x Faster

Read the latest from Gatsby CTO Kyle Mathews Re-introducing Gatsby, a Reactive Site Generator

Gatsby Concepts

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

 Main Guides 8

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.

 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.