next14의 next/headers의 cookies를 이용한 쿠키설정

Question

안녕하세요 현재 데이터시각화 사이트 프로젝트를 진행중입니다.
next14와 spring boot(리소스와 인증.인가)를 사용하고 있고, 카카오 소셜로그인을 하면 스프링서버에서 jwt(access 토큰)를 발급해주고 refresh 토큰은 redis를 통해 관리되고 있습니다.
받아온 토큰은 cookie를 통해 관리하고 있습니다.
seo를 위해 ssr을 사용하고 있는데, ssr과정에서 데이터를 fetch를 할 때 토큰을 같이 보내고, 만약 액세스 토큰이 만료되고 리프레시 토큰이 살아있다면 응답 헤더에 새로운 액세스토큰을 보내주고 있습니다.
그런데 이때 next/headers의 cookies를 사용하여 쿠키를 세팅하는것이 안됩니다. 
데이터 페치중, 혹은 ssr과정중에는 Cookies can only be modified in a Server Action or Route Handler. 라는 오류가 뜨며 cookie를 set 하거나 delete하는게 안됩니다.
이럴 경우는 어떻게 해야할까요?

상현 · Answer

메세지가 알려주듯이 server action 과 router hanlder 영역 외에서는 next/cookies 모듈은 쿠키를 가공할 수 없습니다. 해당 모듈을 가이드하는 공식 문서에도 적혀있는 내용입니다.

해당 문서에 없는 내용을 더하자면,

1. client component에서 server action을 사용하고 그 안에서 next/cookies 모듈을 사용하면 client component에서는 사용할 수 없다는 메세지를 줄 겁니다.

2. server component에서 fetch한 경우에는 클라이언트 요청 정보를 route handler에서 확인하거나 클라이언트에게 보내는 것이 불가능합니다. 클라이언트(브라우저)가 없는 상황이 전제되기 때문인데요.

이 말은, access token을 refresh token에 기반해 자동 갱신하려는 - credential 인증을 거치지 않는 - 방식이 통하지 않는다는 이야기입니다.

참 아이러니한 일이라고 해야할텐데요. 
next.js가 메인 업데이트를 하면서 이전에는 쉽게 가능했던 것이 현재는 매우 어려워진 게 있는데 그게 jwt 자동 갱신입니다.

app router에서 jwt 프로세스는,

middleware에서 토큰을 리딩,
토큰이 유효하면 페이지 접속, 
토큰이 만료라면 로그인 라우트로 이동 -> 계정 인증 -> 쿠키 재설정

의 전개입니다.

로그인은 클라이언트가 존재하는 상황이기에 이 프로세스가 가능합니다.

ssr 방식을 쓰려 한다면 서버 전용의 토큰이나 계정이 필요합니다. get을 시도할 때 해당 토큰 혹은 계정으로 인증하면 데이터를 가져올 수 있습니다. 그러나 이 방식은 개인화된 정보를 가져올 수 없으므로 사실상 authorization이 필요하지 않는 seo를 위한 컨텐츠나 관리자에서 내부 직원들에게 오픈된 소스에만 적용할 수 있습니다.

아래의 스레드에서 보면 개발 측에서도 이 문제를 알고 있다고는 합니다.

https://www.reddit.com/r/nextjs/comments/18a17qk/im_having_a_hard_time_setting_up_authentication/?rdt=44870

그렇지만 구조적으로 이 문제는 해결되기 쉽지 않습니다. app router는 이것 외에도 렌더링 순서상의 문제가 있어서 credential을 반드시 거치도록 하는 것이 이상적입니다.