Next.js에서 On-Demand ISR 활용하기(Feat. API, Webhook, Serverless)

Incremental Static Regeneration

 

On-Demand ISR(Incremental Static Regeneration)은 Next.js에서 제공하는 정적 페이지 재생성 기능으로, 특정 시간 간격이 아니라 콘텐츠 변경 시점에 즉시 업데이트할 수 있도록 해줍니다.

이를 활용하면 서버 부하를 줄이면서도 최신 데이터를 사용자에게 제공할 수 있습니다.

1. 온디맨드 ISR 도입 배경과 기존 렌더링 방식 비교

1.1 온디맨드 ISR 도입 배경

Next.js는 초기부터 다양한 렌더링 방식을 지원하여 개발자들이 프로젝트의 특성에 맞게 선택할 수 있도록 했습니다.

그러나 각 방식에는 고유한 장단점이 존재하며, 특히 정적 사이트 생성(SSG)의 경우 콘텐츠 업데이트 시 전체 사이트를 다시 빌드해야 하는 비효율성이 있었습니다.

 

이러한 문제를 해결하고자 ISR(Incremental Static Regeneration)이 도입되었습니다.

ISR은 정적 사이트의 성능과 서버 사이드 렌더링의 유연성을 결합하여, 특정 페이지나 컴포넌트만 선택적으로 재생성함으로써 빌드 시간을 단축하고 최신 콘텐츠를 제공할 수 있게 되었습니다.

 

그러나 기존 ISR에는 몇 가지 단점이 있었습니다. 기본 ISR 방식은 설정된 재생성 주기(revalidate 값) 동안 동일한 정적 페이지를 유지하다가, 다음 요청이 들어올 때 다시 새로운 데이터를 가져와 페이지를 업데이트합니다.

이로 인해 데이터 변경이 즉각적으로 반영되지 않는 문제가 발생할 수 있습니다.

특히 CMS와 연동된 블로그나 e-commerce 사이트에서는 새로운 콘텐츠가 업데이트되었음에도 사용자가 한동안 이전 데이터를 보게 되는 문제가 있었습니다.

이러한 문제를 해결하기 위해 온디맨드 ISR이 등장했습니다.

온디맨드 ISR은 특정 시간 간격이 아니라 CMS 업데이트, API 호출, 관리자의 수동 트리거 등의 이벤트가 발생할 때 즉시 페이지를 재생성할 수 있도록 설계되었습니다.

이를 통해 콘텐츠가 변경되면 바로 최신 페이지를 제공하면서도, 기존 ISR의 캐싱 및 성능 최적화 장점을 그대로 유지할 수 있습니다.

1.2 기존 렌더링 방식과 ISR의 비교

랜더링 방식	설명	장점	단점
CSR (Client-Side Rendering)	클라이언트 측에서 모든 JavaScript를 로드하고 실행하여 페이지를 렌더링	- 초기 서버 부하 적음 - 빠른 페이지 전환	- 초기 로딩 시간 지연 - SEO 최적화 어려움
SSR (Server-Side Rendering)	서버에서 요청 시마다 페이지를 렌더링하여 클라이언트에 전달	- 빠른 초기 로딩 - SEO에 유리	- 서버 부하 증가 - 복잡한 구현
SSG (Static Site Generation)	빌드 시 모든 페이지를 정적으로 생성하여 배포	- 매우 빠른 로딩 속도 - CDN 캐싱 가능	- 콘텐츠 변경 시 전체 재빌드 필요 - 실시간 데이터 반영 어려움
ISR (Incremental Static Regeneration)	SSG와 유사하지만, 설정한 시간마다 또는 온디맨드로 특정 페이지를 재생성	- 빠른 로딩 속도 유지 - 콘텐츠 변경 시 선택적 재생성 가능	- 실시간 데이터 반영에는 한계

2. 온디맨드 ISR의 활용 사례

1. 뉴스 및 블로그 사이트
   • CMS와 연동하여 기사 수정 또는 속보 발생 시 자동으로 페이지를 갱신
   • 기존 정적 사이트의 전체 재빌드 부담을 해소
2. 전자상거래(e-commerce)
   • 상품 가격 및 재고 변경 시 즉시 반영
   • 인기 상품 페이지를 최신 상태로 유지하면서도 캐싱을 활용하여 성능 최적화
3. 대규모 트래픽 사이트
   • Netflix, Uber, Starbucks, TikTok 등의 기업에서도 Next.js의 ISR을 활용
   • 서버 부하 감소와 콘텐츠 최신화 균형 유지

3. ISR 구현 방식

3.1 Pages Router 방식

• getStaticProps와 revalidate를 이용한 시간 기반 ISR 설정
• pages/api/revalidate.ts를 통한 온디맨드 ISR API 구현
• res.revalidate('/path') 호출로 특정 경로 갱신 가능

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.query.secret !== process.env.REVALIDATE_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }
  try {
    await res.revalidate(req.query.path as string);
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).json({ message: 'Error revalidating' });
  }
}

3.2 App Router 방식

• revalidatePath 및 revalidateTag 사용
• Server Action 또는 Route Handler를 통해 재생성 트리거

'use server';

import { revalidatePath } from 'next/cache';

export async function createPost() {
  // 게시글 생성 로직 후
  revalidatePath('/posts');
}

3.3 외부 백엔드 서버와의 연동(Ex. NestJS에서 ISR 트리거)

Next.js가 단독으로 동작하는 것이 아니라, 별도의 백엔드 API 서버와 연동되는 환경에서도 ISR을 활용할 수 있습니다.

예를 들어, 백엔드에서 콘텐츠가 변경될 때 Next.js에 revalidate 요청을 보내도록 설정할 수 있습니다.

// NestJS 서비스에서 Next.js ISR API 호출 예시
import axios from 'axios';

async function triggerRevalidate(path: string) {
  const secret = process.env.REVALIDATE_TOKEN;
  const url = `https://my-next-app.com/api/revalidate?secret=${secret}&path=${encodeURIComponent(path)}`;
  await axios.get(url);
}

3.4 Serverless 및 Webhook을 통한 ISR 활용

온디맨드 ISR은 서버리스 함수(AWS Lambda, Vercel Functions)나 웹훅(Webhook)을 통해서도 자주 활용됩니다.

특히 CMS나 외부 서비스와의 통합이 필요한 경우 웹훅을 사용하면 효율적입니다.

 

3.4.1 Webhook을 이용한 ISR 트리거

CMS(예: Contentful, Sanity, Strapi)에서 콘텐츠가 변경되었을 때, Next.js의 ISR API를 호출하는 웹훅을 설정할 수 있습니다.

// Webhook 엔드포인트를 제공하는 Next.js API Route
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.headers['x-cms-secret'] !== process.env.WEBHOOK_SECRET) {
    return res.status(401).json({ message: 'Invalid secret' });
  }
  try {
    await res.revalidate('/blog'); // 변경된 콘텐츠의 경로 재생성
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).json({ message: 'Error revalidating' });
  }
}

 

3.4.2 Serverless 환경에서 ISR 트리거

서버리스 환경(AWS Lambda, Vercel Serverless Functions)에서도 온디맨드 ISR을 활용할 수 있습니다.

// AWS Lambda에서 Next.js ISR API 호출
const axios = require('axios');

exports.handler = async (event) => {
  const secret = process.env.REVALIDATE_TOKEN;
  const url = `https://my-next-app.com/api/revalidate?secret=${secret}&path=/news`;
  
  try {
    await axios.get(url);
    return {
      statusCode: 200,
      body: JSON.stringify({ message: 'Revalidation triggered' }),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'Error triggering revalidation' }),
    };
  }
};

이를 활용하면 정적 페이지를 지속적으로 최신 상태로 유지하면서도 서버 부하를 최소화할 수 있습니다.

4. 온디맨드 ISR의 효과

1. 빠른 응답 속도(TTFB 감소)
   • 정적 페이지 캐싱으로 서버 렌더링 없이 즉시 응답 가능
   • CDN과 결합 시 글로벌 사용자 경험 최적화
2. 비용 절감 및 서버 부하 감소
   • SSR 대비 CPU와 DB 쿼리 부담 감소
   • 전체 사이트 재빌드가 불필요하여 CI/CD 리소스 절감
3. SEO 및 사용자 경험 개선
   • 최신 콘텐츠 유지로 검색엔진 최적화(SEO)에 유리
   • 변경 사항이 즉시 반영되어 사용자 만족도 향상

5. 도입 시 고려할 점

• 캐시 일관성 관리: 여러 서버 인스턴스가 캐시를 공유하지 않으면 불일치 발생 가능
• 재생성 빈도 최적화: 불필요한 갱신을 최소화하여 성능 유지
• CDN 캐시 무효화 전략: Edge 캐시를 활용한 빠른 배포 및 갱신 계획 필요

참고 자료

• 워싱턴 포스트의 ISR 도입 사례 : 폭증하는 트래픽과 실시간 데이터에 대응하기 위해 ISR을 활용하여 “정적 사이트의 스케일성과 동적 사이트의 데이터 최신화”를 동시에 달성한 배경과 효과를 담고 있습니다.
• 카카오엔터테인먼트 FE 기술 블로그 : 대량 페이지를 가진 사이트에서 ISR로 빌드 시간을 단축한 예시나 ISR 동작 흐름 다이어그램 등이 있어 ISR 이해에 도움이 됩니다.
• Kontent.ai 기술 블로그 : 뉴스 사이트의 사례로 시간 기반 vs 온디맨드 ISR의 장단점을 분석합니다. 오래된 기사까지 짧은 주기로 revalidate 할 때 발생하는 리소스 낭비 문제를 온디맨드 ISR로 어떻게 개선할 수 있는지, 그리고 완전히 온디맨드에 의존하기보다 시간 기반 ISR과 병행하여 효율과 일관성을 모두 확보하는 전략을 제안합니다
• Vercel ISR
• ISR on Vercel is now faster and more cost-efficient - Vercel