Next.js ssr 토큰과 함께 요청 보내기

개요

Next.js 와 React-Query를 사용해 ssr을 적용하고 있었다 그렇게 요청을 보냈다.
그러자 토큰이 담기지 않아 아래 사진과 같은 에러가 발생하게 되었다.

발생 원인

SSR의 경우 서버단에서 먼저 렌더링을 거치기에
customAxios를 사용하고 있는 필자의 경우

const axiosRequestConfig: AxiosRequestConfig = {
  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
  headers: {
    [REQUEST_TOKEN_KEY]: `Bearer ${Token.getToken(ACCESS_TOKEN_KEY)}`,
  },
};

header에 토큰이 안담겨 Bearer undefined가 발생하는 것이였다.

해결 방법

문제의 원인을 확인하고 해결하기 위해 서칭을 하던 도중 교차 컴포넌트(HOC)에 대해서 알게되었다.

공식문서를 읽어보면 아래와 같이 이야기한다.

고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다.
구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다.

HOC를 이해하고 나니
서버사이드렌더링 이전에 토큰을 검사하여 getServerSideProps를 반환하면 문제를 해결 할 수 있겠다고 생각해
쿠키에 토큰이 담겨있지 않다면 로그인 페이지로 리다이렉트 시키고 있다면 토큰을 customAxios를 헤더에 저장하는 함수를 만들어 헤더에 토큰을 저장후 getServerSideProps를 return시켜 ssr과 함께 사용 할 수 있었습니다.