Sending the server part using asynchronous data fetching

Question

We build our site using reaction / reaction-router / reduction

We want the server side to display our pages, which should be populated with data from our data sources. This transaction must be asynchronous and, unfortunately, since we want to render on the server side, we cannot use the componentDidMount function.

On the reduction manual page in the server-side rendering section here , it was recommended:

If you use something like a React Router, you can also express your data select dependencies as static fetchData () methods on your route handler components. They can return asynchronous actions so that your handleRender function can map the route to the route handler class of components, send the result fetchData () for each of them and visualize it only after Promises are enabled. In this way, the specific API calls required for different routes are placed along with the route for defining handler components. You can also use the same method on the client side to prevent the router from switching the page to its data loaded.

We are currently processing our data sample. I personally did not like this approach, it looks rather awkward, and it is too connected with the routing library. Are there any better ways to do this - hopefully with standard reaction / router / reduct components?

Answer 1

Something like the static fetchData() method is the right way to process data using React Router in the general case, although it can access child components as needed (for example, how Relay works).

The reason you want to do this is because React Router permits all consistent routes at once. With this in mind, you can simultaneously start collecting data for all your route handlers.

If instead you linked data to handlers at the instance level on the components, you would always get waterfalls to retrieve where the component could not get the required data until all of its parents got the required data, etc. Although this may not be a big problem on the server, it is very suboptimal on the client.

If you really want to correlate data dependencies with components, you can use something like React Resolver , but this can easily lead to a sub-optimal experience for your users.