Next.js 16 fetch 캐시가 예상대로 작동하지 않습니다

Question

Next.js 16 App Router에서 서버 컴포넌트의 fetch가 캐시되지 않는 것 같습니다.// app/page.tsx export default async function Page() { const res = await fetch("https://api.example.com/data") const data = await res.json() return

{data.title}

}이전 Next.js 14에서는 기본으로 캐시됐는데, 16에서는 매 요청마다 새로 가져오는 것 같아요. force-cache를 명시해야 하나요?

김영삼 · Accepted Answer

Next.js 15부터 fetch의 기본 캐시 정책이 변경되었습니다.Next.js 14까지는 fetch()가 기본적으로 force-cache였지만, 15부터는 no-store가 기본입니다. 이 변경은 개발자들이 캐시된 데이터를 의도치 않게 보여주는 버그를 방지하기 위한 것입니다.캐시를 사용하려면 명시적으로 지정하세요:// 정적 캐시 fetch(url, { cache: "force-cache" }) // 시간 기반 재검증 fetch(url, { next: { revalidate: 3600 } }) // 또는 라우트 세그먼트 설정 export const revalidate = 3600개인적으로는 명시적 캐시 정책이 더 안전하다고 봅니다.

서버지기영호 · Answer

저도 이거 때문에 한참 삽질했어요. unstable_cache에서 use cache로 바뀐 것도 헷갈리더라고요.

코딩하는민수 · Answer

아 15부터 바뀐 거였군요. revalidate 옵션으로 해결했습니다. 감사합니다!

댓글 3