Using redux toolkit in NextJS without next-redux-wrapper

Question

I'm new to NextJS and I'm trying to figure out on how to implement RTK, I stumbled on this github repo example from Jack Harrington and basically his slices has a rehydrate reducer:

reducers: {
    rehydrate(state, action: PayloadAction<PokemonState>) {
      state.error = action.payload.error;
      state.pending = action.payload.pending;
      state.pokemon = action.payload.pokemon;
      state.filteredPokemon = action.payload.filteredPokemon;
      state.search = action.payload.search;
    },
}

Then on his page he does this on getServerSideProps:

export async function getServerSideProps() {
  await store.dispatch(getPokemon()); //dispatching an AsyncThunk
  return {
    props: {
      initialState: store.getState(),
    },
  };
}

Inside the page component he uses useEffect to hydrate:

function Home({ initialState }) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(rehydrate(initialState.pokemon));
  }, [dispatch, initialState]);

  return <>...</>
}

Is it ok to use useEffect or hooks in general to hydrate your redux states in NextJS? also to use useState, useEffect, useMemo, useCallback doesn't it make your page client side?

Using getStaticProps and getServerSideProps when you have a useEffect is pointless when you are trying to do SSG and SSR?

Basically what I want to accomplish to be able to do ssg and ssr while being able to use all of RTK features such as thunks, slices, queries and etc.