Redux-persist: Skip PersistGate while doing server side rendering?

[rsbh]

react is giving html mismatch error, because server is not rendering loading component of persist gate

[rt2zz]

I expect other have more experience with SSR than I, but generally I would recommend not using PersistGate if you are using SSR. redux-persist-cookie-storage might help here, since it allows you have identical state server side and client side during rehydration.

[mark-slepkov]

Hey, guys. I solved this problem using code like this.

import {PersistGate as PersistGateClient} from 'redux-persist/integration/react';
class PersistGateServer extends React.Component {
    render() {
        return this.props.children
    }
}

class App extends React.Component {
    render() {
        let runtime = process.env.RUNTIME;
        let PersistGate = PersistGateServer;
        if (runtime === 'browser') {
             PersistGate = PersistGateClient
        }
        return (
                <PersistGate loading={null} persistor={persistor}>
                       <WhateverYouWant />
                </PersistGate>
        )
    }

I hope it is helpful for you.

[DBosley]

@mark-slepkov: How did you mock out or load the persistor server side? I'm using the localstorage option for redux-persist, so you can't really load the persistor when server side rendering.

[awwong1]

I came across this issue when running my own SSR React application.
I'm currently seeing no issues just stubbing in PersistGate with no props defined:

// client.ts
const appLayout = createElement(ApplicationLayout);
const withRouter = createElement(BrowserRouter, undefined, appLayout);
const withRedux = createElement(ReduxProvider, {store}, withRouter);
const withPersist = createElement(PersistGate, {loading: null, persistor}, withRedux);
const withHelmet = createElement(HelmetProvider, undefined, withPersist);

// server.ts
const appLayout = createElement(ApplicationLayout);
const withRouter = createElement(StaticRouter, { context: {}, location: req.url }, appLayout);
const withRedux = createElement(Provider, { store }, withRouter);
const withPlaceholderPersistor = createElement(PersistGate, null, withRedux); // no persistor! just for structure
const withHelmet = createElement(HelmetProvider, { context: helmetContext }, withPlaceholderPersistor);

[mertyjsx]

this is my solutıon. ıt works for me but i am not sure ıt ıs correct