1.0. ISR (Incremental Static Regeneration)란?

ISR은 Next.js의 정적 사이트 생성(SSG)의 한계를 극복하기 위해 도입된 개념으로, 특정 페이지를 정적 페이지처럼 빠르게 제공하면서도 일정 주기로 새롭게 갱신할 수 있는 기능을 제공한다.

1.1. ISR이 왜 필요할까?

• **SSG(Static Site Generation)**는 빌드 시점에 모든 페이지를 미리 생성하지만, 데이터가 변경될 때마다 전체 사이트를 다시 빌드해야 하는 단점이 있다.
• **SSR(Server Side Rendering)**은 매 요청마다 서버에서 데이터를 받아 페이지를 렌더링하기 때문에 성능과 SEO는 좋지만, 서버 부하가 커지는 문제가 있다.
• ISR은 SSG의 성능 이점을 유지하면서도 필요할 때만 정적 페이지를 갱신할 수 있도록 한다.

1.2. ISR 동작 방식

ISR은 getStaticProps에서 revalidate 옵션을 설정하면 사용할 수 있다.

1. 처음 페이지 요청 시, 정적 페이지(SSG)가 제공됨
2. 일정 시간이 지나면(예: revalidate: 10 → 10초 후) 백그라운드에서 새로운 데이터를 가져와 정적 페이지를 갱신
3. 이후 새로운 요청이 들어오면 갱신된 최신 페이지를 제공

export async function getStaticProps() {
  const res = await fetch("<https://api.example.com/data>");
  const data = await res.json();

  return {
    props: { data },
    revalidate: 10, // 10초마다 페이지를 갱신
  };
}
// 10초 마다 페이지가 백그라운드에서 재생성된다.

1.2.1. Next 13 vs Next 14

Next.js 14에서 ISR(Incremental Static Regeneration)의 사용 방식은 Next.js 13과 거의 동일하지만, 일부 설정 방식이 개선되었다.

revalidate 설정 방식

• Next.js 13과 14 모두 getStaticProps에서 revalidate 옵션을 사용하여 ISR을 활성화한다.

차이점

• Next.js 14에서는 App Router (app/ 디렉터리)에서도 fetch의 { next: { revalidate: X } } 옵션을 활용하여 ISR을 구현할 수 있다.