Next.js - SSR: cookie 넣어주기

서버사이드렌더링을 하지 않고 클라이언트에서 유저 관련된 요청을 보낼 때는 브라우저가 쿠키를 같이 동봉하여 요청을 하므로 따로 쿠키를 동봉하는 작업을 하지 않아도 된다.

front/sagas/user.js

function loadUserAPI(userId) {
  // 서버에 요청을 보내는 부분
  return axios.get(userId ? `/user/${userId}` : '/user/', {
    withCredentials: true, // 클라이언트에서 요청 보낼 때는 브라우저가 쿠키를 같이 동봉
  }); // 서버사이드렌더링일 때는, 브라우저가 없음 -> 따라서 개발자가 직접 쿠키를 넣어서 서버에 요청하여야 함
}

하지만 SSR일 때는 브라우저가 따로 없으므로 개발자가 직접 쿠키를 넣어서 요청을 하여야 한다.

front/pages/_app.js

NodeBird.getInitialProps = async context => {
  const { ctx, Component } = context; // next에서 넣어주는 context
  let pageProps = {};
  const state = ctx.store.getState(); // state 불러오기
  const cookie = ctx.isServer ? ctx.req.headers.cookie : '';
  // SSR 환경일 때만 서버사이드에서 쿠키를 넣어주고, 클라이언트 환경일 때는 넣지 않음
  // 클라이언트 환경 - ctx.req.headers.cookie = undefined
  if (ctx.isServer && cookie) { 
    // 서버 환경일 때만 쿠키를 심어줌. 클라이언트 환경일 때는 브라우저가 자동으로 쿠키를 넣어줌
    Axios.defaults.headers.Cookie = cookie;
    // defaluts: 모든 axios 요청 시에 쿠키 데이터를 심어줌.
  }
  if (!state.user.me) { // 유저 정보 요청
    ctx.store.dispatch({
      type: LOAD_USER_REQUEST,
    });
  }
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps };
  
};

export default withRedux(makeStore)(withReduxSaga(NodeBird));

Next.js에서 context에 ctx와 Component를 넣어준다.

ctx 객체

ctx 객체:  {
  req: IncomingMessage {
    headers: {
      host: 'localhost:3060',
		...
      cookie: 'rnbshj=s%3ADfyDi3z0vb-bwYT4ZMmSuG9PHGIB1kHF.CH%2By7X1M2xDBs5u%2FgPJjq28fL9LDJYGZFP9qSpEMuRc'
    }, // <= ctx.req.headers.cookie 에 들어 있는 쿠키 값
    
      ...
      
  store: {
    dispatch: [Function],
    subscribe: [Function: subscribe],
    getState: [Function: getState],
    replaceReducer: [Function: replaceReducer],
    sagaTask: {
      '@@redux-saga/TASK': true,
      id: 16775,
      meta: [Object],
      isRoot: true,
      context: {},
      joiners: [],
      queue: [Object],
      cancel: [Function: cancel],
      cont: [Function: noop],
      end: [Function: end],
      setContext: [Function: setContext],
      toPromise: [Function: toPromise],
      isRunning: [Function: isRunning],
      isCancelled: [Function: isCancelled],
      isAborted: [Function: isAborted],
      result: [Function: result],
      error: [Function: error]
    },
    [Symbol(observable)]: [Function: observable]
  },
  isServer: true // <= 서버 환경인지 확인
}