Some general steps of how a server side rendered Redux app is built. You can follow along by cloning this repository.

1) Put all of our isomorphic JavaScript (any Redux code that can be rendered both client and server) in a common folder (e.g /isomorphic)

2) Create entry point into server code, server/index.js.

require('babel-core/register')({
	presets: ['es2015', 'react']
})
require('./server.js')

3) Create entry point into client code, client/index.js. This piece cannot be rendered on the server, but needs to be in bundle.js. So we will webpack build both the isomorphic code, and this snippet to create our bundle.js

const initialState = window.__INITIAL_STATE__
const store = configureStore()

render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
)

4) Instantiate a new Redux store in our NodeJS server.

5) Then we’re going to pass it into our main parent component via . The result is that we have our that’s aware of the Redux store on the server.

6) Then we’ll render that main parent component in NodeJS with react-dom’s renderToString. This generates a snapshot of our how our Redux app looks like on inital page load, in an HTML string.

7) Then in Node, write an html page (string) to serve the initial page load (with our pre-rendered component from renderToString)

8) Build bundle.js for the client.

When a user hits our page, the initial load will be served by the server (that HTML string you generated). Subsequent interactions with the Redux app won’t work unless we have a bundle.js, which is build by Webpack from this client/index.js.

The Redux app will rely on bundle.js for any user interaction after the initial page load.

bundle.js will also mount the Redux app into <div id="root", just as it did in pure client side rendering, except the user now first sees the server generated app.