Vercel에서 ISR revalidation 설정

Introduction

ISR(Incremental Static Regeneration)은 Next.js의 강력한 기능으로, 정적 페이지를 동적으로 업데이트할 수 있습니다. Vercel 환경에서 ISR을 설정하고 최적화하는 방법을 알아보겠습니다.

Environment

• Vercel 프로젝트 (Next.js 14+)
• Node.js 18+
• PostgreSQL 데이터베이스
• Redis (캐싱용)

Problem

ISR 설정이 올바르지 않으면 페이지가 예상대로 업데이트되지 않습니다:

// 페이지가 업데이트되지 않는 문제
export async function getStaticProps() {
  const data = await fetchData();
  
  return {
    props: { data },
    revalidate: 60 // 60초마다 재검증
  };
}

// 하지만 실제로는 페이지가 업데이트되지 않음

Analysis

ISR의 동작 원리:

1. 빌드 시 정적 페이지 생성: 첫 빌드 시 페이지가 생성됨
2. 시간 기반 재검증: 설정된 시간 간격으로 재검증
3. 요청 기반 재검증: on-demand 재검증 가능
4. 스태리 컨텐츠 문제: 오래된 데이터가 표시될 수 있음

Solution

1. 기본 ISR 설정

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());
  
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default async function BlogPost({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`);
  const data = await post.json();
  
  return (
    

      
{data.title}
      
{data.content}
    
  );
}

export const revalidate = 60; // 60초마다 재검증

2. On-Demand Revalidation

// app/api/revalidate/route.js
import { NextResponse } from 'next/server';
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request) {
  const { path, tag, secret } = await request.json();
  
  // 시크릿 키 확인
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
  }
  
  try {
    if (tag) {
      revalidateTag(tag);
      return NextResponse.json({ revalidated: true, type: 'tag', tag });
    }
    
    if (path) {
      revalidatePath(path);
      return NextResponse.json({ revalidated: true, type: 'path', path });
    }
    
    return NextResponse.json({ error: 'Path or tag required' }, { status: 400 });
  } catch (error) {
    return NextResponse.json({ error: 'Revalidation failed' }, { status: 500 });
  }
}

3. 태그 기반 재검증

// app/blog/page.js
import { Suspense } from 'react';

async function BlogList() {
  const posts = await fetch('https://api.example.com/posts', {
    next: { tags: ['blog'] } // 태그 설정
  }).then(res => res.json());
  
  return (
    

      {posts.map(post => (
        

          {post.title}
        
      ))}
    
  );
}

export default function BlogPage() {
  return (
    

      
Blog
      Loading...