Gatsby’s documented public architecture
Gatsby is built around React and Node.js tooling. Developers write React components, while Gatsby coordinates data sourcing, GraphQL queries, page creation, asset processing, bundling, and the selected rendering behaviour.
This describes the framework architecture documented for Gatsby projects. It does not infer the private hosting systems, internal services, or operational topology behind gatsbyjs.com.
Core building blocks
| Layer | Publicly documented role |
|---|---|
| React | Supplies components, JSX, state, and browser-side interaction. |
| Gatsby APIs | Connect configuration, data sourcing, node creation, page creation, and rendering lifecycle work. |
| Data layer | Normalises sourced records as nodes and exposes them through a GraphQL schema. |
| Source plugins | Import content from files, content systems, APIs, and services. |
| GraphQL | Selects sourced fields for pages and components in Gatsby’s data workflow. |
| Rendering | Supports SSG, DSG, SSR through getServerData, and client-side routes. |
| Plugin ecosystem | Adds sources, transformations, image handling, styling, analytics, and other integrations. |
From content to page
- A source plugin retrieves or reads content.
- Gatsby creates nodes and builds its data schema.
- A page query requests the required fields.
- A React template renders the queried content.
- Gatsby produces or serves the page according to its rendering mode.
Static pages are generated during the build. Deferred pages are postponed until their first request on compatible infrastructure. SSR pages run request-time logic through getServerData. Client-side routes reserve selected paths for browser application behaviour.
The architecture does not guarantee a particular build time, page speed, or search result. Those outcomes depend on source latency, node and page counts, query design, images, JavaScript, caching, hosting, and the implementation itself.
