SSR 에서 Token 관리하기

개요

• API 서비스는 클라이언트와 완전히 분리되어 있음
• API 서버의 인증 방식
  - API 요청 할 때, Access Token을 Header에 포함
  • Access Token이 만료된 경우 Refresh Token을 이용해 Access Token을 재발급
  • POST /auth/login
    • username, password를 넘겨주면, Access Token, Refresh Token을 반환함
  • POST /auth/refresh
    • Refresh Token을 넘겨주면, 새로운 Access Token과 Refresh Token을 반환함
  • GET /me
    - Access Token을 읽고 DB에서 내 정보를 가져옴
    

SSR은 무엇일까..

전통적인 Web Framework

• 기존의 전통적인 Web Framework에서는 서버에서 HTML 문서를 작성함

• 더 향상된 사용자 경험을 위해 Angular, Vue, React.js 등을 사용해서 클라이언트에서 HTML 문서를 조작하는 JavaScript Framework들이 등장

• 하지만 SEO(검색엔진 최적화), 초기 렌더링 시간 단축 등의 목적으로 서버에서 HTML 문서를 만들어야 할 필요가 생김

• 따라서 해당 문제를 해결하기 위해 서버에서 첫번째 HTML을 그리지만, 다음 렌더링부터는 클라이언트에서 이어나가는 방식을 SSR이라고 부름

간단 용어 소개

• Hydration
  - Hydration은 React.js, Vue.js 등의 Client-side Framework가 서버에서 전송한 정적 문서를 데이터 변경에 반응할 수 있는 동적 형태로 변환하는 클라이언트 측 프로세스를 말합니다.

• Isomorphic JavaScript
  - SSR 과정 중 한 JavaScript 코드가 Node.js와 Browser 환경 모두에서 동작하게 되는데, 이렇게 두 환경에서 동작할 수 있는 JavaScript 코드를 Isomorphic JavaScript라고 합니다.
  

• Store Hydration
  - Redux 같은 전역 상태 관리 Store를 Hydration 시켜는 것을 말한다.
  

인증 시나리오

• API로 Data Fetch를 할 때 Access Token이 필요

• SSR 서버 내의 Proxy를 만들어서 사용

  	- 서버에 저장된 Access Tokend으로 인증 가능
  
  	- 매 요청 시, SSR 서버를 거쳐야 하기 때문에 서버에 부하가 생김

  • 서버 내에 Proxy를 만들어 사용한다면 브라우저 내에 Refresh Token이 저장되어있지 않아도 Token을 새로고침 가능
  • Refresh Token으로 Token 재요청시에만 사용 시, 간헐적으로 요청하므로 서버에 부하가 적음

• Refresh Token은 서버에만 저장해서 브라우저 단에서 접근 불가능하게 관리

• 토큰 저장에 대한 좋은 방식

  	- Session 방식을 채택해서 Session에 저장된 Access Token을 Store Hydration을 통해 브라우저 환경에 주입해서 사용하고 Refresh Token은 서버 내 Proxy로 구현

참고
(AWS) SSR 앱 개발 및 배포하기 - https://youtu.be/Lh5CrFJQSz4?si=5F_blZIsuhN8NqFR