# Gatsby — React-Based Framework for Performant Static Sites

> Gatsby is a React-based open-source framework for building fast, secure websites and apps. It combines static site generation with dynamic capabilities, pulling data from any source via GraphQL.

## Install

Save as a script file and run:

# Gatsby — React-Based Framework for Performant Static Sites

## Quick Use
```bash
npm init gatsby my-site
cd my-site
npm run develop
```

## Introduction
Gatsby is an open-source framework built on React that helps developers build websites that are fast by default. It pre-renders pages at build time and hydrates them on the client, delivering near-instant page loads with full interactivity. Gatsby unifies data from CMSs, APIs, databases, and files through a single GraphQL layer.

## What Gatsby Does
- Generates static HTML at build time for sub-second page loads and strong SEO
- Provides a unified GraphQL data layer to pull content from any source (Markdown, WordPress, Contentful, etc.)
- Optimizes images, code-splits bundles, and prefetches links automatically
- Ships a rich plugin ecosystem with over 2,500 community plugins for analytics, CMS integrations, and more
- Supports incremental builds so only changed pages are regenerated

## Architecture Overview
Gatsby runs a Node.js build process that sources data through source plugins, transforms it via transformer plugins, and feeds it into a GraphQL schema. At build time, React components query this schema to produce static HTML and JSON files. In the browser, Gatsby's runtime rehydrates the page into a full React SPA, enabling client-side routing, prefetching of linked pages, and dynamic data loading.

## Self-Hosting & Configuration
- Install Node.js 18+ and run `npm init gatsby` to scaffold a new project
- Configure `gatsby-config.js` to register plugins, site metadata, and data source connections
- Use `gatsby build` to produce the `public/` directory, then serve it with any static host or CDN
- Set environment variables in `.env.development` and `.env.production` for API keys and secrets
- Deploy to Netlify, Vercel, AWS S3 + CloudFront, or any platform that serves static files

## Key Features
- Image optimization pipeline with `gatsby-plugin-image` for responsive, lazy-loaded images
- File-system routing where React files in `src/pages/` map directly to URL paths
- Deferred static generation lets you build critical pages first and defer long-tail pages
- Head API for managing document head elements without third-party dependencies
- Slice API to share and independently build common layout components across pages

## Comparison with Similar Tools
- **Next.js** — supports SSR, SSG, and ISR in one framework; Gatsby is SSG-focused with a deeper plugin ecosystem
- **Astro** — ships zero JS by default and supports multiple UI frameworks; Gatsby is React-only but more mature
- **Hugo** — Go-based SSG with extremely fast builds; Gatsby offers richer React component model and GraphQL data layer
- **Eleventy** — minimal, zero-config SSG with template flexibility; Gatsby provides more built-in optimizations
- **VitePress** — Vue-based docs-focused SSG; Gatsby targets general-purpose sites and apps

## FAQ
**Q: Is Gatsby still actively maintained?**
A: Yes. Gatsby continues to receive updates and the community plugin ecosystem remains one of the largest among static site generators.

**Q: Can Gatsby handle dynamic content?**
A: Yes. Gatsby supports client-only routes, deferred static generation, and can fetch data at runtime just like any React app.

**Q: How does Gatsby compare in build speed to newer SSGs?**
A: Build times grow with page count, but incremental builds and parallel processing help. For very large sites (100k+ pages), consider incremental or deferred generation.

**Q: Does Gatsby require GraphQL?**
A: GraphQL is the default data layer, but you can use `createPages` with any data source directly, bypassing GraphQL entirely if preferred.

## Sources
- https://github.com/gatsbyjs/gatsby
- https://www.gatsbyjs.com/docs/

---
Source: https://tokrepo.com/en/workflows/e8839fd3-3fb5-11f1-9bc6-00163e2b0d79
Author: Script Depot