Server transfer using response-router v4 and data prefetching

Question

I worked a lot with server-side rendering with RR 3, so I wanted to see how it works in the v4 context. I followed the tutorial from the website, but since now the rendering happens along with the matching routes, there is no way to pre-fetch the data as before.

Here's how I rendered the server using v3: https://github.com/alexnm/react-seed/blob/master/server/index.js

Based on the matching function, I would call all the prefetch functions from the entire component tree, and then wait with Promise.all to complete them, then run the renderToString function and return html.

In RR4, we only have the <ServerRouter> component, so the current solution I came with duplicates the visualization code: https://github.com/FortechRomania/react-redux-complete-example/blob/master/src/server/index .js

I also use the render function in the <Match> to trigger prefetch actions. It is ugly and introduces all kinds of dependencies in the parent component of the page that I want to display with preloaded data.

What am I missing here? Has anyone found a better solution for this scenario? I have not found anything useful yet.

Answer 1

The new RR4 documentation has a working example: https://reacttraining.com/react-router/web/guides/server-rendering/data-loading