ISR

ISR (Incremental Static Regeneration)

점진적(Incremental) 정적(Static) 재생성(Regeneration)의 약자. 기존에는 페이지 하나를 수정하려면 웹사이트 전체를 처음부터 다시 빌드해야 했다. ISR은 사이트 전체를 건드리지 않고, 만료된 특정 페이지만 백그라운드에서 새 HTML로 다시 생성해 교체하는 기술이다.

• 전체 사이트를 재빌드하지 않고 필요한 페이지만 갱신한다.
• 미리 생성된 정적 페이지를 제공해 서버 부하를 최소화한다.
• cache-control 헤더가 자동으로 설정된다.
• next build 시간을 늘리지 않고도 대규모 콘텐츠를 처리할 수 있다.

const res = await fetch(URL, {
    next: { revalidate: 3 }, // ★ 핵심: 3초 간격으로 데이터를 재검증(Revalidate)
  });
const timeData = await res.json();

작동 원리: SWR (Stale-While-Revalidate) 패턴

이 방식이 효율적인 이유는 사용자에게 대기 시간을 전혀 발생시키지 않기 때문이다. "오래된(Stale) 데이터를 먼저 응답하는 동안(While), 백그라운드에서 최신 데이터로 재검증(Revalidate)하는" 전략이다. 시간 순서대로 살펴본다.

• 0초 (첫 번째 요청): 캐시가 비어 있는 상태에서 첫 요청이 들어온다. 서버가 외부 API를 호출해 데이터를 받아오고 캐시에 저장한다. (예: 10:00:00 기록) 이 첫 요청자만 짧은 로딩을 겪는다.
• 0초 ~ 3초 (유효 구간): 이 구간에서는 수만 건의 요청이 몰려도 API를 추가 호출하지 않는다. 캐시에 저장된 10:00:00 데이터를 담은 HTML을 즉시 응답한다. (응답 속도 수 밀리초 수준)
• 3초 경과 후 (만료 및 재요청): 유효 기간이 지나면 캐시는 '만료(Stale)' 상태로 전환된다. 이후 첫 번째 요청자에게는 만료된 10:00:00 데이터를 즉시 반환하고, 동시에 백그라운드에서 API를 재호출해 캐시를 조용히 갱신한다.
• 갱신 완료 (이후 요청자): 캐시가 최신 데이터로 교체된다. 그 이후 접속하는 사용자는 새로 갱신된 데이터(예: 10:00:04)를 받아본다.