# React Static — Progressive Static Site Generator for React

> A fast, lightweight static site generator for React that pre-renders every page to static HTML for performance and SEO, while hydrating to a fully interactive single-page app on the client.

## Install

Save as a script file and run:

# React Static — Progressive Static Site Generator for React

## Quick Use
```bash
npm install react-static
npx react-static create
cd my-static-site
npm start
```

## Introduction
React Static is a progressive static site generator built for React. It generates a pre-rendered HTML file for every route at build time, delivering fast initial loads and strong SEO. Once loaded in the browser, the site hydrates into a fully interactive React single-page application with client-side routing. It bridges the gap between static site speed and React app interactivity.

## What React Static Does
- Pre-renders every route to static HTML at build time for instant page loads
- Hydrates to a full React SPA with client-side navigation after initial load
- Supports dynamic data fetching at build time from any source (APIs, CMSs, files)
- Code-splits automatically per route for optimal bundle sizes
- Generates a sitemap and handles meta tags for SEO out of the box

## Architecture Overview
React Static uses a `static.config.js` file where you define routes and data-fetching functions. At build time, it calls each route's `getData()` function, renders the React component tree to HTML using ReactDOMServer, and writes static HTML files. It also generates a JSON data manifest so the client can fetch route data without re-calling APIs. The client-side runtime hydrates the static HTML and uses React Router for subsequent navigation, prefetching route data on link hover.

## Self-Hosting & Configuration
- Create a project with `npx react-static create` using a starter template
- Define routes in `static.config.js` with a `getRoutes` function returning route objects
- Each route can have a `getData` function that fetches content at build time
- Build with `react-static build` which outputs to a `dist/` folder
- Deploy the `dist/` folder to any static hosting (Netlify, Vercel, S3, GitHub Pages)

## Key Features
- Automatic code splitting per route with zero configuration
- Link prefetching on hover for near-instant page transitions
- Supports any data source (REST APIs, GraphQL, headless CMS, markdown files)
- Hot module reloading in development for fast iteration
- Plugin system for integrating with markdown, SASS, TypeScript, and other tools

## Comparison with Similar Tools
- **Next.js** — full-stack React framework with SSR and SSG; React Static is purely static with a simpler model
- **Gatsby** — plugin-rich static generator with GraphQL data layer; React Static uses plain JavaScript data fetching
- **Astro** — multi-framework SSG with partial hydration; React Static is React-only with full hydration
- **Remix** — server-rendered React framework; React Static generates static files with no runtime server

## FAQ
**Q: Can I use it with a headless CMS?**
A: Yes. Fetch data from any CMS (Contentful, Strapi, Sanity) in your `getData` functions. The data is baked into the static build.

**Q: Does it support dynamic routes?**
A: Yes. Define parameterized routes in `getRoutes` and generate a page for each item. All pages are still statically rendered at build time.

**Q: How does it handle client-side navigation?**
A: After hydration, React Static uses React Router for client-side transitions. Route data is prefetched as JSON files, so navigation feels instant.

**Q: Is it still actively maintained?**
A: React Static is stable and feature-complete. While development has slowed, the existing feature set covers most static site use cases and the codebase remains functional with current React versions.

## Sources
- https://github.com/react-static/react-static
- https://react-static.js.org

---
Source: https://tokrepo.com/en/workflows/asset-48b9f1c1
Author: Script Depot