Features
- GraphQL data layer for unified content sourcing
- Rich plugin ecosystem (2500+ plugins)
- Image optimization with gatsby-plugin-image
- Incremental builds for faster deployments
- Deferred Static Generation for large sites
Pros
- Mature ecosystem with extensive plugin library
- Unified GraphQL data layer abstracts content sources
- Strong image optimization pipeline
Cons
- GraphQL layer adds complexity for simple projects
- Build times can be slow for very large sites
- Declining community momentum compared to Next.js and Astro
Overview
Gatsby is a React-based framework focused on static site generation with a powerful GraphQL data layer. It pioneered the “static-first” approach to React, pulling content from any source (CMS, APIs, filesystem, databases) into a unified GraphQL layer that components can query at build time.
Gatsby generates optimized static HTML at build time with client-side React hydration for interactivity. Its extensive plugin ecosystem handles common needs like image optimization, SEO, analytics, and content sourcing, making it possible to assemble complex sites from composable building blocks.
When to Use
Gatsby is suitable for content-driven sites that benefit from its GraphQL data layer and plugin ecosystem, particularly if your team is already invested in the Gatsby ecosystem. For new projects, consider whether Next.js or Astro might be a better fit given the industry trend.
Getting Started
npm init gatsby my-site
cd my-site && npm run develop// src/pages/index.tsx
import { graphql, PageProps } from "gatsby";
export const query = graphql`
query { site { siteMetadata { title } } }
`;
export default function Home({ data }: PageProps<Queries.HomeQuery>) {
return <h1>{data.site?.siteMetadata?.title}</h1>;
}