Next.jsのIncremental Static Regeneration（ISR）完全ガイド
📅
| 方式 | 描画するタイミング | SEO | 速度 | 適した用途 |
|---|---|---|---|---|
| CSR | クライアントで実行するとき | 不利 | 中程度 | ログイン後の個別UIなど |
| SSR | 要求ごとにサーバーで描画 | 有利 | 遅い | 頻繁に変わるデータ |
| SSG | ビルド時 | 有利 | 速い | ブログなどの静的コンテンツ |
| ISR | ビルド後と一定間隔 | 有利 | 速い | 更新間隔のあるコンテンツ |
generateStaticParamsとrevalidateを組み合わせて使います。
まずgetStaticPropsで、静的ページを生成するパラメーターの一覧を定義します。
たとえば記事IDの配列から、各記事のページを生成できます。
続いてrevalidateで、ページを再生成する間隔を秒単位で指定します。
指定した時間に応じ、バックグラウンドで再生成されます。export const revalidate = 60; // 60초마다 페이지를 재생성
export const dynamicParams = true; // 동적 파라미터를 사용
export async function generateStaticParams() {
const posts = await fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json())
return posts.map((post) => ({
id: String(post.id), // id를 문자열로 변환
}))
}
const PostPage = async ({ params }: { params: Promise<{ id: string }> }) => {
const { id } = await params;
// const additionalData = await fetchAdditionalData(id); // 추가 데이터 fetch
return (
<div>
{/* <h1>{additionalData.title}</h1> 추가 데이터의 제목 표시
<p>{additionalData.body}</p> 추가 데이터의 본문 표시 */}
<p>게시물 ID: {id}</p> {/* 게시물 ID 표시 */}
</div>
)
}
export default PostPage;npm run buildGenerating static pages (0/20)のようなメッセージが表示されます。
これはISRを使ってページを生成していることを示します。
ページ数はgenerateStaticParamsの戻り値によって変わります。
20件ならGenerating static pages (0/20)と表示され、静的生成が進んでいることを確認できます。
posts/1のようなURLへアクセスできます。
URLはgenerateStaticParamsが返す記事IDで決まります。
posts/1へアクセスすると、最初の記事の内容を確認できます。import { revalidateTag } from 'next/cache'
export async function POST() {
revalidateTag('posts') // 'posts' 태그를 가진 모든 캐시 무효화
return new Response('OK')
}import { unstable_cache } from 'next/cache'
const getData = unstable_cache(async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts')
return res.json()
}, ['posts'], { revalidate: 30 })revalidateを動的に設定できるでしょうか。