Using Redux Provider vs Redux Wrapper with NextJs | State Persists Without Wrapper - reactjs

Question

According to the docs for the next-redux-wrapper:
When Next.js static site generator or server side rendering is involved, however, things start to get complicated as another store instance is needed on the server to render Redux-connected components.
I don't understand exactly where the complication arises.
SSR to SSG Redux State Persists During Page Navigation
I built a simple NextJs app that has one page that renders on the server, and another that is statically rendered. In production mode or in development mode, I can navigate between these two pages, and my redux state remains in-tact.
My understanding is that this isn't supposed to be the case, since a separate redux store must be created on the server and on the client; hence the creation of the next redux wrapper (also for injecting redux state into NextJs lifecycle methods, which I haven't needed).
I'm confused as to what mechanism is being used to persist the redux state between SSR and SSG pages. I'm using a simple redux provider, with a simple bit of state for testing.
Note: State persists between these two page components even without using redux-persist.
Redux Persist Also Works...
I have confirmed that redux persist also works without the next redux wrapper, saving to the local storage without issue, persisting successfully on page refresh.
Here's example code of my configuration:
page1.js (Statically rendered)
import Layout from './layout';
import { useSelector, useDispatch } from 'react-redux';
import { getTest, addBar } from '../redux/slices/topten';
export default function Page1() {
const dispatch = useDispatch();
const myState = useSelector(getTest);
return (
<Layout>
<h2>Statically Rendered</h2>
<div>
<span>
{ myState }
</span>
<button onClick={() => dispatch(addBar())}>
Add Bar to Foo
</button>
</div>
</Layout>
)
}
page2.js (Server-side rendered)
import Layout from './layout';
import { useSelector, useDispatch } from 'react-redux';
import { getTest, addBar } from '../redux/slices/topten';
export default function Page2() {
const dispatch = useDispatch();
const myState = useSelector(getTest);
return (
<Layout>
<h2>Server Side Rendered</h2>
<div>
<span>
{ myState }
</span>
<button onClick={() => dispatch(addBar())}>
Add Bar to Foo
</button>
</div>
</Layout>
)
}
export async function getServerSideProps() {
// Code for fetching data from external api.
return {
props: {
// Returned props
}
};
};
App.js
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from '../redux/store';
export default function MyApp({ Component, pageProps }) {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Component {...pageProps} />
</PersistGate>
</Provider>
)
}
topten.js (This is the redux slice with a simple reducer)
const initialState = {
topTen: {
test: "foo"
}
}
const topTenSlice = createSlice({
name: 'topten',
initialState,
reducers: {
addBar: (state) => {
state.topTen.test = "foobar";
}
},
});
// Export action.
export const { addBar } = topTenSlice.actions;
// Export slice reducer.
export default topTenSlice.reducer;
// Export state.
export const getTest = state => state.topten.topTen.test;
I left out the code for Layout and store, because it's redundant. It works without the wrapper... That's what I'm trying to understand.
I have verified here that state persists between the two components simply using the Provider HOC. According to the docs:
store is being replaced on navigation
I have also verified that state is persisting on page refresh using redux-persist.
I don't understand why I would need the wrapper unless I needed access to redux state within the NextJs lifecycle methods... Which can easily be avoided using redux useSelector hooks.
Any clarity on this would be appreciated.