Cache戦略

🧠 Next.jsのキャッシュ戦略

Next.jsは、ウェブアプリケーションのパフォーマンスを最大限に引き出すために、様々なキャッシュ戦略を組み合わせています。これらの戦略は、データの取得からレンダリング、そして配信に至るまで、アプリケーションの各レイヤーで機能します。

fetch APIを使用することで、Next.jsはサーバーサイドで取得したデータを自動的にキャッシュします。これにより、同じリクエストが複数回発生した場合でも、ネットワークリクエストを再度行わずにキャッシュからデータを取得できるため、パフォーマンスが大幅に向上します。

デフォルトのキャッシュ: fetchを使用すると、リクエストは自動的にキャッシュされます。
キャッシュの制御:
- 再検証（Revalidation）: 一定時間経過後にデータを再取得するよう設定できます。これは、頻繁に更新される情報（例：ニュース記事）に適しています。
- force-cache: データを強制的にキャッシュから取得します。
- no-store: データをキャッシュせず、常に新しいデータを取得します。

// 5分ごとにデータを再検証する例
const res = await fetch('https://...', { next: { revalidate: 300 } });
const data = await res.json();

Reactのサーバーコンポーネントは、サーバー上でレンダリングされた後、その結果がキャッシュされます。これにより、コンポーネントが再レンダリングされる際に、高価な計算やデータ取得を再度実行する必要がなくなります。

自動キャッシュ: next devで開発サーバーを再起動するか、next buildを実行すると、サーバーコンポーネントのキャッシュがクリアされます。
キャッシュの無効化:
- 'use client'ディレクティブをコンポーネントに追加すると、そのコンポーネントはクライアントコンポーネントになり、このキャッシュ戦略の対象外となります。
- 動的関数（headers, cookies, useSearchParamsなど）を使用すると、そのコンポーネントは動的にレンダリングされ、キャッシュされなくなります。

Next.jsは、ルーターキャッシュという独自のキャッシュシステムを導入しています。これにより、ユーザーがすでに訪れたページを再度表示する際に、ページ全体を再フェッチすることなく、高速に遷移できます。

動作: ユーザーがリンクをクリックすると、Next.jsはバックグラウンドで新しいページのデータをプリフェッチし、キャッシュに保存します。ユーザーがそのページに遷移すると、キャッシュから瞬時に読み込まれるため、ナビゲーションが非常にスムーズになります。
メリット:
- 高速なナビゲーション: 既に訪れたページへの戻る/進む操作が瞬時に完了します。
- オフライン対応: 一部のページはオフラインでも表示可能です。

Next.jsは、ビルドプロセスで静的なアセット（画像、CSS、JavaScriptファイルなど）に一意のハッシュ値を付与します。

ブラウザキャッシュ: ブラウザはこれらのアセットをキャッシュし、次回アクセス時にサーバーへのリクエストを省略します。
CDN（コンテンツ配信ネットワーク）: Vercelなどのホスティングサービスを使用すると、静的アセットが世界中のCDNに自動的にキャッシュされ、ユーザーに地理的に最も近いサーバーから配信されます。

これらのキャッシュ戦略は、ユーザーに高速なウェブ体験を提供するために連携して機能します。開発者は、アプリケーションの要件に応じて、これらの戦略を適切に制御することが重要です。