Problem with loading behaviour when doing SSR and PersistGate

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

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:8

Top GitHub Comments

13reactions

rajatbarmancommented, Mar 18, 2019

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

2reactions

max8hinecommented, Jun 25, 2019

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