Putting together the pieces: Server-side rendering with React Router v4 and Redux
Server-side rendering a React app is a miracle on-par with childbirth and modern air travel.
OK, that opening sentence was a little over-the-top. I apologise to birth mothers and those in the aviation industry.
Let me start again: server-side rendering a React app is...kind of cool.
That said, it can be a little tricky to get started, especially if you're trying to do it with an existing app.
In this post I’ll explain one way you can implement server-side rendering (SSR) for an app that's using React Router v4 and Redux Thunks.
Along the way we'll discuss the fundamental difference between JavaScript clients and servers, how it forces us to change the way we do routing, and the small "missing-link" that enables us to bridge React Router v4 with Redux thunks.
We'll build up a simple example to demonstrate. I'm going to assume you've got some knowledge of:
- React
- Redux
- React Router v4
However, you are not required to have knowledge of:
- Childbirth
- Aeronautics
Let's do this.