새로고침 시 hydrate 상태 초기화 문제 질문 있습니다.

Question

import { END } from 'redux-saga' ; import axios from 'axios' ; import { wrapper } from '../store/configureStore' ; . . (중간 코드 생략) . . export const getServerSideProps = wrapper . getServerSideProps (( store ) => async ({ req }) => { console . log ( 'getServerSideProps req: ' , req ); const cookie = req ? req . headers . cookie : '' ; axios . defaults . headers . Cookie = '' ; if ( req && cookie ) { axios . defaults . headers . Cookie = cookie ; } store . dispatch ({ type : LOAD_MY_INFO_REQUEST , }); store . dispatch ( END ); await store . sagaTask . toPromise (); }); 처음에 로그인 시 cookie 도 잘 받아오며 SSR도 잘 동작합니다. @@INIT state는 초기값이고 hydrate를 통해 이후 state를 보면 로그인 정보도 잘 담겨 있습니다. 그런데 새로고침 시 hydrate 을 보면 state가 초기화가 되어있고 me 의 정보에 로그인된 user의 정보가 담겨있지 않습니다. cookie는 잘 가지고 있다고 나와 있는데 무엇이 문제인지 ㅍ파악이 되지 않습니다. 흐름을 봐도 문제가 없는 것 같은데.. 해결을 위해 힌트를 얻을 수 있는 방법이 있을까요? 제가 확인해봐야 할 것이 무엇인지 알고 싶습니다. 1. 로그인 전 2. 로그인 후 3. 로그인 후 새로고침 시 4. cookie 보유 여부 (브라우저 localhost: 3000)

Ko Yun Hyuk · Answer

2는 뭐죠..? 2가 없는데...

Ko Yun Hyuk · Answer

1은 비어있고 2는 없습니다;;

Ko Yun Hyuk · Answer

처음에는 request 요청이 가면 success 까지 잘 받아오는데 새로고침을 하면 request만 가고 이후 success에 대한 응답이 없습니다. req.header에 cookie는 잘 담겨 있고 요청에 따라 cookie 변수에도 잘 담겨있는걸 확인했습니다. 그런데 이후 request 만 가고 success에 대한 응답이 없고 null 값입니다. redux-saga에서 요청하고 sucess까지 받아오는데 기다리지를 못하는 것 같습니다. 그런데 코드에는 아무리 봐도 이상이 없습니다... 구글링을 통해 다른 코드를 참고하여 살펴봐도 여전히 문제점을 발견하지 못하고 있습니다ㅠㅠ import { END } from 'redux-saga' ; import { wrapper } from '../store/configureStore' ; import axios from 'axios' ; . . . export const getServerSideProps = wrapper . getServerSideProps (( store ) => async ({ req , res , ... ets }) => { console . log ( 'getServerSideProps req.headers: ' , req . headers ); const cookie = req ? req . headers . cookie : '' ; console . log ( 'cookie: ' , cookie ); axios . defaults . headers . Cookie = '' ; // 서버에서 다른 사람과 cookie가 공유되는 문제를 방지하고자 초기화를 해준다. if ( req && cookie ) { axios . defaults . headers . Cookie = cookie ; // 서버에서 요청일때랑 cookie가 있으면 설정한 cookie를 넣어준다. console . log ( 'axios.defaults.headers.Cookie: ' , axios . defaults . headers . Cookie ); } store . dispatch ({ type : LOAD_MY_INFO_REQUEST , }); store . dispatch ( END ); await store . sagaTask . toPromise (); // reducers/index.js import { combineReducers } from 'redux' ; // 여러 리듀서들을 하나로 합쳐준다. import { HYDRATE } from 'next-redux-wrapper' ; import user from './user' ; import post from './post' ; // HYDRATE가 동작할 때 initStates들이 index user post 자체를 덮어씌울 수 있도록 구조를 작성 const rootReducer = ( state , action ) => { switch ( action . type ) { case HYDRATE : console . log ( 'HYDRATE' , action ); return action . payload ; default : { const combineReducer = combineReducers ({ user , post , }); return combineReducer ( state , action ); } } }; export default rootReducer ; 참고: https://github.com/ko7452/e-Library 제 github 입니다..

Ko Yun Hyuk · Answer

감사합니다!!

Ko Yun Hyuk · Answer

백엔드로 전달이 안되는 문제라면 프론트 서버에서 문제가 있다는 말씀이신데... 구글링을 해봐도 코드에 무슨 문제가 있는지 잘 파악이 되지 않습니다 ㅠ import { END } from 'redux-saga' ; import { wrapper } from '../store/configureStore' ; import axios from 'axios' ; . . . // getServerSideProps: 브라우저는 개입 못함, 순전히 Front Server에서 실해됨 export const getServerSideProps = wrapper . getServerSideProps (( store ) => async ({ req }) => { console . log ( 'getServerSideProps req: ' , req ); const cookie = req ? req . headers . cookie : '' ; axios . defaults . headers . Cookie = '' ; // 서버에서 다른 사람과 cookie가 공유되는 문제를 방지하고자 초기화를 해준다. if ( req && cookie ) { axios . defaults . headers . Cookie = cookie ; // 서버에서 요청일때랑 cookie가 있으면 설정한 cookie를 넣어준다. } store . dispatch ({ type : LOAD_MY_INFO_REQUEST , }); store . dispatch ( END ); await store . sagaTask . toPromise (); }); 아니면 하나의 액션만 실행되고 그 다음으로 넘어가지 못해서 redux-saga에서 요청에 대해 결과를 기다리지 못하는 걸까요? 그리고 SSR 시 찍었던 console.log에 반응이 없습니다;;; export const getServerSideProps = wrapper . getServerSideProps (( store ) => async ({ req , res , ... etc }) => { console . log ( 'start' ); ... });

Ko Yun Hyuk · Answer

첫 로그인 시 req user에 정보가 잘 담겨 있습니다. 이후 정보는 계속 잘 담겨 있는데 브라우저에서 새로고침하면 정보는 그대로 있는데 요청에 대한 반응이 없습니다.

제로초(조현영) · Answer

지금 상황이 전형적으로 쿠키가 백엔드로 전달이 안 되는 문제인데요. 백엔드에서 req.user console.log찍어보셔야 합니다.