[Next.js] App Router - Revalidation (ISR)

개념 설명

ISR은 정적 페이지의 장점(빠른 속도)과 동적 페이지의 장점(최신 데이터 반영)을 결합한 하이브리드 솔루션임. 빌드 시점에 페이지를 생성해 두되, 설정한 일정 시간이 지나면 백그라운드에서 데이터를 다시 불러와 캐시된 페이지를 새로 고침(Revalidate) 하는 방식임. 전체 사이트를 다시 빌드하지 않고도 특정 페이지만 업데이트가 가능하다는 것이 최대 강점

---

사용 상황 예시

• 재고 정보가 중요한 커머스: 상품 상세 페이지를 정적으로 유지하되, 1분마다 재고 상태를 업데이트하여 정확도 유지.
• SNS 게시물 목록: 실시간성은 필요 없지만 데이터가 주기적으로 변하는 피드 화면에 사용.
• 콘텐츠 관리 시스템(CMS): 블로그 글 수정 후 전체 빌드 없이 변경 사항을 반영하고 싶을 때 적합.

---

기본 문법

Next.js App Router에서는 fetch 옵션이나 라우트 세그먼트 설정을 통해 간단히 구현 가능

1. 시간 기반 재검증 (Time-based Revalidation)

// 특정 시간(초)이 지나면 캐시 갱신
const res = await fetch('https://api.example.com/data', {
  next: { revalidate: 60 } // 60초마다 갱신 시도
});

2. 온디맨드 재검증 (On-demand Revalidation)

특정 이벤트(데이터 수정 등)가 발생했을 때 즉시 캐시를 날리고 다시 생성하는 방식임.

// 캐시 태그를 활용한 방식
const res = await fetch('https://api.example.com/data', {
  next: { tags: ['posts'] }
});

// Server Action 등에서 호출하여 캐시 초기화
revalidateTag('posts');

---

자주 하는 실수

• 즉각적인 반영 기대: 시간 기반(Time-based) 방식은 설정 시간이 지난 후 첫 번째 방문자에게는 여전히 구버전을 보여주고, 백그라운드 생성이 완료된 후 다음 방문자부터 새 페이지를 보여줌. 즉, 한 번의 오차가 발생함.
• 너무 짧은 주기 설정: revalidate: 1 처럼 너무 짧게 설정하면 서버 부하가 늘어나 정적 페이지의 이점이 퇴색됨.
• 클라이언트 컴포넌트 내 사용: revalidate 옵션은 오직 서버 컴포넌트의 fetch에서만 유효함.

핵심 요약

1. 정적 페이지를 빌드 후 백그라운드에서 주기적으로 업데이트
2. 시간(Time-based) 또는 특정 이벤트(On-demand) 기준 작동
3. 전체 빌드 없이 특정 라우트만 효율적 갱신

출처: 한 입 크기로 잘라먹는 Next.js(v15)