fetch() 가 더 이상 cache 안 됨

~22 min · caching, v15, breaking change

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

v15 의 가장 큰 동작 변화

Next.js 14 에선 Server Component 안 fetch() 가 default 로 cache. 개발자가 모르는 stale data 에 데였어. Next.js 15+ 가 default 뒤집음: fetch 가 cache 안 됨, opt-in 안 하면.

Opt-in caching option

전략	설정 방법
영원히 cache (revalidate 까지)	`fetch(url, { cache: 'force-cache' })`
ISR — N 초마다 revalidate	`fetch(url, { next: { revalidate: 60 } })`
On-demand invalidation 위해 tag	`fetch(url, { next: { tags: ['posts'] } })`
No cache (default)	`fetch(url)` 또는 명시적 `{ cache: 'no-store' }`
Route-level default	`export const revalidate = 60`

Migration 모양

v14 app 이 upgrade 후 느리게 느껴지면, 매 render 마다 fresh data 진짜 안 필요한 route 찾아서 cache: 'force-cache' 또는 next: { revalidate } 추가. 옛날엔 공짜 cache 받았던 거 이제 못 받아.

Code

한 화면 안 변화·tsx

// v14 (사라짐)
const res = await fetch(url); // default 로 cache

// v15+ (현재)
const res = await fetch(url); // cache 안 됨 — 매 request fresh

// 다시 opt-in
const cached = await fetch(url, { cache: 'force-cache' });
const isr = await fetch(url, { next: { revalidate: 60 } });
const tagged = await fetch(url, { next: { tags: ['posts'] } });

Route-level revalidate·tsx

// app/blog/page.tsx
export const revalidate = 300; // 전체 route 위해 5 분

export default async function BlogPage() {
  // 이 route 아래 모든 fetch 가 default 로 300s revalidation
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <PostList posts={posts} />;
}

External links

Exercise

매시간 변하는 data fetch 하는 route 골라. fetch(url, { next: { revalidate: 3600 } }) 추가하고 curl 로 후속 request 들이 한 시간 동안 cache 에서 서빙되는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousServer Component Fetching Next →Time-Based Revalidation (ISR)

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.