I’m using meteor-react-router-ssr and have SSR working well, but I need some help on how to get data hydration working, with a reactive data source.
I have some routes/components which display a reactive data source from a
Meteor.subscribe followed by
collection.find(). I need the components to be reactive so that changes made on one client are updated on other clients.
The components are rendered on the server perfectly with the correct data, but then they disappear and reappear quickly once the client-side
find functions kick in and replace the SSR elements with reactive elements. (I also get the console warning “
React attempted to reuse markup in a container but the checksum was invalid....”)
rehydrateHook, but can some kind person explain how to use these with meteor subscriptions?
Edit: missed the important point: On the client, if the route is navigated to from another page (i.e. no SSR), then to prevent the subscription data being displayed before the subscription is complete, I am conditionally showing the element only when
subscription.ready() is true. So the server renders the complete component, then the client removes it and renders it again when the subscription is ready. This is what’s causing the flash and console error.
Is there a way to prevent the list from displaying until the subscription is ready unless it has already been rendered by the server, or, ideally, hydrating the SSR with a reactive data source so that the
subscribe on the client is instant and doesn’t need another round-trip to the server?