title: How to implement redux-toolkit and next,js and not lose SSR
body: <p>I'm trying to implement redux-toolkit in my Next.js project without losing the option of SSR for the data I'm fetching from an external API. I have followed the example in next.js GitHub but doing so led to not having SSR when fetching data in my redux slice. I would like to know how I can fetch data and save that data in the Redux state. this is what I've written:
  this is the store.js file</p>
  <pre><code>export const store = configureStore({
    reducer: {
      users: usersReducer,
    },
  });
  </code></pre>
  <p>the _app.js file</p>
  <pre><code>import { Provider } from 'react-redux';
  import { store } from '../app/store';
  
  const MyApp = ({ Component, pageProps }) =&gt; {
    return (
      &lt;Provider store={store}&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/Provider&gt;
    );
  };
  
  export default MyApp;
  </code></pre>
  <p>the usersSlice.js file</p>
  <pre><code>import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
  
  const initialState = {
    items: null,
    status: 'idle',
    error: null,
  };
  
  export const fetchUsers = createAsyncThunk('users/fetchUsers', async () =&gt; {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await res.json();
  
    return users;
  });
  
  const usersSlice = createSlice({
    name: 'categories',
    initialState,
    reducers: {},
  
    extraReducers: {
      [fetchUsers.pending]: (state, action) =&gt; {
        state.status = 'loading';
      },
  
      [fetchUsers.fulfilled]: (state, action) =&gt; {
        state.status = 'succeeded';
        state.items = action.payload;
      },
  
      [fetchUsers.rejected]: (state, action) =&gt; {
        state.status = 'failed';
        state.error = action.error.message;
      },
    },
  });
  
  export default usersSlice.reducer;
  </code></pre>
  <p>and finally where the page I'm fetching the data from:</p>
  <pre><code>export default function Home() {
    const dispatch = useDispatch();
    const users = useSelector((state) =&gt; state.users.items);
    useEffect(() =&gt; {
      dispatch(fetchUsers());
    }, [dispatch]);
  
    return (
      &lt;div&gt;
        &lt;h1&gt;users&lt;/h1&gt;
        {users &amp;&amp;
          users.length &amp;&amp;
          users.map((user) =&gt; &lt;p key={user.id}&gt;{user.name}&lt;/p&gt;)}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>If I fetch data through dispatching the fetchUsers function it won't have SSR, and if  I use getServerSideProps it won't be saved in redux state. I'm clueless</p>