finds.dev← search

// the find

ryanflorence/example-react-router-server-rendering-lazy-routes

★ 555 · JavaScript · updated May 2016

A minimal 2016 demo of server rendering React Router routes that are code-split with webpack's require.ensure. The server renders the full page, and the client loads the split chunks it needs before rendering over the server markup. It is a reference for how the two features interact, not a base for a new project.

The README names the real trap: if the client renders before split chunks are loaded, the first render is null and cannot reuse the server markup, so the fix is to call match on the client and wait for the chunks first. The polyfill that turns require.ensure into a plain require on Node lets one route tree serve both sides without a second routing config. The whole thing fits in a handful of modules and one webpack config, so it reads quickly.

It is built on the pre-v4 React Router API (match and RoutingContext) and webpack 1-era require.ensure. Current React Router and webpack use different server rendering and dynamic import() for splitting, so the code does not transfer directly. It was last pushed in May 2016, so the pinned packages will likely need work to install and run on a current Node. It also stops at the mechanism: nothing on failed chunk loads, data fetching before render, or caching the server bundle, and no tests.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →