Rendering a React component on the server often requires asynchronously fetching any data which the component or any of its children require. If you're using Redux to store and fetch your data, you can easily solve this problem through a small piece of middleware. The trade-off with using this method is that you will suffer the slight performance penalty of rendering your React application twice but this shouldn't be a problem for most applications.
The middleware we'll use to solve this problem, redux-interceptor, intercepts and records any store actions that are dispatched so that they can be executed in a single batch at a later time. We can take advantage of the middleware by placing all essential data fetching in the componentWillMount lifecycle method. This method is called during both client and server renders which means on the server, you're able to capture all the necessary actions your component tree requires, wait until they resolve and then re-render your application with a hydrated store.