React Static — Progressive Static Site Generator for React

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