Why render on the server?

Before we start implementing server-side rendering in our application, let's take a moment to think about why it would be useful.

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:

1. The client makes a request to our server, which serves the initial HTML.
2. The initial HTML is loaded and parsed.
3. CSS and JS are imported from the HTML file gets that requested and parsed.
4. The JS code is loaded and React is initialized.
5. React draws the initial state (no data yet).
6. Data is fetched and pulled into the Redux store.
7. React rerenders using the data from the Redux store.
8. The app is fully loaded now.

As you can imagine, this process can take quite long, especially on slower connections. Furthermore, when the client has JavaScript disabled, nothing will be rendered at all.

Using server-side rendering

Server-side rendering shortens this process immensely:

1. The initial HTML loads with the data already prerendered...