SSR(ServerSideRendering) 환경에서 쿠키값 처리 이후에..

#1 들어가기

저번 포스트에서 https://kjhg478.tistory.com/34 SSR 환경에서 쿠키값을 넣는 포스트를 작성했었습니다.

쿠키값과 관련한 모든 문제를 해결했다고 생각하고 다시 테스트 및 추가 작업을 하고 있었습니다.

 

그러나 Next.js의 SSR(getServerSideProps) 및 SSG(getStaticProps)로 Date Fetching을 하는 페이지에 세션이 만료된 상태로 접근하게 되면 에러가 나는 것입니다.

https://nextjs.org/docs/basic-features/data-fetching

 

제가 또 어떤 부분을 놓쳤는지 포스트를 해보도록 하겠습니다.

#2 이슈

총, 두 가지 상황에서 에러가 났습니다.

 

1. 세션이 만료되었을 때, SSR 환경인 투자하기 페이지 접근 및 프로젝트 페이지로 갈 때
2. 세션이 만료되었을 때, SSG 환경인 약관페이지 접근

분명히 저는 SessionId 값을 초기화 해주지 않아 만료된 세션 아이디값의 대한 처리가 없어 생겼던 에러에 대한 처리를 했던 터라 순간 에러가 이해되지 않았습니다. 

 

SSR 환경에서 쿠키값의 대한 예외들이 어떤 부분이 있지? 다시 한번 생각해보게 되었습니다.

 

 

SessionId 값이 없는 경우

• 로그인을 하지 않은 사용자
• 로그아웃을 했을 때

 

SessionId 값이 있는 경우

• 로그인을 했을 때
• 로그인을 하고 세션 만료가 됐을 때

 

로그인을 하고 자연스럽게 세션 만료가 됐을 때 이 부분이 되게 중요합니다.

저는 앞서 말했지만 401 에러가 떨어졌을 경우 세션만료 처리를 해주었습니다. 

 

그러나 세션 만료처리는 SSR 환경에서 실행되는 페이지보다 늦게 처리됩니다. 세션이 만료되었을 때, 정상적으로 세션만료 처리가 되고 나서야 쿠키에 있는 SessionId 값이 초기화가 됩니다. 

 

next의 SSR 환경인(SSG 포함) 페이지에서 세션이 만료된다면, 이미 쿠키값을 관리하고 있던 로직에서 만료된 쿠키로 api 요청을 하게 됩니다. 여기서 에러가 나면 페이지를 만들 수 없기 때문에 당연히 페이지도 나오지 않게 됩니다.

 

빌드된 결과물이 json 형태로 관리되고 서버 값이 바뀌면 그 바뀐 값으로 갱신을 해줘야 하는데 에러가 나기 때문에 문제가 되는 것입니다.

 

처음에는 API 서버에서 주는 결과물을 Next에 주면 Next는 항상 그 최신값을 받아 빌드해준다고 생각을 했습니다.

근데 생각해보니 SEO에 걸리려면 빌드된 폴더가 가지고 있고, API 서버에서 받아온 데이터와 비교해 동기화 해주는 과정이 있지 않을까? 생각하게 되었고 Next 폴더와 Next Docs를 봤습니다.

 

Next는 getStaticProps는 html과 json 형태로 변환하고 getServerSideProps는 실행결과를 JSON 반환을 통해 페이지를 렌더링 해줍니다. 

 

getStaticProps (next.js Docs)

getServerSideProps (next.js Docs)

#3 해결 과정

 

처음에는 해결하기 위해서 두 가지 방법을 떠올렸습니다. 

 

1. 세션 만료가 됐을 때, 서버에게 알려 다시 세션 아이디를 받기 (API 작업 필요함)
2. SSR 환경에서 세션 만료 처리 로직을 타게 하기

SSR 환경에서 세션이 만료됐다는 것을 어떻게 알게 할까?가 주된 고민이였습니다.

1번은 API 작업이 별도로 들어가기에 일단 제쳐두고 2번 작업으로 해결하려고 했습니다.

next에 getServerSideProps를 타면서 API 오류가 나기 때문에 try catch 중 catch에서 에러 코드를 받아 작업을 하거나, 세션 만료 처리 로직을 타게 하려고 시도하였습니다.

 

결과적으로 실패했습니다.

next 서버가 있고, api 서버가 있는 상태에서 세션 만료 처리 로직은 axios의 interceptor로 처리를 해주었는데 실제 next에서 getServerSideProps를 타면서 에러가 나면 api서버에서 주는 Error Status Code를 동일하게 받을 수 없었습니다.

 

계속 삽집을 하면서 생각해보니, 토큰이였을 때 invalid_token에러가 났던 것처럼 처음에는 무조건 세션 만료처리를 하는 것이 좋지 않나라는 생각이 있었습니다. 

 

그러나 SSR 환경에서의 페이지들은 로그인 하지 않은 회원도 접근이 가능하기 때문에 세션 아이디 권한이 필요없었습니다.

 

그러면 페이지의 Router 설정을 추가적으로 해주어 권한이 필요한 페이지(CSR)만 세션 만료처리를 하면 되지 않을까? 이렇게 헤더의 쿠키를 null로 만들어주어 접근이 가능하게끔 작업을 해주었습니다. (약간 다르지만 토큰이였을 때랑 비슷하게 처리가 됐네요.)

 

    if (AUTH_SSR_PATH.includes(path)) { // SSR 페이지 설정
      $axios.defaults.headers.Cookie = null;
      return;
    }

 

결론 도출까지 정말 많은 생각을 했지만 처리 자체는 간단한 처리로 해결을 할 수 있었습니다.

SSR 환경을 접하면서 정말 다양한 문제들이 발생되고 생각해야 되는 부분들이 어렵기도 하지만 한편으론 재밌기도 합니다.

 

해결은 했지만 이렇게 처리를 하는 것이 올바른 방법인지 저 결론의 도출 과정들이 맞는 방향성인지 앞으로도 지속적인 테스트와 검증을 통해 생각해봐야할 것 같습니다.