with-redux-persist SSR issue

Example bug report

Example name

with-redux-persist

Describe the bug

A clear and concise description of what the bug is. Implementing with-redux-persist leads to HTML elements missing from the page source.

To Reproduce

1. In _app.js
2. Wrap the components with <Provider> and <PersistGate>

_app.js

render() {
    const { Component, pageProps, reduxStore } = this.props;

    return (
      <Container>
        <AppPageHead />
        <GlobalStyle />
        <Provider store={reduxStore}>
          <PersistGate loading={null} persistor={this.persistor}>
            <Layout>
              <Component {...pageProps} {...this.state} />
            </Layout>
          </PersistGate>
        </Provider>
      </Container>
    );
}

test.js

import React from 'react';

export default () => <div> Hello world</div>;

with-redux-store.js

import React from 'react';
import { initializeStore } from '../store';

const isServer = typeof window === 'undefined';
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__';

function getOrCreateStore(initialState) {
  // Always make a new store if server, otherwise state is shared between requests
  if (isServer) {
    return initializeStore(initialState);
  }

  // Create store if unavailable on the client and set it on the window object
  if (!window[__NEXT_REDUX_STORE__]) {
    window[__NEXT_REDUX_STORE__] = initializeStore(initialState);
  }
  return window[__NEXT_REDUX_STORE__];
}

export default App =>
  class AppWithRedux extends React.Component {
    static async getInitialProps(appContext) {
      // Get or Create the store with `undefined` as initialState
      // This allows you to set a custom default initialState
      const reduxStore = getOrCreateStore();

      // Provide the store to getInitialProps of pages
      appContext.ctx.reduxStore = reduxStore;

      let appProps = {};
      if (typeof App.getInitialProps === 'function') {
        appProps = await App.getInitialProps(appContext);
      }

      return {
        ...appProps,
        initialReduxState: reduxStore.getState(),
      };
    }

    constructor(props) {
      super(props);
      this.reduxStore = getOrCreateStore(props.initialReduxState);
    }

    render() {
      return <App {...this.props} reduxStore={this.reduxStore} />;
    }
  };

Expected behavior

1. SSR to work as expected

Screenshots

Before

After

System information

• OS: macOS
• Browser chrome
• Version of Next.js: 9.0.2

[nuriun]

@jeffersoncustodio820 Your solution is good, but this causes ReactDOM.hydrate to throw an HTML mismatch error.

Here, this is my solution either:

This is able to work on the server and client side. Also, since it works the same way on both sides, so we don’t annoy the hydrate function for HTML mismatch error.

<PersistGate loading={null} persistor={persistor}>
    {() => (
        <ThemeProvider theme={{}}>
            <EverythingElse />
        </ThemeProvider>
    )}
</PersistGate>

So, how?

Because, as you can see below, PersistGate defines this.state.bootstrapped’s value while componentDidMount work. However, componentDidMount doesn’t work on the server-side. Also, it means you can not use redux-persist on the server-side.

  componentDidMount() {
    this._unsubscribe = this.props.persistor.subscribe(
      this.handlePersistorState
    )
    this.handlePersistorState()
  }

  handlePersistorState = () => {
    const { persistor } = this.props
    let { bootstrapped } = persistor.getState()
    if (bootstrapped) {
      if (this.props.onBeforeLift) {
        Promise.resolve(this.props.onBeforeLift())
          .finally(() => this.setState({ bootstrapped: true }))
      } else {
        this.setState({ bootstrapped: true })
      }
      this._unsubscribe && this._unsubscribe()
    }
  }

If we passed a function as a child, we can return our component directly according to the code below. In this scenario, the status of this.state.bootstrapped is not important.

  render() {
    if (process.env.NODE_ENV !== 'production') {
      if (typeof this.props.children === 'function' && this.props.loading)
        console.error(
          'redux-persist: PersistGate expects either a function child or loading prop, but not both. The loading prop will be ignored.'
        )
    }
    if (typeof this.props.children === 'function') {
      return this.props.children(this.state.bootstrapped)
    }

    return this.state.bootstrapped ? this.props.children : this.props.loading
  }

[Pushplaybang]

Pretty disappointed to find this closed without a clear response.