Hi everybody,
I have one question. How would you deal with react-router-ssr and data fetching?
Problem is when react loads inside the server it has all the data but when it loads in the client it does not. This is obviously because it has to query for the data and wait for it while at the server it is synchronous. The problem is it throws the following warning.
React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting.
What should I do?
Thanks for your attention.
You are using the most recent version of reactrouter:react-router-ssr with meteor 1.4?
If so, the current version doesn’t work with meteor publication data. I have a patched copy I am using but it’s not a really nice fix. I’ve been trying to get the time to dig into it more and see if I can get a nicer fix working.
1 Like
On the server, I inject a serialized JSON of the required data under a <script> tag. On the client, as soon as the window.onload is called, I deserialize these data and use them as the initial state for Redux, then I render the app. After the app has started, I subscribe to my publication and use Redux & Tracker to handle new data propagation.
By the way, I’ve started a project that will recreate these steps as well as other stuff like data, component, route caching for the server : https://github.com/ssr-server/ssr
What I’ve described is visible here (except Redux which is not implemented yet, I use dummy data for checking my implementation for the moment):
2 Likes
oh how nice. I’m going to check. Thanks
How did you make the dirty fix?
So basically the subscriptions inside create container have to run to allow fast-render to get the necessary data. To do this I’m calling ReactDOMServer.renderToString(app) twice. Once to allow the subscriptions to run and then the second time to output the html fully rendered with the necessary data… This isn’t ideal however due to ReactDOMServer having run this twice.
Now, the demo features a redux example used for the serialized initial state 
2 Likes