점진적 정적 재생성(ISR)

ISR이란 무엇인가요

ISR의 작동 방식

revalidate로 ISR 활성화하기

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

동적 경로에서 ISR 사용하기

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

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

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

주문형 재검증

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

알 수 없는 경로의 대체 동작

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

오래된 데이터를 제공하면서 재검증하기

ISR, SSR, 정적 렌더링 비교

ISR 사용 시 주의 사항

페이지 라우터의 ISR(getStaticProps)

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

ISR 확인하기

빠른 확인

복습