NextJs redux persist prevent show DOM in view page source

I am building app with NextJs + Redux persist. For SEO purpose I expect to show DOM Content (inside the defaul div#__next of NextJs) when view page source. It's ok without add PersistGate to component /pages/_app.js.

But if I add PersistGate, no DOM content shown in page source. I have searched on Internet as well as docs of redux persist but no information. Can anyone give me an advice?

My codes /pages/_app.js:

import { Provider } from 'react-redux';
import { persistor, store } from 'src/store';
import { PersistGate } from 'redux-persist/integration/react';

function MyApp({ Component, pageProps }) {
    return (
        <Provider store={store}>
            {/* <PersistGate persistor={persistor}> */} **if uncomment this line, no DOM content shown in view page source**
            <main>
                <Component {...pageProps} />
            </main>
            {/* </PersistGate> */}
        </Provider>
    );
}

export default MyApp;

code of redux persist, store.js:

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import RootReducer from './root-reducer';

const persistConfig = {
    key: 'vm',
    storage,
};

const persistedReducer = persistReducer(persistConfig, RootReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

root-reducer.js:

import { combineReducers } from 'redux';
import appReducer from './app/reducer';

const RootReducer = combineReducers({
    App: appReducer,
});

export default RootReducer;