ssr 처리할 경우 back-end 에서 401 error 이유

nextjs에서 server side 에서 처리 할 경우 cookie가 늦게 전달 되는 현상이 있음, 그래서 req.user 값이 undefined 로 잡혀 back-end에서 401 처리하여 값이 돌아오는데, 이유를 찾아보니 axios intercepter에 걸려 바로 error 처리를 해버리고 있음, ssr의 어려움이 생김

시행 착오

• nextjs server 단에서 쿠키를 읽어 처리 해보려고 했음 근데 전혀 httpOnly 여서 인지 읽히지 않고 있음
• headers에 저장해서 사용해보려는 시도, gpt를 사용해서 ssr관련한 기능들을 검색해 찾아봄 현재 next 14버전에서는 지원 안하는 기능들을 추천 해줌, 시도해보다가 포기(쿠키도 동일)

해결법

일단 위에 headers을 사용하여 middleware에서 토큰이 있을 때 headers에 값을 저장, 없을 경우는 headers에서 삭제, axios를 통해 백엔드 통신을 할때 headers에 cookie를 심어 보내는 방식으로 처리,

ssr처리 할 부분은 밑에 코드를 참고해서 사용해주세요

// ssr page
import { headers } from 'next/headers';
import MoverBasicInfoEditClient from './(client)/moverEdit';
import { moverInfoApi } from '@/services/moverEdit';
import Loading from '@/app/loading';

export default async function Page() {
  const headersList = headers();
  const ssrToken = headersList.get(process.env.NEXT_PUBLIC_SSR!);
  let value = null;

  if (ssrToken) {
    value = await moverInfoApi(ssrToken);
    return <MoverBasicInfoEditClient defaultValues={value?.data} />;
  } else return <Loading loading={!!ssrToken} />;
}

// api 
export async function moverInfoApi(cookie?: string) {
  try {
    const res = await axiosInstance.get('/users/mover/basicinfo', {
      headers: { Cookie: cookie },
    });
    return await res.data;
  } catch (err) {
    console.error('Error fetching mover info:', err);
    return Promise.resolve(null);
  }
}

위와 같이 처리 시 정상적으로 값을 가져오는 것을 확인할 수 있습니다.

ssrToken은 accessToken 이 없으면 지워지도록 설정 했습니다. 테스트 해보고 싶으시면 밑에 코드 주석 치시고 테스트 해보시면 될거 같습니다.

// middleware.ts  <- src 폴더 바로 밑에 있어요
if (process.env.NODE_ENV === 'development') return res;  // 제 기준 37번줄

AccessToken 이 재발급 될 때 로딩 되는 ui를 구현