ISR: 동적 콘텐츠를 유연하게 캐싱하는 방법

Incremental Static Regeneration(ISR)은 정적 생성의 성능과 동적 콘텐츠의 신선도를 동시에 달성하는 캐싱 전략이다. time-based/on-demand/tag-based 세 가지 전략과 Next.js·SvelteKit·Nuxt·Astro·Remix의 프레임워크별 구현 방식을 비교하고, 실제 사례를 통해 각 트레이드오프를 구체적으로 설명한다.

핵심 포인트

stale-while-revalidate 패턴: 캐시 만료 후에도 즉시 이전 버전 제공하고 백그라운드에서 갱신
Time-based ISR: 고정 주기 기반 재생성, 트래픽 없으면 재생성 지연 가능
On-demand ISR: CMS 퍼블리시·웹훅 이벤트 트리거로 즉각 재검증, 최신성 보장
Tag-based ISR(Next.js): 연관 페이지를 태그 묶음으로 동시 무효화해 일관성 유지
프레임워크별 지원: Next.js(revalidatePath/revalidateTag), SvelteKit(entries), Nuxt(swr), Astro(revalidate)

상세 정리

ISR 핵심 아이디어: 빌드 시 전체 정적 생성 대신 첫 요청 시 생성 후 캐시·갱신 주기 반복
stale-while-revalidate: `Cache-Control: s-maxage, stale-while-revalidate` 헤더로 구현
Time-based: Next.js `revalidate` 옵션, 설정 초 경과 후 다음 요청에서 백그라운드 재생성
On-demand: `revalidatePath()`/`revalidateTag()` Server Action이나 API Route에서 호출
Tag-based: `fetch()` 또는 `unstable_cache`에 태그 부여 후 `revalidateTag(tag)`로 일괄 무효화
Washington Post 사례: 속보 기사를 on-demand ISR로 수초 내 갱신
Leonardo.ai 사례: ISR 도입으로 빌드 시간 10분 → 2분으로 단축
PPR(Partial Prerendering): Next.js 실험 기능으로 정적 shell과 동적 스트리밍 병합
SvelteKit: `entries` 함수로 사전 생성 경로 지정, CDN 캐시 헤더 직접 제어
Nuxt: `swr` 캐시 전략으로 ISR 동등 동작 구현, Astro는 `revalidate` 옵션으로 주기 설정
Remix: Response 헤더의 `Cache-Control`로 엣지 캐시 직접 제어

왜 읽나ISR의 세 가지 전략과 프레임워크별 구현 차이를 한 글에서 비교할 수 있어, 적합한 캐싱 전략 선택에 실질적인 판단 기준이 된다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

ISR: 동적 콘텐츠를 유연하게 캐싱하는 방법

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다