React Router Example: Server Rendering Lazy Routes
React Router has two great features that seem like they might not work well together: server side rendering and code splitting.
This minimal demo shows how to get the benefits of server rendering and partial app loading with lazy routes and webpack's code splitting.
npm install npm start open http://localhost:5000
How it works
require.ensuredefines code splitting points in the app.
- We polyfill
require.ensurefor node to just do a normal
- The server renders the app with
matchand the stateless
matchto trigger the split code to load before rendering. If we didn't do that, then the first render would be
nulland not reuse the server rendered markup.
- We render on the client.
- We raise our arms in the air in triumph.