Problem with loading behaviour when doing SSR and PersistGate

[rajatbarman]

Hey guys,

Great solve for the persistence problem, although I have an issue.

<PersistGate loading="loading" persistor={persistor}>

    <MyEntireApp />

</PersistGate/>

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

[rajatbarman]

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")
            );
          }
        });

[pwnreza]

Hi there. Thanks for your answer. Didn't you have an Error similar to: "Warning: Did not expect server HTML to contain a

in

."

I guess that because the Dom Tree is different without the PersistGate you get the Error while rehydrating.

max8hine commented 5 years ago

Having few issues with the SSR in Gatsby. Such as:

1. could not load the persisted data correctly
2. providing google/facebook crawling the Gatsby site Any solution or progress for it?

krunalp1993 commented 4 years ago

@rajatbarman Your solution worked for me! Thanks!

MiKatre commented 4 years ago

My solution: https://stackoverflow.com/a/62501513/7292383

alexpchin commented 3 years ago

I'm using struggling to solve this when integrating redux-persist with Gatsby.

ybarakhovskyi commented 3 years ago

https://github.com/vercel/next.js/issues/8240#issuecomment-647699316 another solution from Next.JS community

simplenotezy commented 2 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")
            );
          }
        });

@rajatbarman can you show where you put the code you provided? No clue where to put your snippet.

6lyxt commented 1 year ago

bump

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[max8hine]

Having few issues with the SSR in Gatsby. Such as:

1. could not load the persisted data correctly
2. providing google/facebook crawling the Gatsby site Any solution or progress for it?

[krunalp1993]

@rajatbarman Your solution worked for me! Thanks!

[MiKatre]

My solution: https://stackoverflow.com/a/62501513/7292383

[alexpchin]

I'm using struggling to solve this when integrating redux-persist with Gatsby.

[ybarakhovskyi]

https://github.com/vercel/next.js/issues/8240#issuecomment-647699316 another solution from Next.JS community

[simplenotezy]

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")
            );
          }
        });

@rajatbarman can you show where you put the code you provided? No clue where to put your snippet.

[6lyxt]

bump