FrontCreation Logo

TECH BLOG

Next.js+ISRを最短で試す

nextjs
react

2025.08.17

Next.jsの強力なレンダリング手法の一つであるISR（Incremental Static Regeneration）。SSGの高速表示とSSRのデータ鮮度を両立できるこの機能を、「とにかく早く試してみたい！」という方向けに、最短でその動きを確認する手順をまとめました。

この記事では、簡単な時刻表示アプリケーションを作成し、ISRがどのように動作するのかを体感します。

ステップ1：Next.jsプロジェクトの作成

まずは、Next.jsのプロジェクトを新規に作成します。ターミナルで以下のコマンドを実行してください。

npx create-next-app@latest next-isr-demo

いくつかの質問が表示されますが、今回はすべてデフォルトのままでOKです。Enterキーを連打して進めましょう。

プロジェクトが作成されたら、そのディレクトリに移動します。

cd next-isr-demo

ステップ2：ISRを実装したページを作成

次に、ISRを適用したページを作成します。appディレクトリの中にisr-pageというフォルダを作成し、その中にpage.tsxというファイルを作成してください。

そして、以下のコードをapp/isr-page/page.tsxに貼り付けます。

export const revalidate = 10; // 10秒ごとに再生成
 
async function getStaticTime() {
  // この関数はサーバーサイドでのみ実行される
  const staticTime = new Date().toLocaleTimeString();
  console.log(`[Server] Static Time: ${staticTime}`);
  return staticTime;
}
 
export default async function IsrPage() {
  const staticTime = await getStaticTime();
 
  const dynamicTime = new Date().toLocaleTimeString();
 
  return (
    <div style={{ textAlign: 'center', fontFamily: 'sans-serif', padding: '50px' }}>
      <h1>ISRデモページ</h1>
      <p style={{ fontSize: '24px', fontWeight: 'bold' }}>
        ビルド（または再生成）された時刻: {staticTime}
      </p>
      <p style={{ fontSize: '18px', color: '#666' }}>
        （↑この時間は10秒ごとに更新されます）
      </p>
      <hr style={{ margin: '40px 0' }} />
      <p style={{ fontSize: '24px', fontWeight: 'bold' }}>
        アクセスした瞬間の時刻: {dynamicTime}
      </p>
      <p style={{ fontSize: '18px', color: '#666' }}>
        （↑この時間はリロードのたびに更新されます）
      </p>
    </div>
  );
}

コードのポイント

  • export const revalidate = 10;
    • これがISRを有効にするための重要な設定です。このページは10秒ごとに再生成されるようになります。
  • getStaticTime()
    • この関数はビルド時、または再生成時にサーバーサイドで実行されます。ここで取得した時刻が静的に埋め込まれます。
  • dynamicTime
    • こちらはリクエストごとにサーバーでレンダリングされるため、アクセスするたびに現在の時刻に更新されます。SSRの動作です。

ステップ3：本番ビルドとサーバー起動

ISRは開発モード（next dev）では動作が確認しづらい（リクエストごとに実行されるため）ので、本番モードで確認します。

まず、プロジェクトをビルドします。

npm run build

ビルドが完了したら、本番サーバーを起動します。

npm run start

サーバーが起動したら、ブラウザで http://localhost:3000/isr-page にアクセスしてください。

ステップ4：ISRの動作を確認

ページにアクセスすると、「ビルド（または再生成）された時刻」と「アクセスした瞬間の時刻」が表示されます。

  1. 最初にアクセスしたとき、2つの時刻はほぼ同じはずです。
  2. ページをリロードせずに10秒以上待ちます。
  3. その後、ページをリロードしてみてください。

すると、「ビルド（または再生成）された時刻」が更新されていることが確認できるはずです。これがISRの力です。指定した時間（10秒）が経過した後の最初のアクセスをトリガーに、サーバーのバックグラウンドでページが再生成され、次からのアクセスでは新しいページが表示されるようになります。

ターミナル（npm run startを実行している方）を見ると、再生成時に[Server] Static Time: ...というログが出力されるのも確認できます。

まとめ

以上が、Next.jsのISR機能を最短で試す手順です。

revalidateの秒数を変えたり、外部APIからデータを取得するように変更したりして、ぜひISRの挙動をさらに探求してみてください。この機能は、パフォーマンスとリアルタイム性のバランスを取る上で非常に強力なツールとなります。

一覧へ戻る