M

MLOG

日本語

Next.jsのISR（インクリメンタル静的再生成）の力を解き放ち、パフォーマンスを犠牲にすることなくリアルタイムの更新を提供する、グローバルなオーディエンス向けの動的な静的サイトを構築します。

Next.jsのISR（インクリメンタル静的再生成）：グローバルなオーディエンスに向けた動的な静的サイト

進化し続けるウェブ開発の世界において、コンテンツを新鮮で動的に保ちながら、超高速のユーザーエクスペリエンスを提供することは最も重要な課題です。従来の静的サイト生成（SSG）は信じられないほどのパフォーマンスを提供しますが、頻繁に更新されるコンテンツへの対応に苦慮することがよくあります。逆に、サーバーサイドレンダリング（SSR）は動的性を提供しますが、遅延を生じさせる可能性があります。主要なReactフレームワークであるNext.jsは、その革新的な機能であるインクリメンタル静的再生成（ISR）によって、このギャップを見事に埋めます。この強力なメカニズムにより、開発者は動的に感じられる静的サイトを構築でき、グローバルなオーディエンスに両方の世界の長所を提供します。

動的な静的サイトの必要性を理解する

何十年もの間、ウェブサイトは純粋な静的サイトと純粋な動的サイトの間で運営されてきました。静的サイト生成（SSG）は、ビルド時にすべてのページを事前にレンダリングするため、非常に高速な読み込み時間と優れたSEOを実現します。しかし、ニュース記事、eコマースの商品更新、ソーシャルメディアのフィードなど、頻繁に変更されるコンテンツの場合、SSGではコンテンツが更新されるたびにサイト全体の再ビルドと再デプロイが必要となり、これは多くの場合、非現実的で時間がかかります。この制限により、SSGはリアルタイムまたはほぼリアルタイムのコンテンツニーズを持つ多くの実世界のアプリケーションには適していません。

一方、サーバーサイドレンダリング（SSR）は、各リクエストに対してサーバー上でページをレンダリングします。これにより、コンテンツは常に最新の状態に保たれますが、サーバーの負荷が増え、サーバーがリクエストを処理する際に初回ページ読み込みが遅くなる可能性があります。さまざまな地理的な場所やネットワーク条件に広がるグローバルなオーディエンスにとって、SSRはパフォーマンスの格差を悪化させる可能性があります。

多くの現代的なウェブアプリケーションにとって理想的なシナリオは、静的ファイルのパフォーマンス上の利点を活用しつつ、最新の情報が利用可能になったときにそれを反映できるサイトです。これこそが、Next.jsのインクリメンタル静的再生成が輝く場所です。

インクリメンタル静的再生成（ISR）とは？

インクリメンタル静的再生成（ISR）は、Next.jsの機能であり、サイトがビルドおよびデプロイされた後で静的ページを更新することができます。コンテンツの変更を反映するために完全な再ビルドが必要な従来のSSGとは異なり、ISRを使用すると、ユーザーエクスペリエンスを中断したり、サイト全体の再デプロイを必要とすることなく、個々のページをバックグラウンドで再生成できます。これは、強力な再検証メカニズムによって実現されます。

ページがISRで生成されると、Next.jsは静的なHTMLファイルを提供します。一定期間が経過した後にユーザーがそのページをリクエストすると、Next.jsはバックグラウンドで静かにページを再生成できます。再検証期間後に最初にページをリクエストしたユーザーは古いキャッシュされたバージョンを受け取るかもしれませんが、その後のユーザーは新しく生成された最新のバージョンを受け取ります。このプロセスにより、サイトはほとんどのユーザーにとってパフォーマンスを維持しながら、徐々にコンテンツを更新できます。

ISRの仕組み：再検証メカニズム

ISRの核心は、その再検証（revalidation）機能にあります。ISRでページを定義する際、revalidate時間（秒単位）を指定します。この時間は、Next.jsがその特定のページをバックグラウンドでどれくらいの頻度で再生成を試みるべきかを決定します。

その流れを分解してみましょう：

  1. ビルド時：通常のSSGと同様に、ページはビルド時に静的に生成されます。
  2. 最初のリクエスト：ユーザーがページをリクエストします。Next.jsは静的に生成されたHTMLファイルを提供します。
  3. キャッシュの期限切れ：指定されたrevalidate期間が経過すると、ページのキャッシュは古い（stale）と見なされます。
  4. 後続のリクエスト（古い状態）：キャッシュの期限が切れた後に次にページをリクエストしたユーザーは、*古い*が、まだキャッシュされているバージョンのページを受け取ります。これはパフォーマンスを維持するために重要です。
  5. バックグラウンドでの再検証：同時に、Next.jsはページのバックグラウンドでの再生成をトリガーします。これには、最新のデータの取得とページの再レンダリングが含まれます。
  6. キャッシュの更新：バックグラウンドでの再生成が完了すると、新しく更新されたバージョンのページがキャッシュ内の古いものと置き換えられます。
  7. 次のリクエスト：次にページをリクエストしたユーザーは、新しく生成された最新のバージョンを受け取ります。

この段階的な更新プロセスにより、コンテンツが更新されている間も、ウェブサイトは高い可用性とパフォーマンスを維持できます。

主要な概念：

Next.jsでのISRの実装

Next.jsアプリケーションにISRを実装するのは簡単です。通常、getStaticProps関数内で設定します。

例：頻繁に更新されるブログ投稿

投稿が軽微な修正や新しい情報で更新される可能性のあるブログを考えてみましょう。これらの更新を比較的迅速に反映させたいが、必ずしもすべてのユーザーに対して即座に反映させる必要はありません。

ブログ投稿ページにISRを設定する方法は次のとおりです：

// pages/posts/[slug].js

import { useRouter } from 'next/router'

export async function getStaticPaths() {
  // ビルド時に事前レンダリングするためにすべての投稿スラグをフェッチする
  const posts = await fetch('https://your-api.com/posts').then(res => res.json());

  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: 'blocking', // 必要に応じて true、false、または 'blocking'
  };
}

export async function getStaticProps({ params }) {
  // 現在のスラグに対応する特定の投稿データをフェッチする
  const post = await fetch(`https://your-api.com/posts/${params.slug}`).then(res => res.json());

  return {
    props: {
      post,
    },
    // ISRを有効化：このページを60秒ごとに再検証する
    revalidate: 60, // 秒単位
  };
}

function PostPage({ post }) {
  const router = useRouter();

  // ページがまだ生成されていない場合、これが表示される
  if (router.isFallback) {
    return 
Loading...
;
  }

  return (
    

      
{post.title}

      
{post.content}

      {/* その他の投稿詳細 */}
    

  );
}

export default PostPage;

この例では：

ISRでの`fallback`を理解する

getStaticPathsのfallbackオプションは、ISRを使用する際に重要な役割を果たします：

ISRの場合、fallback: 'blocking'またはfallback: trueが一般的に適切であり、新しい動的ルートをオンデマンドで生成し、その後ISRの恩恵を受けることができます。

グローバルオーディエンスに対するISRの利点

ISRの利点は、グローバルなオーディエンスに対応する場合に特に顕著です：

1. 地域を問わないパフォーマンスの向上

事前にレンダリングされた静的ファイルを提供することにより、ISRはユーザーがどこにいても高速な読み込み時間を体験できるようにします。stale-while-revalidate戦略は、コンテンツの更新中でも、ほとんどのユーザーがキャッシュされた高速なページを受け取ることを意味し、ネットワークの遅延やサーバーの処理時間の影響を最小限に抑えます。これは、インターネットインフラが堅牢でない地域のユーザーとのエンゲージメントを維持するために重要です。

2. SSRのオーバーヘッドなしでほぼリアルタイムのコンテンツ

頻繁に更新する必要があるが、絶対的なリアルタイムの正確性を必要としないコンテンツ（例：株価、ニュースフィード、製品の在庫状況）に対して、ISRは完璧な妥協点を提供します。短い再検証期間（例：30〜60秒）を設定することで、常にSSRを行うことに関連するスケーラビリティやパフォーマンスの懸念なしに、ほぼリアルタイムの更新を実現できます。

3. サーバー負荷とコストの削減

ページは主にCDN（コンテンツデリバリーネットワーク）または静的ファイルホスティングから提供されるため、オリジンサーバーへの負荷は大幅に削減されます。ISRは再検証期間中にのみサーバーサイドの再生成をトリガーするため、ホスティングコストが低くなり、スケーラビリティが向上します。これは、多様なグローバルロケーションからの高トラフィックを経験するアプリケーションにとって大きな利点です。

4. SEOランキングの向上

検索エンジンのクローラーは、高速に読み込まれるウェブサイトを好みます。ISRが静的アセットを迅速かつ効率的に提供する能力は、SEOにプラスに貢献します。さらに、コンテンツを新鮮に保つことで、ISRは検索エンジンが最新の情報をインデックスするのを助け、グローバルオーディエンスにとっての発見可能性を向上させます。

5. コンテンツ管理の簡素化

コンテンツ作成者や管理者は、サイト全体の再ビルドをトリガーすることなくコンテンツを更新できます。コンテンツがCMSで更新され、ISRプロセスによってフェッチされると、次の再検証サイクル後に変更がサイトに反映されます。これにより、コンテンツの公開ワークフローが合理化されます。

ISRをいつ使うべきか（そして使うべきでないか）

ISRは強力なツールですが、他の技術と同様に、適切な文脈で使用するのが最善です。

ISRの理想的なユースケース：

ISRが最適でない可能性のある場合：

高度なISR戦略と考慮事項

ISRの基本的な実装は簡単ですが、特にグローバルなオーディエンス向けにその使用を最適化するための高度な戦略と考慮事項があります。

1. キャッシュ無効化戦略（時間ベースを超えて）

時間ベースの再検証がデフォルトで最も一般的なアプローチですが、Next.jsはプログラムで再検証をトリガーする方法を提供しています。これは、イベントが発生した直後（例：CMSのWebhookが更新をトリガー）にコンテンツを更新したい場合に非常に価値があります。

サーバーレス関数またはAPIルート内でres.revalidate(path)関数を使用して、特定のページを手動で再検証できます。

// pages/api/revalidate.js

export default async function handler(req, res) {
  // 認可されたリクエストのみが再検証できるように、秘密のトークンをチェックする
  if (req.query.secret !== process.env.REVALIDATE_SECRET) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    // 特定の投稿ページを再検証する
    await res.revalidate('/posts/my-updated-post');
    return res.json({ revalidated: true });
  } catch (err) {
    // エラーが発生した場合、Next.jsは古いページを提供し続ける
    return res.status(500).send('Error revalidating');
  }
}

このAPIルートは、/posts/my-updated-postに関連するコンテンツが変更されるたびに、CMSや他のサービスから呼び出すことができます。

2. 動的ルートと`fallback`の実践

適切なfallbackオプションを選択することは重要です：

3. 適切な再検証時間の選択

revalidate時間はバランスを取る必要があります：

この値を設定する際には、オーディエンスの古いコンテンツに対する許容度とデータ更新の頻度を考慮してください。

4. ヘッドレスCMSとの統合

ISRは、Contentful、Strapi、Sanity、またはWordPress（REST APIを使用）のようなヘッドレスコンテンツ管理システム（CMS）と非常にうまく連携します。ヘッドレスCMSは、コンテンツが公開または更新されたときにWebhookをトリガーでき、それがNext.js APIルート（上記参照）を呼び出して影響を受けるページを再検証できます。これにより、動的な静的コンテンツのための堅牢で自動化されたワークフローが作成されます。

5. CDNのキャッシング動作

Next.js ISRはCDNと連携して動作します。ページが生成されると、通常はCDNから提供されます。revalidate時間は、CDNのエッジサーバーがキャッシュを古いと見なすタイミングに影響します。VercelやNetlifyのようなマネージドプラットフォームを使用している場合、彼らはこの統合の多くをシームレスに処理します。カスタムCDN設定の場合、CDNがNext.jsのキャッシングヘッダーを尊重するように設定されていることを確認してください。

グローバルな例とベストプラクティス

ISRがグローバルな文脈でどのように適用できるかを見てみましょう：

主要なグローバルベストプラクティス：

よくある落とし穴とその回避方法

ISRは強力ですが、慎重に実装しないと予期しない動作につながる可能性があります：

結論：動的な静的コンテンツの未来

Next.jsのインクリメンタル静的再生成は、現代的で高性能なウェブアプリケーションを構築する上での大きな進歩を表しています。これにより、開発者は静的サイトの速度とスケーラビリティを備えた、動的で最新のコンテンツを提供することができ、多様なニーズと期待を持つグローバルなオーディエンスにとって理想的なソリューションとなります。

ISRの仕組みとその利点を理解することで、高速であるだけでなく、変化する情報にインテリジェントに応答するウェブサイトを作成できます。eコマースプラットフォーム、ニュースポータル、または頻繁に更新されるコンテンツを持つサイトを構築している場合でも、ISRを採用することで、時代の先を行き、世界中のユーザーを喜ばせ、開発およびホスティングリソースを最適化することができます。

ウェブがより速い読み込み時間とより動的なコンテンツを要求し続ける中で、インクリメンタル静的再生成は、次世代のウェブサイトを構築するための重要な戦略として際立っています。その機能を探索し、さまざまな再検証時間を試し、グローバルなプロジェクトのために動的な静的サイトの真の可能性を解き放ちましょう。