Gatsby Concepts

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.

Image optimization includes fetching “above the fold” images immediately, providing a placeholder, and minimizing image file size.

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

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.

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

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

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