SSG로 만든 페이지가 글을 수정해도 반영되지 않는 이유는 무엇인가요?

빌드 시점          이후 데이터 변경
    │                     │
    ▼                     ▼
HTML 생성 → CDN 배포   DB/CMS 수정
                │
                ▼
         사용자 요청 → 기존 HTML 그대로 응답
                         (변경 내용 없음)

// app/posts/[slug]/page.tsx
// cache 설정 없이 fetch — 기본값은 SSG(force-cache)입니다.
// 빌드 이후 CMS에서 글을 수정해도 재배포 전까지 반영되지 않습니다.

export default async function PostPage({ params }) {
  const { slug } = await params;

  // 기본 cache: 'force-cache' — 빌드 시점 응답을 영구적으로 캐싱합니다.
  const post = await fetch(`https://api.example.com/posts/${slug}`).then(r => r.json());

  return <article>{post.content}</article>;
}

// generateStaticParams만 있고 revalidate가 없는 경우
// 빌드 시 생성된 HTML이 재배포 전까지 고정됩니다.

export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map((p) => ({ slug: p.slug }));
}
// CMS에서 글을 수정해도 다음 배포 때까지 변경 내용이 보이지 않습니다.

// app/posts/[slug]/page.tsx

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

export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const { slug } = await params;
  const post = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 60 }, // fetch 단위로도 설정 가능
  }).then(r => r.json());

  return <article>{post.content}</article>;
}
// 글 수정 후 최대 60초 안에 변경 내용이 반영됩니다.

// app/api/revalidate/route.ts
// CMS에서 글 저장 시 이 API를 웹훅으로 호출합니다.

import { revalidatePath, revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const secret = req.nextUrl.searchParams.get('secret');

  // 인증 토큰으로 무단 호출 방지
  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Invalid secret' }, { status: 401 });
  }

  const { slug } = await req.json();

  // 특정 경로만 재검증
  revalidatePath(`/posts/${slug}`);

  // 또는 태그 단위로 재검증 (같은 태그를 쓰는 모든 fetch를 무효화)
  // revalidateTag('posts');

  return NextResponse.json({ revalidated: true });
}

// fetch에 태그를 달아두면 revalidateTag로 한 번에 무효화할 수 있습니다.

const post = await fetch(`https://api.example.com/posts/${slug}`, {
  next: { tags: ['posts', `post-${slug}`] },
}).then(r => r.json());

# CMS 웹훅 설정 예시 — 글 저장 시 아래 URL로 POST 요청을 보냅니다.
POST https://my-site.com/api/revalidate?secret=MY_SECRET
Body: { "slug": "react-hooks-guide" }

// app/posts/[slug]/page.tsx
// cache: 'no-store' 또는 export const dynamic = 'force-dynamic'

export const dynamic = 'force-dynamic'; // 항상 서버에서 렌더링

export default async function PostPage({ params }) {
  const { slug } = await params;

  const post = await fetch(`https://api.example.com/posts/${slug}`, {
    cache: 'no-store', // 캐시 사용 안 함 — 매 요청마다 새로 fetch
  }).then(r => r.json());

  return <article>{post.content}</article>;
}
// 항상 최신 내용을 보여주지만 CDN 캐시를 사용할 수 없어 응답이 느려집니다.

# 로컬에서 직접 재빌드
git add _articles/updated-post.md
git commit -m "아티클 수정: 제목"
git push origin main
# Vercel이 push를 감지해 자동으로 재빌드 및 배포