Next.js에서 클라이언트 컴포넌트와 서버 컴포넌트의 axios interceptor 동기화

Question

안녕하세요 Next.js 13버전 page router방식으로 개발중입니다.
클라이언트 컴포넌트와 서버 컴포넌트에서의 통신을 위해 각각 axios interceptor를 구현했습니다. 각각 store와 cookie에서 accesstoken값을 헤더에 넣어주는 역할을 하고 있는데 문제가 되는 부분은 토큰 만료 이후 갱신하는 부분입니다. interceptor가 두개이다보니 처음에는 서로 동일한 토큰응 가지고 있지만, 만약 클라이언트 컴포넌트에서 요청시 토큰이 만료되면 갱신하는 요청을 보내고, 서버 컴포넌트에서 요청시 만료되면 갱신하기 때문에 서로 일치하지 않는, 유효한 토큰이 두개가 되는 상황입니다.
현재 서버에서는 유효한 토큰이 하나만 존재하도록 설계를 해놓진 않아서 작동하는데 문제는 없지만 많이 찝찝하네요.
혹시 좋은 방안이 있을까요? 혹은 비슷하게 구현하신 분들의 상황을 공유 받을 수 있을까요?

이정윤 · Accepted Answer

저는 이렇게 풀었어요

서버 컴포넌트에서 요청 시 엑세스 토큰이 만료가 됐다는 응답(401 등)을 받으면 /auth/refresh?redirect=[원래 요청하려던 url] 로 리다이렉트 시켜서
클라이언트측의 토큰을 리프레시 하고 다시 원래 요청하려던 페이지로 돌아가게 했습니다.

이게 정답인지는 모르겠는데 저는 MVP 단계라.. 나중에 더 좋은 방법 찾으면 바꾸려고 해요.

백승훈 · Answer

안녕하세요 답변 드립니다 😏

먼저 클라이언트 / 서버 를 나눈 이유에 대해서 궁금한 점이 생기내요 특히 page 방식의 경우 CSR로 거의 구성됬을 것 같은데 굳이 서버를 통해야 될 이유가 있을까요?

꼭 서버를 통해야 한다면 굳이 클라이언트에서 백엔드와 직접 통신을 하지않고 모든 통신을 서버 컴포넌트를 경유하면 인터셉터가 하나로 유지될 것 같은데 먼저 클라이언트와 서버를 나눠서 각각 통신해야되는 이유부터 생각해보시는게 맞을 듯 합니다.

혹은 어쩔수 없이 두개를 유지해야 한다면 인증/인가와 토큰에 관련된 부분은 모두 서버 컴포넌트에 위임하고 클라이언트에서 어떠한 통신을 요청시 체크 및 관리를 서버 컴포넌트에서 일괄로 하시면 될 것 같습니다.

웹앱 - 백엔드
웹앱 - 서버리스(Next/api) - 백엔드

지금 이렇게 구성한 상태에서 두개의 통신이 왜 각각 따로 해야할 지에 대해서 조금 생각해보시고 꼭 Next/api의 서버리스를 쓰셔야 되는 이유가 있다면

웹앱 - 백엔드 라인을 전부 웹앱 - 서버리스 - 백엔드로 옴기고 서버에서 서버리스쪽에서 관리를 하는게 통일성이 더 좋을 듯 합니다.