React Academy · レッスン

Incremental Static Regeneration（ISR）

Q: 「Incremental Static Regeneration（ISR）」で何を学びますか？

完全な再デプロイを行わず、スケジュールまたはオンデマンドで静的ページを再生成します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

完全な再デプロイを行わず、スケジュールまたはオンデマンドで静的ページを再生成します。

「Incremental Static Regeneration（ISR）」はCoddyKit上の無料React Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ISRとは

Incremental Static Regenerationは、あらかじめ生成した静的ページをNext.jsが配信し、指定した間隔が経過した後にバックグラウンドで再生成する仕組みです。静的HTMLの速度と、サーバーレンダリングの鮮度を両立できます。

ISRの仕組み

最初のリクエストでは、Next.jsがキャッシュされた静的HTMLを配信します。再検証の期間が過ぎると、次のリクエストがバックグラウンドでの再生成を開始します。再生成が完了すると、それ以降のリクエストには新しいページが配信されます。

revalidateによるISRの有効化

revalidate定数をエクスポートするか、Server Componentのページ内にあるfetch呼び出しにnext: { revalidate: N }を設定します。

// 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

generateStaticParamsとrevalidateを組み合わせると、よくアクセスされる動的ページをあらかじめ生成し、スケジュールに従って再検証できます。

// 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} />;
}

オンデマンド再検証

Server Action、API route、またはwebhook handlerからrevalidatePath()やrevalidateTag()を呼び出すと、特定のページをすぐに再生成できます。間隔が経過するまで待つ必要はありません。

// 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 });
}

未知のパスに対するフォールバック動作

generateStaticParamsに含まれない動的ルートでは、dynamicParams = true（デフォルト）を設定するとオンデマンドでレンダリングしてキャッシュします。falseを設定すると404を返します。

// 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

Stale-While-Revalidate

再生成中、Next.jsは新しいバージョンが準備できるまで古いページを配信します。ユーザーは常にレスポンスを受け取れるため、新しいデータを待つ必要はありません。

ISRとSSRと静的生成の違い

静的生成：1回だけビルドされ、変更されません。ISR：あらかじめ生成され、スケジュールに従って再生成されます。SSR：リクエストごとに最新の内容をレンダリングします。ときどき変更されるものの、静的配信の速度にもメリットがあるコンテンツにはISRを選択してください。

ISRの注意点

ISRは、パーソナライズされたコンテンツ（ユーザー固有のデータ）や、リアルタイム性が必要なデータには適していません。そのような場合は、no-storeのfetchとSSRを使用してください。

Pages RouterでのISR（getStaticProps）

Pages Routerでは、ISRはgetStaticPropsと、戻り値に含めるrevalidateを使用します。概念は同じですが、APIが異なります。

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

ISRの確認

x-nextjs-cacheレスポンスヘッダーを確認してください。HITはキャッシュから配信されたこと、MISSは新しくレンダリングされたこと、STALEは再検証中に古い内容を配信していることを示します。

理解度チェック

再検証の期間がちょうど切れたISRページをユーザーがリクエストすると、何が起こりますか。

まとめ

ISRはページをあらかじめ生成し、export const revalidate = NによってN秒ごとに再検証します。よくアクセスされる動的ルートにはgenerateStaticParamsを使用し、ミューテーション後すぐに最新状態を反映するにはrevalidatePath/Tagによるオンデマンド再検証を使用します。

よくある質問

「Incremental Static Regeneration（ISR）」レッスンは無料ですか？

はい。「Incremental Static Regeneration（ISR）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Incremental Static Regeneration（ISR）」で何を学びますか？

完全な再デプロイを行わず、スケジュールまたはオンデマンドで静的ページを再生成します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Incremental Static Regeneration（ISR）」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る