getServerSideProps에서 store를 사용하는 것에 문제가 있습니다.
447
작성한 질문수 18
기본적으로 모든 페이지에서 유저 정보를 가져와 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를 사용하셔야 하나요?
0
답변 감사합니다!
그렇다면 getServerSideProps에서 store에 접근할수 있다해도 실질적으로 state는 잘 이용하지 않고 dispatch를 쓰는 용도인거겠죠?
client에서 useEffect로 리다이렉트 해줄수도 있겠지만 가능한 getServerSideProps를 이용해서 서버단에서 하는게 사용자 입장에서 좋을 거라고 막연히 생각했습니다
생각해보니 너무 남발하는건가 싶기도 하네요
0
네 getServerSideProps는 비어 있는 스토어에 데이터를 채워서 최종적으로 프론트에 전달하는 역할이고, 스토어로부터 데이터를 꺼내는 역할은 아닙니다.
이게 getServerSideProps를 사용하면 잘못하면 클라이언트 store를 덮어써버리기때문에 문제가 됩니다. 강좌에서는 hydrate를 단순히 덮어쓰도록 만들었지만 좀 더 고도화하여서 바뀐 부분만 바뀌도록 하면 되긴 합니다.
0
이제 이해가 됐습니다!
이건 다른 질문이긴 한데 혹시 _app.js에서 useEffect를 쓰는것이 괜찮을까요?
임의의 에러가 발생하면 dispatch를 통해 someError라는 state를 true로 만드는데, 이 값이 true가 되면 로그아웃을 시키고 로그인 페이지로 이동시키고 싶습니다
로그아웃 시키는것 까지는 리덕스 사가로 이어서 하면 되는데 useRouter는 리액트 컴포넌트 안에서만 사용 가능해서 페이지 이동을 시키지 못하네요
그래서 이 값이 true가 되는지 useEffect로 계속 감시하고 싶습니다
리액트였다면 그냥 App에서 하면 됐을텐데 next는 어떤지 잘 모르겠습니다
넥스트 버젼 질문
0
91
2
로그인시 401 Unauthorized 오류가 뜹니다
0
104
1
무한 스크롤 중 스크롤 튐 현상
0
199
1
특정 페이지 접근을 막고 싶을 때
0
117
2
createGlobalStyle의 위치와 영향범위
0
104
2
인라인 스타일 리렌더링 관련
0
98
2
vsc 에서 npm init 설치시 오류
0
159
2
nextjs 15버전 사용 가능할까요?
0
166
1
화면 새로고침 문의
0
129
1
RTK에서 draft, state 차이가 있나요?
0
164
2
Next 14 사용해도 될까요?
0
455
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
359
1
url 오류 질문있습니다
0
218
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
394
1
sudo certbot --nginx 에러
0
1298
2
Minified React error 콘솔에러 (hydrate)
0
482
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
257
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
341
1
npm run build 에러
0
526
1
front 서버 npm run build 중에 발생한 에러들
0
399
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
351
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
291
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
252
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
207
1