SSR(ServerSideRendering) 환경에서 쿠키 넣어주기

#1 들어가기

안녕하세요.

 

오늘은 SSR 환경에서 쿠키를 넣는 것에 대해서 포스트를 써보려고 합니다.

Next.js를 쓰면서 SSR 환경에서는 정말 많은 것들을 더 고려해줘야 하는구나를 많이 느끼는 것 같습니다.

#2 이슈 및 해결

저희는 프로젝트 접근권한과 관련하여 사모 기능을 추가하였습니다.

사모 기능으로서 클라이언트에 프로젝트 접근권한 처리를 서버에서 해주었지만, 서버 환경이기 때문에 쿠키를 알 수가 없습니다.

즉, SSR 환경에서는 쿠키값을 모르기 때문에 따로 설정을 해주어야 합니다.

 

let sessionId;
if (isServer(ctx)) {
  // 서버 환경일 때 쿠키를 심어줌
  const cookie = getCookie(ctx);
  
  // defaults : 모든 axios 요청 시에 쿠키 데이터를 심어줌
  $axios.defaults.headers.Cookie = cookie;
  
  sessionId = cookie.replace(REGEXP_SESSIONID, "$1");
  
  // 배포 시 문제가 생겨, 조건문을 걸어줌
  if (sessionId) {
    $axios.defaults.headers.Cookie = cookie;
  }
  if (!sessionId) {
    redirectLogin(ctx, router);
  }
}

 

그래서 모든 axios 요청 시에 쿠키 데이터를 심어주었습니다.

그러나 이렇게 처리를 하면 SessionId 값이 없어도 접근 가능한 페이지에서 문제가 생기는데요.

SessionId 없이 접근 가능한 페이지에서도 모든 요청에 쿠키 데이터를 넣어줬기 때문에 쿠키값이 없을 땐 undefined가 뜨면서 에러가 나는 것입니다.

 

결국, 조건문으로 SessionId 값이 있을 때만 cookie값을 요청하여 처리를 해주었습니다.

 

이렇게 해서 배포도 잘 되었고, 문제가 없다고 생각했습니다......

그러나 이렇게 조건을 걸어버리면 또 다른 문제가 생기더군요. 바로 SessionId가 없을 때의 처리가 없습니다.

정리하면 세션이 만료됐을 때, 이미 만료된 세션 아이디 값은 바뀌지 않고 계속해서 고정된 값으로 남아 있습니다.

 

세션 아이디 값이 만료됐을 때의 처리도 필요한 것이죠.

그래서 세션 아이디 값이 만료됐을 땐, 초기화를 시켜주고 값이 있을 때만 axios 요청에 쿠키 데이터를 넣어주는 방식으로 해결하였습니다.

 

let sessionId;

if (isServer(ctx)) {
  const cookie = getCookie(ctx);
  
  if (!cookie) return { sessionId: null };
  
  sessionId = cookie.replace(REGEXP_SESSIONID, "$1");
  
  if (sessionId) {
    $axios.defaults.headers.Cookie = cookie;
  } else {
    $axios.defaults.headers.Cookie = null;
  }
  
  if (!sessionId) {
    redirectLogin(ctx, router);
  }
}

#3 정리하기

이렇게 해서 SSR 환경에서 쿠키값을 넣어주면서 생겼던 문제 해결 과정을 정리해보았는데요.

 

다시 한번 제가 놓쳤던 부분들을 정리해보면

 

1. SSR 환경에서의 쿠키값을 넣어주지 않아서 생겼던 에러
2. SessionId 값이 없어도 되는 페이지에서도 쿠키값 요청을 했을 때, 쿠키값이 없으면 나는 에러
3. SessionId 값을 초기화 해주지 않아 만료된 세션 아이디값의 대한 처리가 없어 생겼던 에러

SSR 환경은 어렵기도 하지만 새롭게 깨닫는 부분이 흥미를 돋구는 것 같습니다.

 

제가 생각하지 못한 부분을 고민하면서 계속 생각하다보면 '아 내가 서버 환경인데 이러한 부분을 고려하지 못했구나'라고 생각들 때 그리고 그 생각이 문제 해결로 이어지면 정말 새로운 짜릿함을 느끼는 것 같습니다.

 

이렇게 포스트를 마치도록 하겠습니다.