Page content not available in view-page-source when using redux-persist with redux-toolkit.
Unanswered
German yellowjacket posted this in #help-forum
German yellowjacketOP
1 solution that worked yesterday was that i checked window object availability in _app.js and then put redux persist wrapper above component. This solution worked, but this approach was giving me two copy of home page, one with unfilled data and one with filled data( dynamic ). so unfilled page was at top and after footer the filled page was started again ,
This behaviour was on first render. after refresh i was getting single page with filled data.
2. One solution on stack overflow is about using {()=>( <OurComponents></OurComponents> )} in _app.js below redux persist. but this approach was giving hydration errors.
this. is my _app.js currently
-------------------------------------------------------------
#Unknown Channel
<Provider store={store}>
<Head>
<link rel='shortcut icon' href='/favicon.ico' />
</Head>
{/* // persist to be removed /}
{/ <PersistGate loading={null} persistor={persistor}> /}
<SSRProvider>
<CookiesProvider>
<AuthProvider>
<UserProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</UserProvider>
</AuthProvider>
</CookiesProvider>
<ToastContainer
position='top-center'
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme='light'
limit={4}
/>
</SSRProvider>
{/ </PersistGate> */}
</Provider>
Please help in this
This behaviour was on first render. after refresh i was getting single page with filled data.
2. One solution on stack overflow is about using {()=>( <OurComponents></OurComponents> )} in _app.js below redux persist. but this approach was giving hydration errors.
this. is my _app.js currently
-------------------------------------------------------------
#Unknown Channel
<Provider store={store}>
<Head>
<link rel='shortcut icon' href='/favicon.ico' />
</Head>
{/* // persist to be removed /}
{/ <PersistGate loading={null} persistor={persistor}> /}
<SSRProvider>
<CookiesProvider>
<AuthProvider>
<UserProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</UserProvider>
</AuthProvider>
</CookiesProvider>
<ToastContainer
position='top-center'
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme='light'
limit={4}
/>
</SSRProvider>
{/ </PersistGate> */}
</Provider>
Please help in this
2 Replies
German yellowjacketOP
i am getting some idea about this now
it is mainly hydration error, coming due to redux