인프런 커뮤니티 질문&답변
작성한 질문수
serverComponent=false일 때 쿠키 세팅을 하는 이유?
해결된 질문
작성
·
64
·
수정됨
답변 2
0
안녕하세요.!
next.js에서 serverComponent는 서버에서 동작하나 쿠키를 조작은 불가능합니다. 그래서 방어책으로 해당 로직이 들어간거죠.
현재 프로젝트에서는 createServerSideClientRSC, createServerSideMiddleware 사용하지 않더라도 나중에 헷갈릴 수 있는 부분이여서 미리 정의를 했습니다.
서버컴포넌트에서 쿠키를 조작하면 next.js에서 애러를 던져줍니다. 프레임워크단에서 막아두었어요.
+GPT 답변
안녕하세요! 질문 주신 내용을 각각 정리해서 설명드릴게요. 주제는 모두 Supabase와 Next.js에서 서버 컴포넌트(Server Components), 쿠키 조작, 그리고 createServerSideClient 함수 관련입니다.
🔹 1.
createServerSideClient
에서
serverComponent = false
일 때 쿠키 세팅을 하는 이유
serverComponent = false는 보통 Middleware나 Server Actions가 아닌 곳에서 서버 컴포넌트를 사용하는 경우를 뜻합니다. 이 때 쿠키를 세팅하는 이유는 다음과 같습니다:
👉 Supabase Auth 관련 쿠키(
sb-access-token
,
sb-refresh-token
)를 response header에 세팅
Supabase의 세션 기반 인증은 쿠키를 통해 access token을 관리합니다.
createServerSideClient는 Supabase 클라이언트를 만들고, 이 과정에서 인증 정보를 포함하는 쿠키를 response에 추가로 세팅합니다.
serverComponent = false인 경우, response 객체에 접근할 수 있기 때문에 세션 갱신(refresh)이 필요한 경우 쿠키를 갱신할 수 있습니다.
📌 정리:
로그인/로그아웃 외에도 세션이 만료되었을 때 자동으로 갱신(refresh)하는 과정에서 쿠키 갱신이 필요합니다.
이 쿠키는 클라이언트 측에서 useSession이나 supabase.auth.getSession()으로 유저 정보를 불러올 때 사용됩니다.
🔹 2.
createServerSideClientRSC
,
createServerSideMiddleware
함수는 왜 정의되어 있지만 사용되지 않나요?
이 함수들은 상황에 따라 사용할 수 있도록 미리 정의되어 있는 경우가 많습니다.
💡 의미:
createServerSideClientRSC: 서버 컴포넌트 전용으로 만든 클라이언트 생성 함수 (응답 쿠키 조작 불가능)
createServerSideMiddleware: Next.js Middleware 환경에서 사용할 Supabase 클라이언트 생성용 함수
직접 쓰지 않더라도 필요할 수 있는 구조이기 때문에, 공통적인 클라이언트 생성 로직을 모듈화해둔 형태로 보면 됩니다.
🔹 3. 서버 컴포넌트에서 쿠키를 조작하면 어떤 오류가 발생하나요?
Next.js의 서버 컴포넌트(Server Components)에서는 다음과 같은 제한이 있습니다:
❌ 쿠키 조작 불가능
set-cookie 같은 헤더를 조작할 수 없습니다.
따라서 Supabase 세션이 갱신되더라도 Set-Cookie를 응답에 추가할 수 없어 세션 갱신이 브라우저에 반영되지 않습니다.
🔥 대표적인 오류/문제:
로그인을 했는데도 클라이언트 측에서 인증 상태가 유지되지 않음
새로고침 시 로그아웃된 것처럼 보임
Supabase 클라이언트가 null 세션을 반환함
✅ 결론
구분
설명
serverComponent=false에서 쿠키 세팅
세션 갱신 시 브라우저에 쿠키를 반영하기 위함
쿠키 사용처
로그인/로그아웃, 자동 세션 갱신 등 클라이언트 인증 상태 유지
createServerSideClientRSC, createServerSideMiddleware
상황에 따라 쓸 수 있도록 정의되어 있음 (모듈화 목적)
서버 컴포넌트에서 쿠키 조작 불가 이유
Next.js Server Component는 응답 헤더를 직접 조작할 수 없음
필요하시면 예시 코드나 구체적인 사용 케이스도 함께 도와드릴게요!
0
안녕하세요, 인프런 AI 인턴입니다. 웰시코기님.
Supabase와 Next.js를 함께 사용하실 때, createServerSideClient 함수에서 serverComponent=false로 설정될 경우, 클라이언트 쪽에서 동작하는 경우를 가정하게 됩니다. 이때 쿠키는 사용자 인증에 중요한 방식으로 활용됩니다.
쿠키 세팅의 이유
세션 관리 및 인증: 서버가 아닌 브라우저에서 실행될 때 쿠키는 사용자의 인증 상태를 유지하는 데 활용됩니다. 특히, SSR(서버 측 렌더링) 환경에서는
serverComponent=true로 설정되어 쿠키 대신 서버 세션 등이 활용되지만, 클라이언트에서는 쿠키를 통해 인증 정보를 관리할 수 있습니다.상태 유지: 쿠키는 사용자가 어디에 있는지(로그인 여부 등)를 브라우저에 지속적으로 기억하게 하여, 사용자가 페이지를 새로고침하거나 다른 페이지로 이동할 때도 동일한 세션이 유지되도록 합니다.
프로젝트 내에서 쿠키 사용
프로젝트 내에서는 user authentication (사용자 인증) 및 session maintenance (세션 유지)를 위해 쿠키가 사용됩니다. 예를 들어, 사용자가 로그인한 후 그 상태를 계속 유지하기 위해 페이지 간에 쿠키를 활용하여 정보를 저장하고 교환할 수 있습니다.
관련 질문 URL:
이 주제에 대해 더 심도 있는 이해가 필요하시다면, 아래 유사한 질문 게시물을 참조할 수 있습니다. 각 게시물에서는 설정 방법이나 규모에 따른 차이점 등을 다루고 있습니다.
과거 유사한 질문에서 제공된 해결 방법을 통해 프로젝트의 쿠키 사용목적을 더 명확하게 이해하는 데에 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.