Gatsby
Gatsby is a React-based framework for building static and server-rendered websites, using GraphQL to pull data from many sources at build time into fast, pre-rendered pages.
Definition
Gatsby is a React-based framework for building static and server-rendered websites, using GraphQL to pull data from many sources at build time into fast, pre-rendered pages.
Overview
Gatsby popularized a specific approach to building fast websites: pull content from any number of sources — CMSs, markdown files, APIs, databases — through a unified GraphQL data layer at build time, then pre-render the entire site into static HTML, CSS, and JavaScript that can be served from a CDN. Because pages are generated ahead of time rather than rendered per-request, Gatsby sites tend to load very quickly and score well on performance metrics, while still behaving like a full React single-page application once loaded, thanks to client-side hydration and prefetching of linked pages. Gatsby's plugin ecosystem lets it source data from headless CMSs, WordPress, Contentful, or local files interchangeably, which made it popular for content-heavy marketing sites and blogs. It competes with more recent hybrid frameworks like Next.js, which added flexible per-page rendering strategies (static, server-rendered, or incremental) that reduced Gatsby's earlier advantage of being the primary React static-site option; Gatsby itself was acquired by Netlify in 2023. The React.js course covers the React fundamentals that underpin Gatsby development.
Key Features
- Static site generation with build-time pre-rendering of pages
- Unified GraphQL data layer for sourcing content from many providers
- Rich plugin ecosystem for CMSs, APIs, and file-based content
- Automatic image optimization and lazy loading
- Client-side hydration for full React interactivity after load
- Link prefetching for near-instant page transitions
- Strong performance and SEO characteristics out of the box