SSRvsCSR

The most difficult challenge with server side rendering when building a react, react-router, redux app is.

We need some way to detect when all initial data load action creators are completed on the server. On the server, when we try to fetch some data with an action creator, we need to know the exact instance the request is finished, so we can attempt to render the app as a string and send it back down to the browser.

How is this accomplished you might ask? It just so happens I have a solution to the most difficult problem.

1. Figure out what components should have rendered when a user navigates to a certain url.

2. Call the functions that are attached the components that handle loading data and then wait for a response.

3. Detect when those those promises are finished

4. Render app with all the data loaded into each component



5. Send result down to the browser to the use can see the results

What do you know. I actually have an example presentation showcasing this EXACT situation.



On the right is an instance of the app the fetches the list of users from the api and renders on the information on the client.

On the left is an instance of the app that fetches the list of users from the api and renders the information on the server, then sends it down to the client. Look closely at the network tab. Notice a difference?