ISR?

ISR(Incremental Static Regeneration)?

ISR(Incremental Static Regeneration)은 Next.js에서 제공하는 기능 중 하나로, 정적 생성(static generation)된 페이지를 업데이트하는 방법을 개선하는 기술입니다. ISR은 이전에 정적으로 생성된 페이지를 서버에서 백그라운드에서 다시 생성하고 새로운 페이지를 제공함으로써 페이지의 새로고침 없이 콘텐츠를 업데이트할 수 있게 합니다.

특징

1. 즉시 업데이트: 업데이트가 필요한 페이지를 서버에서 백그라운드에서 다시 생성하고, 새로운 페이지를 즉시 제공합니다.
2. 캐싱과 조합: ISR은 이전에 정적으로 생성된 페이지를 캐싱하고, 사용자 요청이 있을 때 백그라운드에서 업데이트된 페이지를 생성하여 캐시와 조합합니다.
3. 유연한 설정: ISR은 각 페이지별로 업데이트 주기를 설정할 수 있어, 자주 업데이트되는 페이지와 드물게 업데이트되는 페이지에 대해 세밀한 제어가 가능합니다.

예를 들어, Next.js에서 ISR을 사용하는 페이지는 다음과 같이 설정할 수 있습니다:

import { useEffect } from 'react';

function Example({ data }) {
  useEffect(() => {
    // 이 페이지가 렌더링될 때 ISR이 백그라운드에서 페이지를 업데이트
  }, []);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export async function getStaticProps() {
  // 데이터를 가져오는 비동기 함수
  const data = await fetchData();

  return {
    props: {
      data,
    },
    revalidate: 60, // 60초마다 페이지를 업데이트하도록 설정
  };
}

export default Example;

위의 코드에서 revalidate 속성은 페이지를 업데이트하는 주기를 설정하는데 사용됩니다. ISR을 통해 페이지의 정적 생성된 버전을 주기적으로 업데이트하면서 사용자에게 항상 최신 콘텐츠를 제공할 수 있습니다.