Some general steps of how a server side rendered Redux app is built. You can follow along by cloning this repository.
2) Create entry point into server code,
3) Create entry point into client code,
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
5) Then we’re going to pass it into our main parent component via
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
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.