pile·
프론트엔드·vercel-blogVercel Blog·

Next.js 캐시와 Vercel Data Cache: 컴포넌트 단위 점진적 캐싱

Next.js 13.2와 함께 베타 출시된 Next.js Cache와 Vercel Data Cache는 2020년 도입된 ISR(증분 정적 재생성)을 진화시킨다. ISR이 전체 경로(route) 단위로만 캐시/재생성을 허용한 반면, 새 시스템은 React Server Components의 colocated 데이터 패칭을 활용해 컴포넌트·데이터 단위의 세밀한 캐시 제어를 가능하게 한다. 같은 페이지에서 일부는 정적 캐시로, 나머지는 완전한 동적 렌더링으로 혼합할 수 있다.

핵심 포인트
  • ISR 한계 해소: "특정 컴포넌트만 무효화"와 "사용자 개인화 동적 접근"이 ISR에선 불가능했다. 새 캐시 레이어가 이를 해결한다.
  • `fetch(url, { next: { revalidate: 60 } })` 로 데이터 단위 캐시 수명을 지정한다. 기본값은 자동 캐시, `cache: 'no-store'` 로 동적 요청을 명시한다.
  • 태그 기반 세밀한 무효화(granular invalidation) — 캐시 태그를 지정하고 `revalidateTag()` 로 특정 태그에 묶인 데이터만 선택적으로 재검증한다.
  • Vercel 배포 시 cache shielding이 내장되어 글로벌 리전에 분산 캐시 적용. 자체 호스팅은 50MB LRU 인메모리 캐시 + 디스크 자동 영속화.
  • 정적·동적 렌더링이 같은 백엔드 캐시를 공유해 일관된 데이터를 제공한다.
상세 정리
  • ISR 한계: 2020년 ISR은 경로(route) 단위로만 정적 데이터를 캐시·재생성했다. 특정 컴포넌트만 재검증하거나 개인화 데이터에 동적 접근하려면 전체 경로를 동적으로 전환해야 해 성능 손실이 있었다.
  • 해결 방향: React Server Components 도입으로 서버에서 컴포넌트별 독립적인 데이터 패칭이 가능해졌다. 이를 캐싱 레이어와 통합해 컴포넌트 단위로 캐시 정책을 선언할 수 있게 했다.
  • 기본 동작: App Router에서 `fetch`는 기본적으로 결과를 캐시한다. 개발자가 명시하지 않아도 자동으로 캐시되어 성능을 최적화한다.
  • no-store 옵션: `cache: 'no-store'` 를 전달하면 해당 요청은 캐시를 우회해 항상 최신 데이터를 패칭한다. 사용자 세션, 실시간 데이터 등에 사용한다.
  • 시간 기반 재검증: `{ next: { revalidate: 60 } }` — 60초 후 백그라운드에서 재패칭해 캐시를 갱신한다. ISR의 route 단위 revalidate 개념을 데이터 단위로 내린 것이다.
  • 태그 기반 재검증: 캐시 태그를 지정하면 콘텐츠 변경 시 해당 태그에 묶인 데이터만 선택적으로 무효화할 수 있다. 예: 제품 데이터 변경 시 상품 페이지 관련 캐시만 갱신.
  • Vercel Data Cache: Vercel 플랫폼의 공유 백엔드 캐시로 정적·동적 렌더링이 같은 캐시를 공유한다. 글로벌 리전 분산과 cache shielding(오리진 과부하 방지)이 내장된다.
  • 자체 호스팅 동작: 기본 50MB LRU 인메모리 캐시이며 엔트리를 디스크에 자동 영속화한다. Vercel의 글로벌 분산 캐시와 달리 단일 서버 로컬 캐시 수준이다.
  • 향후 로드맵: `revalidatePath()` (경로 단위 프로그래밍 무효화), `revalidateTag()` (태그 단위 무효화) API 함수가 예정되어 있으며 Vercel 유료 플랜에서 확장 스토리지 옵션도 계획 중이다.
왜 읽나Next.js App Router의 fetch 기반 캐싱 아키텍처를 이해하거나, ISR보다 세밀한 데이터 캐시 전략이 필요한 Next.js 프론트엔드·풀스택 개발자에게 설정 방법과 동작 원리를 제공한다.
vercel-blog
Vercel Blog 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)
·takedown 요청

이 글과 비슷한

  3. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2