Next.js 15의 Incremental Static Regeneration으로 개발을 혁신하자

Incremental Static Regeneration (ISR)이란?

Next.js는 웹 개발자들에게 이미 인기 있는 프레임워크 중 하나입니다. 그러나 대규모 데이터나 빈번한 업데이트가 필요한 사이트를 구축할 때는 속도와 신선한 콘텐츠 간의 절충이 필요합니다. 이런 경우 Incremental Static Regeneration(ISR)이 빛을 발합니다. 최근 Next.js 15는 ISR 기능을 더 개선하여 보다 효과적으로 구현할 수 있게 되었습니다.

ISR의 작동 방식

ISR은 사이트의 전체 재구축 없이 부분적으로 정적 페이지를 업데이트할 수 있게 합니다. 덕분에 정적 페이지의 빠른 로딩 속도를 유지하면서도 최신 데이터를 반영할 수 있습니다. 특정 트리거나 일정한 간격으로 페이지가 백그라운드에서 갱신됩니다.

ISR의 주요 장점

• 확장성: 작은 수정에 대해 전체 사이트 재구축이 필요 없습니다.
• 성능: 사용자에게 여전히 빠른 정적 페이지를 제공합니다.
• 유연성: 업데이트가 자동으로 백그라운드에서 이루어집니다.

Next.js에서의 ISR 워크플로우

Next.js에서 ISR의 워크플로우는 정적 페이지가 어떻게 제공되고, 백그라운드에서 재생성되며, 신선한 콘텐츠를 보장하기 위해 어떻게 재검증되는지를 보여줍니다.

제품 목록 페이지 구축해보기: ISR의 실전 적용

ISR 개념을 이해하기 위해, 전자상거래 사이트의 제품 목록 페이지를 구축해보도록 하겠습니다. 이는 단계별로 다음과 같이 발전합니다:

1단계: 정적 생성 설정하기

우선 Static Site Generation(SSG)를 사용하여 제품 목록 페이지를 생성합니다. 이 페이지는 빌드 시 데이터를 가져와 정적으로 유지됩니다.

// pages/products.js
import { getProducts } from '../lib/api';

export async function getStaticProps() {
  const products = await getProducts();

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Product Listings</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

2단계: ISR 도입

ISR을 통해 정적 페이지가 백그라운드에서 어느 주기로 재생성될지를 지정할 수 있습니다. 우리 제품 목록 페이지에 재검증 기간을 추가합니다.

export async function getStaticProps() {
  const products = await getProducts();

  return {
    props: {
      products,
    },
    revalidate: 60, // 정적으로 생성된 페이지를 60초마다 재생성
  };
}

이제 데이터베이스에 제품이 추가 또는 업데이트되면 사용자들은 60초의 검증 기간 후에 이러한 변경사항을 볼 수 있게 됩니다.

Next.js 15에서 ISR의 새로운 기능

1. API를 통한 동적 재검증

이전 버전에서는 ISR의 재검증이 엄격하게 시간 기반이었습니다. 하지만 Next.js 15에서는 API를 통해 이를 프로그래밍적으로 트리거할 수 있습니다. 데이터베이스의 제품 업데이트와 같은 특정 이벤트가 발생할 때 페이지를 재생성할 수 있습니다.

export default async function handler(req, res) {
  if (req.method === 'POST') {
    await res.revalidate('/products'); // 제품 목록 페이지 재검증
    res.status(200).json({ message: 'Revalidated!' });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

2. 최적화된 캐시 무효화

Next.js 15는 캐시 무효화를 최적화하여 오래된 페이지가 다른 정적 페이지에 영향을 주지 않도록 효율적으로 대체되도록 합니다. 덕분에 어떤 페이지가 재생성되어야 하는지를 더 잘 제어할 수 있습니다.

3단계: 동적 재검증으로 예제 업데이트

제품을 추가하거나 편집할 수 있는 관리자 대시보드를 가지고 있다고 가정해보겠습니다. Next.js 재검증 API와 연동하여 변경 후 즉시 페이지 업데이트를 트리거할 수 있습니다.

// 관리자 대시보드에서 재검증 트리거
const handleUpdate = async () => {
  await fetch('/api/revalidate', {
    method: 'POST',
  });
  alert('Page revalidated successfully!');
};

// 관리자 패널의 버튼
<button onClick={handleUpdate}>Update Product Listings</button>

이 설정을 통해 새로운 제품이 추가되거나 편집될 때 거의 즉시 제품 목록 페이지가 업데이트됩니다. 사용자에게는 빠른 속도와 최신 콘텐츠 제공이 동시에 가능해집니다.

개발자의 관점: 업데이트가 워크플로우에 미치는 영향

Next.js 15의 업데이트는 ISR을 더욱 유연하고 개발자 친화적으로 만듭니다.

• 시간 기반에서 이벤트 기반으로: 더 이상 주기적인 재검증에 제한되지 않습니다. 페이지를 동적으로 재검증하여 변화에 더 잘 대응할 수 있습니다.
• 빌드 복잡성 감소: 최적화된 캐시 무효화로 인해 페이지 재생성 시 불필요한 영향을 걱정할 필요가 없습니다.
• API 우선 접근법: 재검증 API는 웹훅과 다른 실시간 시스템과의 통합에 적합하게 만들어줍니다.

언제 ISR을 사용할까?

ISR은 콘텐츠가 최신 상태를 유지해야 하지만 실시간 업데이트가 필요하지 않은 다음과 같은 시나리오에 적합합니다:

• 전자상거래 플랫폼(예: 제품 목록 및 카테고리)
• 블로그나 뉴스 사이트
• 자주 업데이트되는 마케팅 페이지

결론

Next.js 15의 Incremental Static Regeneration은 개발자가 확장 가능하고 고성능의 애플리케이션을 구축하는 데 있어서 게임 체인저라 할 수 있습니다. 정적 생성의 이점과 온디맨드 업데이트의 유연성을 결합하여 사용자에게 최고의 경험을 제공합니다.

전자상거래 사이트, 블로그 또는 마케팅 플랫폼을 구축하는 어느 경우라도 Next.js 15의 새로운 기능은 콘텐츠를 최신 상태로 유지하면서도 속도와 확장성을 희생하지 않도록 도와줍니다.

참고 자료:

• Next.js Documentation
• Verce Blog on ISR