I’m Birkir Gudjonsson, software engineer currently living in Reykjavík, Iceland and working for UENO. (a digital agency based in SF). We craft web-sites and apps for some pretty big names, using all the awesome tools and frameworks that the JS Gods have given us.

So most people render their React app only on the client while others also render on the server, often called Universal, which most of our clients usually want.

The easiest server render approach is to manually fetch the data needed and inject it into the state before rendering. Dan Abramov demonstrates how this can be achieved in the redux docs 📘.

The problem here is that your state becomes inconsistent between the client and the server because the redux actions don’t handle adding data to the state like they do on the client.

Other, more dynamic approach is to use the react-router’s “match” method to get a component tree from the router, parse it and find components that contain a special method that dispatches an async action, waits for them to resolve and then renders.

This method is limited to route components only, and all later actions that might happen as an result won’t 🔥 .