Server side rendering with async data fetch

Question

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 "componentDidMount" 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 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.

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 ?

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
– Kevin Farrugia, Commented Oct 18, 2017 at 18:37

taion · Accepted Answer · 2016-03-18 03:16:12Z

8

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 components 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 components, you'd always end up with fetch waterfalls, where a component 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 components, you can consider using something like React Resolver, but this can easily lead to a suboptimal experience for your users.

answered Mar 18, 2016 at 3:16

taion

2,8371 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ralzaul Over a year ago

I will take a look to the react resolver but thanks for the very good notice.

Kevin Farrugia Over a year ago

What is Relay? Do you have a link or reference?

Kevin Farrugia Over a year ago

Also is it possible to use static fetchData methods when using HoC, such as connect?

Collectives™ on Stack Overflow

Server side rendering with async data fetch

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related