We are building our website with react/react-router/redux

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 "ponentDidMount" function.

In the redux tutorial page at server side rendering section here, it has been advised to :

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 ponents. They may return async actions, so that your handleRender function can match the route to the route handler ponent 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 ponent 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.

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 ponents ?

We are building our website with react/react-router/redux

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 "ponentDidMount" function.

In the redux tutorial page at server side rendering section here, it has been advised to :

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 ponents. They may return async actions, so that your handleRender function can match the route to the route handler ponent 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 ponent 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.

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 ponents ?

• javascript
• asynchronous
• reactjs
• react-router
• redux

• "This transaction has to be asynchronous" Why? – flup Commented Mar 17, 2016 at 18:35
• Very often data fetching from APIs is async so that you don't block the main thread, especially if you are retrieving from multiple APIs you do not want one to wait for the other if possible. – Kevin Farrugia Commented Oct 18, 2017 at 18:37

1 Answer 1

Something like a static fetchData() method is the correct way to handle data fetching with React Router in the general case, though it can reach down into child ponents as needed (which is e.g. how Relay works).

The reason you want to do it this way is that React Router resolves all the matched routes all at once. Given that, you can then run data fetching for all of your route handlers simultaneously.

If instead you tied data fetching to instance-level handlers on ponents, you'd always end up with fetch waterfalls, where a ponent could not fetch its required data until all of its parents receive their required data, and so forth. While that may not be a big problem on the server, it's hugely suboptimal on the client.

If you really want to colocate data dependencies to ponents, you can consider using something like React Resolver, but this can easily lead to a suboptimal experience for your users.