증분 정적 재생성(ISR) 활용 사례: 데이터 변경에 따른 페이지 자동 업데이트 구현

증분 정적 재생성(Incremental Static Regeneration, ISR)은 정적 사이트 생성(Static Site Generation, SSG)의 한계를 극복하고자 등장한 새로운 개념입니다. 이는 Next.js와 같은 최신 프레임워크에서 주로 사용되며, 시간 경과에 따라 데이터가 변경될 때도 최신의 데이터를 유지하면서 빠른 성능을 제공할 수 있습니다. ISR을 통해 어떻게 데이터 변경에 따른 페이지 자동 업데이트를 구현할 수 있는지, 그리고 그 활용 사례는 무엇인지 자세히 살펴보겠습니다.

ISR의 기본 개념

증분 정적 재생성은 정적 페이지를 생성하면서도 동적 데이터 변경을 처리할 수 있게 해주는 기능입니다. 이는 Classic SSG와 Dynamic SSR(Server-Side Rendering)의 중간 형태라 할 수 있습니다. ISR의 핵심은 특정 시간 간격(revalidate)을 두고 정적 페이지를 서버에서 다시 생성하므로써 데이터가 변경된 경우에도 사용자에게 최신 정보를 제공할 수 있습니다.

예를 들어, 특정 블로그 포스트 페이지를 매 10분마다 재검증하겠다고 설정하면, 10분마다 해당 페이지의 데이터를 다시 가져와 페이지를 다시 생성합니다. 기존의 정적 페이지는 빠르게 제공하면서도, 데이터 변경 시 최신 상태로 업데이트할 수 있는 것입니다.

코드 예제

ISR을 구현하려면 Next.js 프로젝트에서 getStaticProps 함수를 이용하면 됩니다. 다음은 기본적인 예제입니다.

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

  return {
    props: { data },
    revalidate: 600, // 10분마다 데이터 재검증
  };
}

const Page = ({ data }) => {
  return <div>{data.content}</div>;
};

export default Page;

위 코드에서 revalidate 옵션을 통해 해당 페이지가 매 600초, 즉 10분마다 서버에서 다시 생성됩니다. 이는 최신 데이터를 항상 유지할 수 있다는 점에서 매우 유용합니다.

데이터 변경에 따른 페이지 자동 업데이트 구현

데이터 변경에 따라 페이지를 자동으로 업데이트하려면 다음 단계를 따르면 됩니다.

1. 데이터 소스 준비

데이터 소스는 주로 RESTful API 또는 GraphQL API로부터 받아올 수 있습니다. 이 예제에서는 간단한 RESTful API를 사용했습니다.

javascript
// pages/api/data.js

export default function handler(req, res) {
  const data = {
    content: 'This is some dynamically generated content!'
  };
  res.status(200).json(data);
}

2. getStaticProps 함수 구현

이 함수는 서버 사이드에서 실행되며, 데이터 소스를 호출하여 정적 페이지에 필요한 데이터를 가져옵니다. 이때 revalidate 옵션을 설정하여 어느 주기로 데이터를 재검증할지 지정할 수 있습니다.

3. 상용 배포 환경에서의 주의사항

ISR을 실제로 상용 배포 환경에 적용하기 위해서는 몇 가지 고려해야 할 사항이 있습니다. CDN(Content Delivery Network)과 같은 캐시 시스템과의 호환성을 고려해야 하며, 재검증 주기를 너무 짧게 설정할 경우 서버에 부담이 될 수 있습니다.

4. 클라이언트-Side 데이터를 유지보수 하기 위한 추가 방법

Next.js의 SWR을 함께 사용하면 클라이언트 사이드에서 데이터 불러오기를 최적화할 수 있습니다. 이는 암시적 데이터를 빠르게 가져오면서도 신선한 데이터를 유지할 수 있게 해줍니다.

javascript
import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());

const Page = () => {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{data.content}</div>;
};

export default Page;

이 코드는 useSWR 훅을 사용하여 클라이언트 측 데이터 가져오기를 최적화하는 예제입니다. 이는 SSR과 결합하여 보다 유연하게 데이터 변경을 처리할 수 있습니다.

ISR 활용 사례

증분 정적 재생성은 다양한 상황에서 유용하게 활용될 수 있습니다. 그 중 일부 사례를 살펴보겠습니다.

1. 블로그 사이트

블로그와 같은 컨텐츠 중심의 웹사이트는 자주 업데이트되지 않으면서도, 최신의 컨텐츠를 제공해야 합니다. ISR을 사용하면 새로운 포스트가 작성될 때마다 이를 자동으로 반영할 수 있습니다.

2. 전자 상거래 사이트

제품 페이지나 재고 정보가 자주 변경되는 전자 상거래 사이트에서도 ISR은 매우 유용합니다. 주기적으로 제품 정보를 재검증하여 사용자에게 최신 상태를 제공하며, 페이지 로딩 속도를 빠르게 유지할 수 있습니다.

3. 대시보드 및 통계 페이지

실시간 데이터 갱신이 필요한 대시보드나 통계 페이지에서도 ISR을 활용하면 클라이언트 측과 서버 측 모두에서 최신 데이터를 효율적으로 제공할 수 있습니다.

ISR을 통해 정적 페이지와 동적 데이터의 장점을 모두 취할 수 있습니다. 이에 따라 최신 정보 제공과 빠른 성능을 동시에 만족시킬 수 있으며, 다양한 웹 애플리케이션에서 이를 활용할 수 있습니다.