ReactJS(NextJs) 렌더링 패턴 ~Incremental Static Regeneration (ISR)~

Source: Dev.to

ISR 작동 방식

• 캐시에서 제공: 페이지에 대한 최초 요청은 사전 생성된 정적 버전을 캐시에서 제공하여 일관되게 빠른 응답을 보장합니다.
• 백그라운드 재생성 (시간 기반): revalidate 시간을 초 단위로 지정합니다. 이 간격이 지나면 다음 사용자 요청은 여전히 오래된(캐시된) 페이지를 즉시 받습니다. 이 요청은 Next.js가 백그라운드에서 페이지의 새로운 버전을 재생성하도록 트리거합니다.
• 신선한 콘텐츠 제공: 새로운 페이지가 성공적으로 생성되면 캐시된 버전을 교체하고, 이후 모든 방문자는 업데이트된 콘텐츠를 받습니다.

온‑디맨드 재검증

Next.js에서 구현

// app/page.tsx or similar
export const revalidate = 60; // Regenerate the page every 60 seconds

export default async function Page() {
  const res = await fetch('https://example.com/items');
  const items = await res.json();
  // ... render items
}

장점

• 성능 향상: 페이지가 CDN 캐시에서 즉시 제공됩니다.
• 빌드 시간 감소: 필요한 페이지만 재생성하므로 대규모 사이트에 효율적입니다.
• SEO 이점: 검색 엔진에 최적화된 신선한 정적 HTML 페이지를 제공합니다.
• 재배포 없이 최신 콘텐츠: CMS 또는 데이터베이스에서 업데이트된 콘텐츠가 전체 사이트 재빌드 없이 반영됩니다.