회사 프론트엔드가 Next.js 기반이긴 했지만 사실상 pages router로 라우팅을 편하게 관리할 수 있는 리액트 정도로만 사용되고 있었다. 초기 렌더링에 필요한 데이터는 클라이언트 사이드 useEffect 안에서 불러왔기 때문에 렌더링 이후 네트워크 요청이 많고 가독성에도 좋지 않았다. 이런 단점들을 보완하기 위해 Next.js의 getServerSideProps를 사용하면 어떨까 생각이 들어 건의했고, 새로 작성하는 페이지들에 우선적으로 적용해보기로 했다.
getServerSideProps에 쿠키가 전달되지 않는다
새 페이지를 만들고 getServerSideProps(이하 GSSP) 안에서 데이터를 페칭해 props로 내려주도록 했다. 아무 문제 없이 잘 작동해 dev에 배포했는데 에러가 발생했다. 디버깅 하면서 GSSP에 쿠키 전달이 안되는게 이유였다는 것을 알게 되었다. API 요청을 보내면 request header의 쿠키 속 토큰을 확인하고 유효하면 이후 작업을 처리하는 프로세스였다. 그런데 어떤 이유로 GSSP에 props로 전달되는 context.request에는 쿠키가 아예 전달되지 않았다.
몇 가지 의문이 생겼는데, 처음으로 든 의문은 기존 프론트엔드에서는 어차피 알아서 request에 담겨 가기 때문에 신경 쓸 필요도 없고 써서도 안되는 쿠키가 GSSP에서는 왜 도중에 사라지냐는 것이었다. 리서치해보니 내가 GSSP에 대한 이해가 조금 부족했었다는걸 알게 되었다. 기존에는 페이지에 접속하면 브라우저는 api 서버에 직접 해당 페이지의 HTML 요청을 보냈다. 쿠키는 api 서버가 응답을 보낼 때 담겨서 오고, 이후 클라이언트에서 다른 요청을 보내면 그대로 담겨 가기 때문에 유실될 일이 없었다.
그런데 GSSP 즉, Server Side Rendering을 사용하면서 얘기는 달라진다. 어떤 페이지에 접속하면 브라우저는 api 서버에 HTML 요청을 보내지만, 이후에 GSSP 안의 코드를 실행할 때는 Next.js가 띄운 서버 안에서 코드가 실행된다. 이 서버는 api 서버와 별개로 Next.js가 띄운 서버다. 즉, api 서버와 프론트엔드 서버의 어떤 설정 차이 때문에 api 서버가 설정한 쿠키를 GSSP에서 받을 수 없는 것이었다.
왜 로컬에서는 쿠키 전달이 될까?
또 하나의 의문은 왜 로컬에서는 되는가였다. api 엔드포인트를 local에서 dev로 바꿔보니 로컬에서도 안되는 걸 발견했다. 차이는 api 서버의 도메인이었다. 로컬일 때는 localhost이고, devapi.회사도메인.com이었는데 이 때문이었다. 백엔드에서 쿠키를 설정하는 코드를 살펴보니 따로 domain 설정을 하지 않았다. 리서치해보니 domain 설정을 하지 않고 쿠키를 설정하면 자동으로 해당 api 서버의 도메인으로 쿠키 도메인이 설정되는 것이었다.
도메인이 같을 때만 쿠키 공유가 가능하기 때문에 프론트, 서버 모두 localhost였을 때는 도메인이 같았으므로 GSSP에 도메인 전달이 됐던 것이다. 반면, 배포 사이트에서는 프론트 도메인이 dev.회사도메인.com이고 서버 도메인이 devapi.회사도메인.com이었기 때문에 도메인(정확히는 서브 도메인)이 달라 쿠키 공유가 되지 않았던 것이다.
해결책
그러면 프론트 배포 도메인과 서버 배포 도메인은 다른 것일까? 정확히는 둘은 서브 도메인은 다르지만 도메인 자체는 회사도메인.com으로 같다. 자 이제 서버에서 domain만 회사도메인.com으로 설정해서 내려주면 될 것이라는 가설이 세워졌다. 쿠키 설정 부분에 도메인을 설정하고 로컬 서버에서 확인해보니 예전과는 다르게 개발자 도구 네트워크 탭 쿠키 영역에 도메인이 .회사도메인.com으로 잘 찍혀나왔다. PR 승인을 받고 배포된 걸 확인해보니 에러 없이 잘 된다! 성공!
...인 줄 알았으나 아직 난관은 남아있었다. 배포된 서비스에는 문제가 없었는데 쿠키에 도메인을 설정하니 로컬 환경에서 개발할 때가 문제였다. 로컬 서버를 띄우고 개발할 때 쿠키에 설정된 도메인과 api 서버의 도메인(localhost)이 달라 쿠키 때문에 대부분의 api 요청에서 unauthorized 에러가 발생했다.
이 문제를 해결하기 위해 여러 방법을 찾아봤으나 현재 회사의 상황에서 완벽한 해결책을 찾을 순 없었다. 로그인 서버를 따로 두는 것 같이 공수가 많이 드는 방법을 사용할 수는 없었기 때문에 로컬 환경에서 로그인할 때 토큰을 쿠키에 담아 브라우저에 수동으로 설정해주기로 했다. 쿠키의 도메인을 따로 설정해주지 않으면 자동으로 localhost가 되기 때문에 일시적으로 쿠키를 주고받을 수 있게 된다(이때 쿠키에 expires 설정을 하지 않으면 세션 쿠키가 돼 브라우저를 닫으면 휘발되어 버린다.)
어떻게 보면 별 거 아닐 수도 있는데 이렇게 포스트로 올리는 이유는 나에게 필요했던 정보였기 때문이다. 아무리 인터넷을 뒤지고 GPT에게 물어봐도 도대체 왜 GSSP에서만 쿠키가 사라지는지 도통 알 수가 없는 사람은 이 가능성을 한번 생각해보시길. 쿠키의 도메인 설정이 문제일 수도 있습니다!