12. ISR (점진적 정적 재생성) – ISR의 개념과 Next.js에서의 활용

 웹사이트를 개발하면서 중요한 문제 중 하나는 데이터가 변경되었을 때 빠르게 반영할 수 있는 방법입니다. **ISR(Incremental Static Regeneration)**은 이러한 문제를 해결해주는 Next.js의 강력한 기능입니다. 이번 글에서는 ISR의 개념과 이를 Next.js에서 어떻게 활용할 수 있는지에 대해 설명하겠습니다.

1. ISR(점진적 정적 재생성)란?

ISR은 **정적 사이트 생성(SSG)**의 장점과 **서버 사이드 렌더링(SSR)**의 장점을 결합한 방식입니다. SSG에서는 페이지를 빌드 시점에 미리 생성하지만, 데이터가 변경되었을 때 다시 빌드를 해야 하는 단점이 있습니다. 반면 ISR은 이미 생성된 정적 페이지를 필요에 따라 점진적으로 재생성하여 최신 상태를 유지할 수 있도록 합니다.

이 방식은 데이터가 자주 변경되지 않는 페이지는 정적으로 제공하고, 변화가 잦은 데이터는 주기적으로 갱신하여 효율성을 극대화합니다.

2. Next.js에서 ISR 활용하기

Next.js에서는 ISR을 revalidate 옵션을 사용하여 쉽게 구현할 수 있습니다. 이 옵션은 페이지가 특정 시간 간격마다 자동으로 재생성되도록 설정할 수 있습니다. getStaticProps 함수 내에서 revalidate를 설정하면 됩니다.

예시: ISR 구현하기

// pages/posts/[id].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
    revalidate: 10, // 10초마다 페이지를 재생성
  };
}

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

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: 'blocking' };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

위 코드에서 revalidate: 10 옵션을 설정하면, 해당 페이지는 10초마다 재생성됩니다. 즉, 페이지 요청 시 최신 데이터가 반영될 수 있습니다. 이와 같은 방식으로 자동으로 갱신되는 페이지를 제공할 수 있습니다.

3. ISR의 장점

ISR은 여러 가지 장점을 제공합니다. 그 중 가장 큰 장점은 성능 최적화와 데이터 갱신을 동시에 해결할 수 있다는 점입니다.

1. 빠른 페이지 로딩: ISR을 사용하면 초기 페이지는 정적으로 빠르게 로딩되며, 변경된 내용만 재생성하여 최적화된 성능을 제공합니다.
2. 데이터 최신성 유지: revalidate 값을 설정하면, 데이터를 주기적으로 갱신할 수 있어 최신 상태의 정보를 제공할 수 있습니다.
3. 서버 부하 절감: 전체 페이지를 매번 서버에서 렌더링하지 않고, 필요한 페이지만 점진적으로 갱신하므로 서버 부하를 줄일 수 있습니다.

4. ISR과 SSG, SSR의 차이점

• SSG (Static Site Generation): 페이지를 빌드 시점에 미리 생성하고, 이후에는 변경되지 않음.
• SSR (Server Side Rendering): 페이지를 요청할 때마다 서버에서 렌더링하여 최신 데이터를 제공.
• ISR (Incremental Static Regeneration): SSG와 SSR의 장점을 결합하여, 정적 페이지를 필요에 따라 재생성하여 최신 데이터를 제공합니다.

5. 결론

ISR은 Next.js의 유용한 기능으로, 정적 사이트 생성의 장점은 그대로 유지하면서, 변경된 데이터를 주기적으로 갱신할 수 있는 기능입니다. 이를 통해 웹사이트의 성능을 최적화하고, 최신 데이터를 제공할 수 있습니다. 데이터가 자주 변경되지 않는 페이지에서는 SSG를, 자주 업데이트되는 페이지에서는 ISR을 활용하여 최적의 성능을 얻을 수 있습니다.