nextjs 에서 서버 컴포넌트 내 쿠키 설정 안될 때

nextjs 에서 앱라우트 사용자의 경우 서버 컴포넌트에서 쿠키 설정이 되지 않습니다.

아니 더 정확하게는 안되는 줄 몰랐습니다 .

최초, 클라이언트에서 요청 > 서버에서 쿠키 저장은 잘되는 반면

서버에서 요청 > 서버에서 쿠키에 저장되지 않더라구요

GPT랑도 싸우고 / 딥시크랑도 싸우고 / 클로드랑도 싸워봤지만 "결국 같은 소리"만 해대서

구글 검색 결과로 내용을 확보 하여 공유하고자 합니다.

각종 라이브러리는 물론 기본 쿠키 기능을 활용해도 뭔짓을 해도 안되던데 이유가 있었더라구요

(하단 링크 본문 내용 중)

"Page Router의 경우엔 응답을 스트리밍하지 않기 때문에 렌더링 중에 발견된 헤더를 응답 본문 전송 전에 설정할수 있습니다.
그러나 App Router는 React의 서버 사이드 렌더링(SSR)과 React 서버 컴포넌트(RSC)를 위해 스트리밍을 사용합니다.
HTTP 응답에서 헤더는 항상 응답 본문(body)보다 먼저 전송이되어야 합니다.
스트리밍 환경에서는 응답 본문이 서버에서 렌더링되는 즉시 클라이언트로 전송이 됩니다.
따라서 스트리밍 도중에 컴포넌트가 헤더를 설정하려 하면, 이미 본문 일부가 전송된 후일 수 있기 때문에 쿠키 세팅이 어렵습니다.
해결 방법으로는 Middleware에서 헤더를 설정하는 것을 권장하고 있습니다.
관련글입니다."

그래서 미들웨어로 설정해야 하는데 관련 정보 링크는 아래와 같습니다.

https://ianlog.me/blog/2024/server-component-cookie

저 처럼 AI 와 싸우지 않길 바라는 마음에 공유 드립니다.