Skip to content

Instantly share code, notes, and snippets.

@chickencoder

chickencoder/react-static-generation.md

Last active March 6, 2020 11:40
Show Gist options
  • Save chickencoder/b8ad22b0cc4f3b0e819189490fe64f50 to your computer and use it in GitHub Desktop.
Save chickencoder/b8ad22b0cc4f3b0e819189490fe64f50 to your computer and use it in GitHub Desktop.
Download ZIP
Statically generating React sites
Raw
react-static-generation.md

Process

Static generation requires two bundles to be generated from the React source. The first is the server bundle, which is bundled to target node. This bundle is required by the build script that calls the react-dom/server package's renderToString function.

The renderToString function should be called once per page and should be passed the root React component for that page.

The second bundle is the client bundle which targets the browser.

In Short

  1. Find all of the root page components.
  2. Generate an entry point file for these that wraps the component with necessary data
  3. Each of these will serve an our entry point for both our client & server bundles.
  4. Produce a client bundle from the page component
  5. Output an HTML file for each page that uses renderToString function to statically generate markup.

Shared components should be moved into a common bundle that can be loaded on all pages

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment