Next.js 16에서 'use cache' 썼더니 cookies() 에러가 떠요

Question

Next.js 15 → 16으로 올리면서 메인 페이지에 'use cache'를 추가했는데, 빌드할 때 다음 에러가 나옵니다.Error: Detected dynamic API 'cookies()' inside cached scope. at app/page.tsx:12실제로 페이지 안에서 사용자 세션을 cookies로 읽고 있긴 한데요, 이걸 어떻게 풀어야 하나요? cache를 포기해야 하는 건가요?

김영삼 · Accepted Answer

16에서 의도된 동작입니다. 캐시된 스코프 안에서는 요청별로 다른 값(cookies, headers, searchParams)을 읽을 수 없어요 — 캐시 키가 무한히 갈라지니까요. 두 가지 패턴 중 하나로 풀면 됩니다.패턴 A — 동적 부분을 자식 컴포넌트로 분리// app/page.tsx — 정적인 부분만 캐시 'use cache' import UserGreeting from './UserGreeting' import ProductList from './ProductList' // 캐시됨 export default async function Home() { const products = await getProducts() // 캐시 return ( <> {/* 동적 — 별도 컴포넌트 */} ) } // app/UserGreeting.tsx

류지훈 · Answer

그런데 UserGreeting 컴포넌트가 페이지 한가운데 있어서 분리하면 레이아웃이 깨지는데요, 이런 경우는요?

김영삼 · Answer

레이아웃은 그대로 두고 컴포넌트만 분리하면 됩니다. 부모 컴포넌트가 캐시되더라도 자식 컴포넌트의 동적 부분은 그 위치에 그대로 렌더링됩니다 — RSC의 partial prerendering이 정확히 이걸 해결하려고 만들어진 기능이에요.// 시각적 레이아웃은 동일 'use cache' export default async function Page() { const data = await getData() return (

{/* 캐시 */}

{/* 캐시 */} }> {/* 동적 */}

댓글 0