증분 정적 재생성(ISR) in Next.js: ISR이 무엇이고 언제 사용해야 하는지.

작성일 : 2024-06-21

증분 정적 재생성(ISR) in Next.js: ISR이 무엇이고 언제 사용해야 하는지

Next.js는 React를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)의 기능을 모두 포함하고 있습니다. Next.js의 증분 정적 재생성(Incremental Static Regeneration, ISR)은 이러한 기능을 더욱 확장해줍니다. 그런데, ISR이 정확히 무엇이며, 언제 사용하는 것이 좋을까요? 이 글에서는 ISR의 개념과 실제 사용 사례를 자세히 살펴보겠습니다.

증분 정적 재생성이란?

증분 정적 재생성(ISR)은 정적 생성을 보다 동적으로 운영할 수 있게 해줍니다. 기존의 정적 사이트 생성(SSG)은 빌드 시에 모든 페이지를 생성하지만, ISR을 사용하면 필요할 때마다 특정 페이지를 갱신할 수 있습니다. 이는 주요 페이지의 초기 로드 시간을 줄이면서도 최신 데이터를 유지할 수 있게 해줍니다.

ISR의 핵심 개념은 다음과 같습니다:

초기 생성: 페이지는 정적 파일로 초기 생성됩니다.
갱신 주기: 재생성을 위해 설정된 시간 간격(초 단위) 후에 새로운 요청이 들어오면 페이지가 백그라운드에서 다시 생성됩니다.
새로운 페이지 서빙: 백그라운드에서 새로운 페이지가 생성되면, 이후의 요청은 갱신된 페이지를 서빙합니다.

이 같은 방식으로 ISR은 정적 사이트 생성의 속도와 서버 사이드 렌더링의 유연성을 결합하여 최종 사용자에게 최적의 경험을 제공합니다.

ISR의 사용 방법

Next.js에서 ISR을 사용하려면 getStaticProps 함수에 revalidate 필드를 추가합니다. 이 필드는 페이지가 갱신될 주기를 초 단위로 지정합니다. 예를 들어, 페이지를 60초마다 갱신하려면 아래와 같이 설정할 수 있습니다:


jsx
export async function getStaticProps() {
  const data = await fetchDataFromAPI();

  return {
    props: {
      data,
    },
    revalidate: 60, // 페이지를 60초마다 갱신
  };
}

위 코드는 fetchDataFromAPI 함수에서 데이터를 가져와서 페이지를 최초 생성하며, 생성된 페이지는 처음 요청 시의 데이터를 표시합니다. 이후 60초마다 백그라운드에서 페이지가 갱신되어 최신 데이터를 표시하게 됩니다.

언제 ISR을 사용해야 하는가?

ISR을 사용하기 좋은 사례는 다음과 같습니다:

데이터 변경이 빈번하지만 강력한 일관성이 필요하지 않은 경우: 예를 들어, 블로그 게시물, 뉴스 기사, 제품 목록 등은 자주 업데이트되지만 즉각적인 일관성이 필요하지 않습니다. 이런 경우 ISR을 사용하면 최신 상태의 콘텐츠를 사용자에게 빠르게 제공할 수 있습니다.
트래픽이 높은 페이지: 높은 트래픽을 가진 페이지는 SSR보다 SSG 방식을 사용하는 것이 성능 면에서 유리합니다. 그러나 데이터가 자주 변경되는 경우 ISR을 사용하여 트래픽을 처리하면서도 최신 데이터를 반영할 수 있습니다.
제한된 서버 리소스: SSR은 서버 리소스를 많이 소모합니다. 정적 파일을 사용하면 서버 부하를 줄일 수 있으며, ISR을 사용함으로써 이러한 장점을 그대로 누리면서도 데이터를 주기적으로 갱신할 수 있습니다.

주요 사용 예시

블로그 플랫폼: 블로그 게시글은 자주 업데이트되거나 편집될 수 있지만, 각각의 요청마다 새롭게 서버에서 렌더링할 필요는 없습니다. ISR을 사용하면 게시글이 게시될 때마다 정적 페이지를 재생성하여 최신 콘텐츠를 유지할 수 있습니다.
전자 상거래 사이트: 제품 목록이나 가격은 자주 변경될 수 있지만, 매번 서버 요청으로 동적으로 불러오는 것은 비효율적입니다. ISR로 매 시간 혹은 지정된 간격마다 최신 정보를 반영하도록 설정하여 효율성을 높일 수 있습니다.
뉴스 사이트: 뉴스 기사는 실시간으로 업데이트될 필요가 있지만, 순간적인 트래픽 급증을 감당해야 하는 경우도 많습니다. ISR을 통해 최신 뉴스를 빠르게 배포하면서 서버 부하를 줄일 수 있습니다.

ISR의 한계와 주의사항

ISR은 강력한 기능이지만, 몇 가지 한계를 가지고 있습니다:

초기 로드 시간: 첫 번째 요청 시에는 미리 생성된 정적 파일을 제공하므로 빠르지만, 백그라운드에서 재생성을 기다려야 하기 때문에 갱신 주기와 실제 업데이트 간에 약간의 시간 차이가 발생할 수 있습니다.
동기화 문제: 데이터가 중요하게 변경된 경우 즉각적인 업데이트가 필요한 서비스에는 부적합할 수 있습니다. 예를 들어, 금융 데이터나 실시간 채팅 애플리케이션 등은 ISR보다 SSR이 더 적합할 수 있습니다.

그러나 대부분의 정적 사이트는 이러한 한계를 감수할 만한 가치가 있습니다. 매우 높은 성능과 유연성을 결합하여 사용자 경험을 향상시킬 수 있기 때문입니다.

결론

증분 정적 재생성(ISR)은 Next.js의 강력한 기능으로, 정적 사이트 생성을 보다 동적으로 활용할 수 있게 합니다. 이는 특히 데이터 변화가 빈번한 애플리케이션에서 유용하며, 높은 트래픽을 처리하면서도 최신 상태를 유지할 수 있는 좋은 방법입니다. ISR을 통해 유연하면서도 빠른 웹사이트를 제작해보세요!