title: Server side rendering with async data fetch
body: <p>We are building our website with react/react-router/redux</p>
  
  <p>We want to server side render our pages that should be filled by the data from our data sources. This transaction has to be asynchronous and unfortunately since we want to server side render, we can not use "componentDidMount" function.</p>
  
  <p>In the redux tutorial page at server side rendering section <a href="http://redux.js.org/docs/recipes/ServerRendering.html" rel="noreferrer">here</a>, it has been advised to : </p>
  
  <blockquote>
    <p>If you use something like React Router, you might also want to express
    your data fetching dependencies as static fetchData() methods on your
    route handler components. They may return async actions, so that your
    handleRender function can match the route to the route handler
    component classes, dispatch fetchData() result for each of them, and
    render only after the Promises have resolved. This way the specific
    API calls required for different routes are colocated with the route
    handler component definitions. You can also use the same technique on
    the client side to prevent the router from switching the page until
    its data has been loaded.</p>
  </blockquote>
  
  <p>This is currently how we handle our data fetch. I personally did not like this approach it looks quite clumsy and it is too coupled to the routing library. Are there any better ways to do it - hopefully with standard react/router/redux components ?</p>