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

Question

아래는 프로필페이지 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 } /> ) } 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이 되게 설정해놨습니다. 아래는

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

제로초(조현영) · Answer

router.replace는 ssr이 아니라 csr입니다. 데이터가 없는 경우 에러가 나는 것이므로 데이터가 없을 때 화면도 만들어두시면 됩니다.