인증 정보를 담을 전역 상태의 필요성

jwt 토큰 방식으로 작동하는 새 인증 로직을 프론트엔드와 연결하는 과정에서 인증 정보를 어떻게 저장해야 하는지에 대한 문제가 생겼다. 현재 상황은

1. 로그인이 필요한 페이지에 접근할 경우 Next middleware에서 백엔드에 인증 정보 확인
2. 통과되면 해당 페이지를 보여주고 페이지 내에서 유저 정보(프로필 사진 등)가 필요한 경우 추가로 백엔드에 요청

이 과정이 매 요청마다 필요한 것이 비효율적으로 느껴졌다.

원래 React로 구현할 때에는 로그인한 정보를 전역 상태(recoil atom)에 저장해서 라우팅과 렌더링 모두에 사용했는데, SSR로 auth routing을 구현하기 위해서 middleware를 사용했더니, middleware는 react state에 접근할 수 없는 문제가 있었다.

이 비효율을 해결하기 위해 두 가지 방안이 나왔는데,

1. 인증 토큰(쿠키)과 별개로 유저의 public 정보(프로필 이름, 프로필 사진 등)를 전역 상태로 따로 저장
2. middleware를 대체할 다른 방법 찾기

더 좋은 방법이 없을지 각자 찾아보기로 했다.

Next.js 13

위 내용에 대한 회의를 하던 중 Next13의 App directory에 대한 이야기가 나왔다. /pages 디렉토리를 대체할 /app 디렉토리는 상태가 변경되면 해당 상태를 구독하는 컴포넌트만 리렌더링되는 CSR과 비슷한 특징을 가지고 있다. 요약하면 페이지를 레이아웃 단위로 쪼개고, 교체나 리렌더링이 필요한 레이아웃만을 변경하는 식인데 이 것을 사용하면 유저의 public 정보를 가져오기 위해 불필요하게 많은 요청이 발생하는 비효율 문제를 해결할 수 있지 않을까?

하지만 App directory가 현재 실험적(experimental) 기능이라는 점, 그리고 /pages 디렉토리를 통째로 수정하여 변환해야 하는 시간적 비용 문제가 있어 좀 더 신중하게 정해보려고 한다.