PersistGate in SSR applications rendering app twice when using React v18

[semajtwin]

I am currently working on updating a Next.js SSR application from v12 to v13. Next.js v13 requires a minimum React version of 18.2.0. Upon running the application the page rendered the application twice.

From my investigation I found that rendering the application twice is happening when using PersistGate with React v18. Whilst I found the issue in a Next.js application, I managed to replicate the same issue using React with SSR as seen below:

Here are two examples which replicate the issue using plain React with SSR:

• React v17.0.2 + Redux ✅
• React v18 + Redux ❌

Both examples have the following implementation:

server/server.js: renders App component wrapped with react-redux's Provider

${ReactDOMServer.renderToString(
   <Provider store={store}>
      <p>Server</p>
      <App />
   </Provider>
)}

src/index.js: renders App component wrapped with react-redux's Provider and redux-persist's PersistGate

ReactDOM.hydrate(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <p>Client</p>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

Workarounds found

Two workarounds I found on this GitHub issue:

• Pass a function to PersistGate
• Remove PersistGate, use persistStore(store)

Both solved the rendering issue however the persist/REHYDRATE action is not triggered straight after persist/PERSIST action, I fear this would lead to other issues upon initialising the application.

Normal Behaviour:

- persist/PERSIST
- persist/REHYDRATE
- [APP ACTIONS] ...
- ...

Delayed Rehydration:

- persist/PERSIST
- [APP ACTIONS] 
- ...
- persist/REHYDRATE
- [APP ACTIONS] ...
- ...

It may be that the setup is incorrect. However, I think that the fact that using React v17 works as expected, does point to an issue when using PersistGate with React v18.

Is this a known issue with React v18? Any possible solutions for SSR applications please?

[haveamission]

I don't think this library is very maintained, and it doesn't work great with Next.

I'm finding it's forcing me into CSR rendering, which may be related to this

[NRoos]

@semajtwin did you ever end up figuring out a solution to this?

[semajtwin]

Hi @NRoos, unfortunately not yet :/