Redux-persist: Problem with loading behaviour when doing SSR and PersistGate

Created on 18 Mar 2019 · 7Comments · Source: rt2zz/redux-persist

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

Source

rajatbarman

👍2

Most helpful comment

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 on 18 Mar 2019

👍8 ❤1

All 7 comments

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 on 18 Mar 2019

👍8 ❤1

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.