redux-persist: Fetch as google : Redux persist creating problem when fetching as google it is showing blank page

Fetching as google giving blank page when using redux persist with nextJS When I removed redux persist it is showing all the content when fetching as google.

This is how I am using persist in app.js

const { store } = this.props return ( <Container> <Provider store={store}> <PersistGate persistor={store.__persistor} loading={null}> <WrapperComp {...this.props} /> </PersistGate> </Provider> </Container> )

With redux persist with redux-persist

Without redux-persist

Please suggest some solution.

redux-persist: “5.7.2”, next: “6.4.1” react: ‘16.3’ redux: ‘3.6’

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 18

Most upvoted comments

Make a conditional on the render of _app.js so that when React is being mounted on the client-side it will be wrapped with PersistGate.

function App({ Component, pageProps }) {
  const store = useStore((state) => state);

  return process.browser ? (
    <PersistGate persistor={store.__persistor} loading={null}>
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </PersistGate>
  ) : (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

I recommend to use typeof window !== 'undefined' instead of process.browser (https://github.com/zeit/next.js/issues/5354#issuecomment-520305040)

ganobrega on Jul 31, 2020

I have this problem as well with the same setup. SSR doesn’t work at all when using Redux persist. As soon as you take the <PersistGate …> out it works as expected.

Is there a way to use redux-persist and keep SSR?

bmtdh on Feb 4, 2019

Anyone has found any solutions to this?

rahimimo on Nov 2, 2021

@aguynamedben I thought i found something about this it may be a bug.

Reproduce steps

Create _app.js with this code:

<Container>
  <Provider store={reduxStore}>
    <PersistGate loading={<Loading visibility='visible' />} persistor={persistor}>
      <Component {...pageProps} />
    </PersistGate>
  </Provider>
</Container>

You have to use Head from next/head to insert some data into <head>.
Go to open a browser with your project url and then open page source.
You will not see any tag in <head>.
Get back to _app.js and try to remove PersistGate as this code:

<Container>
  <Provider store={reduxStore}>
    <Component {...pageProps} />
  </Provider>
</Container>

Go to a browser and try to open page source again.
Every data in <head> will appears.

"next": "^7.0.2"
"redux-persist": "^5.10.0"
"react": "^16.6.3"
"redux": "^4.0.1"

Actually this problem appears on next 6 also, It effect to SEO of website directly.

IOsonoTAN on Dec 18, 2018