rt2zz
PersistGate in SSR applications rendering app twice when using React v18
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:
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:
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?
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
