Next.js ISR vs SSG 어떤 걸 선택해야 하나요

블로그 성격이라면 ISR을 추천합니다. 이유를 설명드릴게요.

SSG (Static Site Generation)

• 빌드 시점에 모든 페이지를 미리 생성


• 새 글 추가 → 전체 재빌드 필요 (200개면 괜찮지만 500개 넘으면 빌드 시간 증가)


• 글 수정 시에도 재빌드 필요

ISR (Incremental Static Regeneration)

• 빌드 시 생성 + 요청 시 백그라운드에서 재생성


• 새 글 추가해도 재빌드 불필요


• revalidate 시간 동안은 캐시된 페이지 제공 → 빠름

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // 1시간마다 재검증

// 또는 on-demand revalidation
// POST /api/revalidate 에서
import { revalidatePath } from 'next/cache';
revalidatePath('/blog/' + slug);

블로그처럼 주 2-3회 업데이트되는 경우 revalidate: 3600 (1시간) 정도면 적당합니다. 글 작성/수정 시 on-demand revalidation을 걸어두면 즉시 반영도 가능합니다.

감사합니다! 그런데 on-demand revalidation이랑 일반 revalidate를 같이 쓸 수 있나요? 글 수정할 때는 즉시 반영되고, 평소에는 캐시를 쓰고 싶습니다.

네, 같이 쓸 수 있습니다! 일반적인 패턴은 이렇습니다:

// 1. 페이지에 revalidate 설정 (fallback)
export const revalidate = 3600;

// 2. CMS 웹훅이나 API 라우트에서 on-demand
// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
import { NextRequest } from 'next/server';

export async function POST(req: NextRequest) {
  const { slug, secret } = await req.json();
  if (secret !== process.env.REVALIDATE_SECRET) {
    return Response.json({ error: 'Invalid' }, { status: 401 });
  }
  revalidatePath('/blog/' + slug);
  return Response.json({ revalidated: true });
}

글 수정 시 이 API를 호출하면 즉시 반영되고, 호출하지 않아도 1시간 후엔 자동으로 갱신됩니다. 두 방식이 보완적으로 동작해요!

완벽합니다! 이대로 구현해보겠습니다. 정말 감사합니다! 🚀