title: NextJS, preload Redux data in getServerSideProps
body: <p>Based on this <a href="https://nextjs.org/docs/api-reference/data-fetching/getInitialProps" rel="noreferrer">info</a> from the official NextJS docs they recommend using getServerSidedProps and getStaticProps instead of getInitialProps.</p>
  
  <p>I want to preload some data to Redux state on the server.</p>
  
  <p><strong>note</strong>: I use @redux/toolkit package</p>
  
  <p>So I have basic store setup:</p>
  
  <pre><code>import reducer from './reducer' // this is just a combineReducers ...
  export const store = configureStore({ reducer });
  </code></pre>
  
  <p>My custom _app.js</p>
  
  <pre><code>import { store } from '../store'
  
  &lt;Provider store={store}&gt;
      &lt;Component {...pageProps} /&gt;
  &lt;/Provider&gt;
  </code></pre>
  
  <p>Now here is the issue I am facing</p>
  
  <p>In the index.js file i have something like this</p>
  
  <pre><code>import { store } from '../store'
  ...
  export const getServerSideProps = async (ctx) =&gt; {
      const data = await fetchSomeData();
      // here I add some data to the store
      store.dispatch(someAction(data));
      return { props: {} }     
  }
  </code></pre>
  
  <p>Data is set in the store while on the server side, however when I am on the client, store is empty. Does anyone know how can I preload data while on the server? I don't want to use useEffect of componentDidMount and set that data on the client. I know there is a library that is fixing this issue, but it is using getInitialProps instead, and I would like to see if something can be done in this way.</p>