[Next] ISR (+ On-Demand ISR)

ISR(Incremental Static Regeneration)은 정적 생성(SSG)의 장점과 실시간 업데이트를 결합한 강력한 기능이며, 이와 관련된 On-Demand ISR은 ISR을 더욱 효과적으로 사용할 수 있도록 돕습니다.

 

목차

1. ISR(Increamental Static Regeneration)이란?

2. On-Demand ISR이란?

3. ISR vs On-Demand ISR

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. ISR(Increamental Static Regeneration)이란?

ISR은 정적 페이지를 생성한 이후에도 데이터를 갱신할 수 있도록 지원하는 기능입니다. 기본적으로 getStaticProps 함수와 함께 revalidate 속성을 설정하면, 지정한 시간(초)마다 페이지가 다시 생성됩니다.

정적 페이지를 생성하면서 revalidate를 통해 새로운 페이지를 재생성한다는  점에서 SSG와 SSR의 하이브리드 기능처럼 볼 수도 있습니다.

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

  return {
    props: { data },
    revalidate: 60, // 60초마다 재검증
  };
}

위 그림을 살펴보면 ISR은 빌드 타임에 최초 생성된 페이지를 캐싱한 후 revalidate time 전까지 클라이언트에게 제공합니다. 이후 revalidate time에 도달했을 때 사용자가 요청한 데이터가 변경되었다면 다시 새로운 정적 페이지를 생성해 캐싱 데이터를 업데이트하고, 업데이트가 완료되면 이 정보를 클라이언트에게 제공하는 방식으로 동작합니다.

 

장점

• 간단한 설정 : revalidate 속성만 추가하면 동작합니다.
• 자동화 : 별도의 추가 작업 없이 주기적으로 최신 데이터를 반영합니다.
• CDN 친화적 : 갱신 주기가 길다면 정적 파일의 캐싱 이점을 극대화합니다.
• 성능 향상 및 사용 경험 개선 : stale-while-revalidate 캐싱 전략을 사용해 애플리케이션의 성능을 향상 키시고 방문자에게 더 빠른 경험을 제공합니다.

단점

• revalidate 속성에 의존하기 때문에 모든 페이지가 고정된 간격으로만 갱신됩니다.
• 모든 페이지가 같은 주기로 갱신되어 비효율적일 수 있습니다.
• 정적 페이지 생성 빈도 증가 : 잦은 인터랙션으로 데이터 변화가 빈번한 CSR이나 SSR을 사용하는 서비스를 ISR로 구현하려면 서버에서 데이터 요청, 파일 쓰기/읽기, 빌드 프로세스가 빈번하게 발생하므로 성능이 저하될 수 있습니다.
• 페이지 갱신 충돌 : 동시에 여러 요청이 들어올 경우, 동일한 페이지를 여러 번 재생성할 수 있습니다.
• CDN 캐싱의 이점 상실 : ISR은 생성된 정적 파일을 CDN에 저장해 빠르게 제공하지만, 갱신 주기가 짧으면 CDN의 캐싱 이점을 누리지 못할 가능성이 큽니다.

2. On-Demand ISR이란?

On-Demand ISR은 Next.js 12.1 이상에서 제공하는 기능으로, 사용자 요청이 있을 때마다 정적 페이지를 다시 생성하여 최신 데이터를 반영하는 방법입니다. 이를 통해 변경이 발생한 페이지만 갱신할 수 있으며, 리소스 사용을 최적화할 수 있습니다.

 

게시글 페이지에서 ISR을 60초 간격으로 설정했을 때, 사용자가 즉각적으로 게시글을 수정하거나 삭제했더라도 60초가 되기 전까지는 업데이트된 게시글을 볼 수 없습니다. 또한 업데이트된 게시글이 없더라도 필요 없는 주기적 갱신이 계속 발생할 수 있습니다.

On-Demand ISR을 활용하면 사용자 요청을 받을 때마다 페이지를 재생성하도록 설정하여 페이지 갱신을 정확하고 효율적으로 수행할 수 있게 됩니다. 즉, 이 방식은 이 페이지의 업데이트를 우리가 직접 트리거링 할 수 있다는 것입니다. On-Demand ISR이라는 새로운 방식을 이용하면 거의 대부분의 페이지를 최신 데이터를 반영하면서도 정적 페이지로써 처리해 줄 수 있습니다.

 

사용 방법

• API 라우트 생성 : res.revalidate() 메서드를 사용해 특정 경로를 갱신합니다.

export default async function handler(req, res) {
  try {
    await res.revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).send('Revalidation Failed');
  }
}

 

장점

• 서버 부하 감소 : 필요한 순간에만 페이지를 재생성합니다.
• 리소스 감소 : 특정 페이지만 선택적으로 갱신 가능합니다.
• 최신 상태의 정적 사이트 : CMS와 통합해 외부 데이터 소스의 변경 사항을 실시간으로 페이지에 업데이트 가능합니다.

단점

• 구현 복잡성 : API 라우트와 인증 메커니즘 설정이 필요합니다.
• 트리거 조건을 정확히 정의해야 합니다.

3. ISR vs On-Demand ISR

기능	ISR	On-Demand ISR
갱신 방식	revalidate 속성에 설정된 간격(초)마다 페이지를 자동으로 갱신	API 요청을 통해 특정 페이지를 수동으로 갱신
갱신 주기	정해진 간격마다 갱신	필요할 때마다 갱신
데이터 소스	주기적으로 갱신되는 데이터(뉴스, 날씨 등)에 적합	CMS, 사용자 트리거, 이벤트 기반 데이터 갱신에 적합
성능 영향	갱신 주기에 따라 서버 리소스 사용량이 증가 가능	필요할 때만 갱신하므로 리소스 사용 최적화 가능
CDN 캐싱 활용	캐싱 효과를 최대화하려면 긴 revalidate 주기 필요	CDN 캐싱과 무관하게 특정 경로만 갱신 가능
사용 사례	- 최신성을 유지해야 하는 정적 페이지 - 트래픽이 높은 블로그, 뉴스 사이트	- 특정 데이터만 갱신해야 하는 페이지 - CMS 통합, 대규모 이커머스

 

추천글

[Next] Next.js 정적 생성 - SSG(Static Site Generation)이란?

 

[Next] Next.js 이미지 최적화(Image 컴포넌트)