증분 정적 재생성 (ISR)
증분 정적 재생성(Incremental Static Regeneration, ISR)은 Next.js에서 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR) 사이의 중간 지점을 메우는 렌더링 전략이다. SSG는 빌드 타임에 페이지를 미리 생성해 성능은 뛰어나지만 런타임에 동적으로 콘텐츠를 갱신할 수 없다는 한계가 있다. ISR은 이 한계를 극복해, 빌드 이후에도 전체 사이트를 다시 빌드하지 않고 지정한 페이지만 주기적으로 새 데이터로 갱신할 수 있게 한다.
동작 방식은 다음과 같다. 사용자가 페이지를 요청하면 Next.js는 우선 이미 생성된 정적 HTML을 즉시 반환한다. 이때 설정된 `revalidate` 시간이 지났는지 확인하고, 지났다면 백그라운드에서 최신 데이터를 API/DB에서 가져와 해당 페이지를 새로 생성한다. 이후 요청부터는 새로 생성된 페이지가 제공된다. 즉 전체 사이트 재빌드가 아니라 개별 페이지 단위로 재생성이 이뤄지므로, SSG의 빠른 응답 속도와 SEO 이점을 유지하면서도 콘텐츠 신선도를 확보할 수 있다.
ISR은 트래픽이 높아 SSR의 서버 부담을 감당하기 어려운 페이지, 혹은 서버 리소스가 한정된 환경에서 동적 데이터 반영이 필요한 페이지에 적합하다. 블로그, 포트폴리오 사이트, 뉴스 페이지처럼 콘텐츠가 주기적으로 바뀌지만 매 요청마다 실시간성이 필수는 아닌 경우에 특히 유효하다.
다만 한계도 명확하다. 첫째, ISR을 지원하지 않는 프레임워크에서는 구현이 까다롭고, Next.js 자체도 버전마다 설정 방식이 바뀌어 왔으므로 사용 중인 버전의 공식 문서 확인이 필요하다. 둘째, 데이터 일관성 문제가 있다 — 재생성 주기 특성상 사용자가 항상 최신 데이터를 보장받지는 못하므로 적절한 revalidate 주기 설정이나 데이터 변경 시 재생성 트리거가 필요하다. 셋째, 설정된 재생성 주기와 실제 업데이트 사이에 시차가 발생해, 첫 요청 시 SSG의 빠른 렌더링 이점이 완전히 발휘되지 못할 수 있다. App Router에서는 `generateStaticParams`가 ISR 재생성 중에는 다시 호출되지 않으므로, 빌드 이후 새로 추가된 동적 경로를 런타임에 허용하려면 `dynamicParams`를 `true`로 설정하거나 `generateStaticParams`가 빈 배열을 반환하도록 구성해야 한다.
핵심 내용
- ISR: SSG와 SSR의 중간 — 빌드 이후에도 페이지 단위로 주기적 재생성 가능
- 동작 흐름: 정적 응답 즉시 반환 → `revalidate` 시간 경과 확인 → 백그라운드 재생성 → 다음 요청부터 신규 페이지 제공
- 적합 사례: 높은 트래픽 페이지, 서버 리소스 제한 환경, 블로그·포트폴리오·뉴스 등 주기적 콘텐츠 변경 페이지
- 한계: 프레임워크·버전별 설정 방식 상이, 데이터 즉시성 미보장, 재생성 주기와 실제 반영 간 시차
- `generateStaticParams`는 ISR 재생성 중 재호출되지 않음 → 런타임 신규 경로 허용은 `dynamicParams: true` 또는 빈 배열 반환으로 처리
관련 개념
- Next.js 레이아웃과 템플릿 — 같은 App Router 생태계의 렌더링·구조 관심사
- Next.js 사이트맵 자동화 — 정적/동적 페이지 구분이 사이트맵 생성 전략에도 영향을 미침
- 코어 웹 바이탈과 SEO — SSG 기반 렌더링이 초기 로딩 성능(LCP 등) 지표에 미치는 영향
출처
- 증분 정적 재생성 (ISR) — 2024-10-24, Byul.Kim