인프런 커뮤니티 질문&답변

작성한 질문수

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

SSR시 쿠키 공유하기

server side rendering 시 END 에 관한 질문

작성

·

271

0

[getServerSideProps - 코드]

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();
});

로그인 페이지에서 로그인 시 성공적으로 홈으로(index.js) 이동하게 됩니다.

1. front server에 console을 확인하면

REQUEST 후 SUCCESS까지 잘 받아옵니다.

[Front: Application - Cookies]

[API Server: Application - Cookies]

2. 페이지를 새로고침 시 로그인이 풀리는 문제 발생

SSR을 통해 다시 REQUEST 후 다음으로 넘어가질 못합니다.

[Front: Application - Cookies]

[API Server: Application - Cookies]

axios 통해 header에 동일한 Cookie를 담아 잘 넘길텐데

request 후 success까지 넘지길 못하고

user state me에 user 정보를 왜 담아오지 못하는지 원인을
파악하지 못했습니다.

END를 통해 요청과 응답까지 기다려주는 것으로 알고있는데
왜 기다리질 못하고 끝나버리는지 궁금합니다.

계속해서 구글링과 흐름을 파악하고 console을 살피는데도
문제해결에 어려움을 겪고있습니다.. 도와주시면 감사하겠습니다

Next.js react redux nodejs express

퀴즈

클라이언트사이드 렌더링(CSR)과 비교했을 때, 서버사이드 렌더링(SSR)의 주된 장점은 무엇일까요?

개발 복잡성 감소

초기 로딩 속도 개선 및 빠른 콘텐츠 표시

실시간 데이터 업데이트 용이

브라우저 호환성 문제 없음

답변 2

1

제로초(조현영)

지식공유자

https://github.com/ko7452/e-Library/blob/master/prepare/front/store/configureStore.js#L10

여기 이 부분 configureStore 안에 넣으셔야 합니다.

https://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/store/configureStore.js#L15

0

제로초(조현영)

지식공유자

흐, 저거 진짜 예전에 저도 겪은 현상이긴한데 어떻게 해결했는지 기억이 안 나네요. 혹시 index 말고 다른 페이지 가서도 해보시겠어요?

작성한 질문수