Open rajatbarman opened 5 years ago
To those looking for solution.
Don't use <PersistGate />
wrapper, instead wrap this logic over ReactDOM.hydrate
persistor.subscribe(() => {
/* Hydrate React components when persistor has synced with redux store */
const { bootstrapped } = persistor.getState();
if (bootstrapped) {
ReactDOM.hydrate(
<MyEntireApp />,
document.getElementById("appOrWhatever")
);
}
});
Hi there. Thanks for your answer. Didn't you have an Error similar to: "Warning: Did not expect server HTML to contain a
I guess that because the Dom Tree is different without the PersistGate you get the Error while rehydrating.
Having few issues with the SSR in Gatsby. Such as:
@rajatbarman Your solution worked for me! Thanks!
My solution: https://stackoverflow.com/a/62501513/7292383
I'm using struggling to solve this when integrating redux-persist
with Gatsby.
https://github.com/vercel/next.js/issues/8240#issuecomment-647699316 another solution from Next.JS community
To those looking for solution. Don't use
<PersistGate />
wrapper, instead wrap this logic over ReactDOM.hydratepersistor.subscribe(() => { /* Hydrate React components when persistor has synced with redux store */ const { bootstrapped } = persistor.getState(); if (bootstrapped) { ReactDOM.hydrate( <MyEntireApp />, document.getElementById("appOrWhatever") ); } });
@rajatbarman can you show where you put the code you provided? No clue where to put your snippet.
bump
Hey guys,
Great solve for the persistence problem, although I have an issue.
When the app is rendered from the server, the react component tree is already created and the view is already rendered, but because of
<PersistGate />
the whole tree is reconstructed as it has to render the loading text instead of the whole app while persist is syncing with the store and then again construct the whole app's component tree, which leads to a break in user experience.Imagine this - Web app Rendered (from server) -> Loading Text Rendered (when client JS comes into play and persistor starts hydrating) -> Web app Re-rendered (after persistor is done hydrating the store)
A not so user friendly experience.
Basically this line in PersistGate creates problem when doing SSR -
this.state.bootstrapped ? this.props.children : this.props.loading
react v16 redux-persist v5.7.0