인프런 커뮤니티 질문&답변
작성한 질문수
getServerSideProps에서 store를 사용하는 것에 문제가 있습니다.
작성
·
435
0
기본적으로 모든 페이지에서 유저 정보를 가져와 redux에 있는 isLogin state를 true로 만들어 로그인 상태를 유지하고 있습니다.
그 상태에서 개인 페이지로 이동하는데, 이 때 개인 페이지는 먼저 getServerSideProps에서 store에 있는 isLogin 값을 확인하여 로그인 한 상태일 때만 접속을 허용하고 아니면 redirect 합니다.
그런데 문제는 이전 페이지에서 유저 정보를 받아와 isLogin이 true 임에도, Link를 통해 개인 페이지로 이동하면 getServerSideProps에서는 여전히 isLogin이 false라 redirect 됩니다.
세팅은 강좌와 똑같이 했고, dispatch는 잘됩니다.
다른 페이지에서도 store를 이용하려 할 때 문제가 생기는 걸 보니, getServerSideProps안의 store는 client와 다르게 여전히 initialState인 것 같습니다.
어떤 것이 문제일지, 혹은 리다이렉트 시키는 다른 더 좋은 방법이 있는지 궁금합니다.
getServerSideProps에서 또 다시 유저 정보를 가져와서 state를 반영한 뒤 store를 확인해야 하는 것일까요?
답변 1
0
네 getServerSideProps의 store는 initialState입니다(서버는 한 대라서 개인의 state를 저장할 수 없으니까요). 그래서 getServerSideProps에서 다시 유저 정보를 가져와야 합니다. 그런데 개인 페이지에서도 굳이 getServerSideProps를 사용하셔야 하나요?
네 getServerSideProps는 비어 있는 스토어에 데이터를 채워서 최종적으로 프론트에 전달하는 역할이고, 스토어로부터 데이터를 꺼내는 역할은 아닙니다.
이게 getServerSideProps를 사용하면 잘못하면 클라이언트 store를 덮어써버리기때문에 문제가 됩니다. 강좌에서는 hydrate를 단순히 덮어쓰도록 만들었지만 좀 더 고도화하여서 바뀐 부분만 바뀌도록 하면 되긴 합니다.
이제 이해가 됐습니다!
이건 다른 질문이긴 한데 혹시 _app.js에서 useEffect를 쓰는것이 괜찮을까요?
임의의 에러가 발생하면 dispatch를 통해 someError라는 state를 true로 만드는데, 이 값이 true가 되면 로그아웃을 시키고 로그인 페이지로 이동시키고 싶습니다
로그아웃 시키는것 까지는 리덕스 사가로 이어서 하면 되는데 useRouter는 리액트 컴포넌트 안에서만 사용 가능해서 페이지 이동을 시키지 못하네요
그래서 이 값이 true가 되는지 useEffect로 계속 감시하고 싶습니다
리액트였다면 그냥 App에서 하면 됐을텐데 next는 어떤지 잘 모르겠습니다
답변 감사합니다!
그렇다면 getServerSideProps에서 store에 접근할수 있다해도 실질적으로 state는 잘 이용하지 않고 dispatch를 쓰는 용도인거겠죠?
client에서 useEffect로 리다이렉트 해줄수도 있겠지만 가능한 getServerSideProps를 이용해서 서버단에서 하는게 사용자 입장에서 좋을 거라고 막연히 생각했습니다
생각해보니 너무 남발하는건가 싶기도 하네요