SSR적용했을때 router.replace 한박자 늦게돼서 오류

아래는 프로필페이지 ssr적용한 코드입니다.

const ProfilePage = () => {
  const dispatch = useDispatch();
  const {loadedProfile} = useSelector(state=>state.user);

  useEffect(()=>{
    dispatch(indexSlice.actions.changeMenu('user'));
  },[])
  
  return(
    <div>
      <Header currentLocate="user"/>
      <ProfileLayout profileUser={loadedProfile} />
    </div>
  )
}

export const getServerSideProps = wrapper.getServerSideProps((store)=>async({req,params})=>{
  const cookie = req ? req.headers.cookie : '';
  axios.defaults.headers.Cookie = '';
  if(req && cookie){
    axios.defaults.headers.Cookie = cookie;
  }
  await store.dispatch(loadUser());
  await store.dispatch(loadProfile(params.profile));
})

export default ProfilePage;
loadProfile()은 프로필정보 받아오는 액션입니다.
로그아웃시에는 loadUser.rejected 로 me도 null,
loadProfile도 rejected 돼서 loadedProfile도 null이
되게 설정해놨습니다.

아래는 <Header /> 컴포넌트에 에 들어간 로그아웃함수입니다.

const onClickLogout = useCallback(()=>{
    dispatch(logoutAction());
    router.replace('/')
  },[]);
여기서 문제가 ssr로 인해 화면을 만들어준뒤에 router가 
실행되는것같아서 데이터가 필요한 코드에 에러가뜨며
"'~~~' 는 null에서 가져올수 없다" 같은 에러가 뜨며
url을 보면 '/'로 이동을 하긴했지만 에러화면이 떠있습니다.
그래서 데이터가 필요한 화면에서도 로그아웃을 누르면
에러화면없이 '/'로 이동하게하고싶은데 방법이 없을까요.
wrapper.getServerSideProps 함수에 router을 넣어보니
router는 오직 csr에서만 사용가능하다는 에러화면이뜹니다.

인프런 커뮤니티 질문&답변