https://github.com/ryanflorence/example-react-router-server-rendering-lazy-routes

https://github.com/ryanflorence/example-react-router-server-rendering-lazy-routes

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/ryanflorence/example-react-router-server-rendering-lazy-routes
• Owner: ryanflorence
• Created: 2015-11-06T22:14:58.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-05-04T07:31:30.000Z (over 8 years ago)
• Last Synced: 2024-11-09T20:24:16.334Z (about 1 month ago)
• Language: JavaScript
• Size: 0 Bytes
• Stars: 559
• Watchers: 14
• Forks: 53
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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.

## Running

```

npm install

npm start

open http://localhost:5000

```

## How it works

1. Webpack's `require.ensure` defines code splitting points in the app.

2. We polyfill `require.ensure` for node to just do a normal `require`.

3. The server renders the app with `match` and the stateless

   ``.

4. When the client JavaScript loads, we use `match` to trigger the split

   code to load before rendering. If we didn't do that, then the first

   render would be `null` and not reuse the server rendered markup.

5. We render on the client.

6. We raise our arms in the air in triumph.