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

[리뉴얼] React로 NodeBird SNS 만들기

SSR시 쿠키 공유하기

작성

655

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)

react express redux nodejs Next.js

답변 7

Ko Yun Hyuk

질문자

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

Ko Yun Hyuk

질문자

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

Ko Yun Hyuk

질문자

처음에는 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 입니다..

제로초(조현영)

지식공유자

3,4 말고 1,2에도 me가 비어있나요?

Ko Yun Hyuk

질문자

감사합니다!!

Ko Yun Hyuk

질문자

백엔드로 전달이 안되는 문제라면 프론트 서버에서 문제가 있다는 말씀이신데... 구글링을 해봐도 코드에 무슨 문제가 있는지 잘 파악이 되지 않습니다 ㅠ

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');
...
});
 