Before we start implementing server-side rendering in our application, let's take a moment to think about why it would be useful.
Why render on the server?
Current process to load the page
At the moment, users have to wait for the following process to be completed until the page is loaded:
- The client makes a request to our server, which serves the initial HTML.
- The initial HTML is loaded and parsed.
- CSS and JS are imported from the HTML file gets that requested and parsed.
- The JS code is loaded and React is initialized.
- React draws the initial state (no data yet).
- Data is fetched and pulled into the Redux store.
- React rerenders using the data from the Redux store.
- The app is fully loaded now.
As you can imagine, this...