I worked a lot with server side rendering with RR 3 so I wanted to see how it works in the context of v4. I followed the tutorial from the website, but because the rendering is happening now together with the route match, there's no way to implement prefetching data as before.
Here's how I used to do server rendering with v3: https://github.com/alexnm/react-seed/blob/master/server/index.js
Based on the match function, I would call all the prefetch functions from all the component tree and then wait with a Promise.all
for them to finish, then trigger the renderToString
function and return the html.
In RR4, we have only the <ServerRouter>
component, so the current solution I came with is duplicating the render code:
https://github.com/FortechRomania/react-redux-complete-example/blob/master/src/server/index.js
I'm also using the render
function on the <Match>
tag to trigger the prefetch actions. It's ugly and introduces all sorts of dependencies in the parent component of the page I want to render with prefetched data.
What am I missing here? Has anyone found a better solution for this scenario? I haven't found anything useful yet.
The new RR4 documentation has a working example: https://reacttraining.com/react-router/web/guides/server-rendering/data-loading