Next.js でのキャッシュは時間を節約するだけではなく、冗長なネットワーク リクエストを削減し、データを最新の状態に保ち、アプリをロックスターのように実行できるようにすることを目的としています。
データを長期間キャッシュしておきたい場合でも、オンデマンドで更新したい場合でも、Next.js は必要なツールをすべて提供します。この記事では、Next.js

Next.js はフェッチ API を拡張して、キャッシュに関してスーパーパワーを提供します。 cache: 'no-store' や cache: 'force-cache' のような単純なフェッチ オプションを使用すると、データをいつどのようにキャッシュするかを簡単に制御できます。

キャッシュを使用して常に最新の状態: 'no-store' (unstable_noStore() と同等)

毎回新しいデータが必要ですか? cache: 'no-store' が最適です。このフェッチ オプションはキャッシュを完全にスキップし、リクエストごとに最新のデータを取得します。リアルタイムの精度が必要な場合に最適です。昨日のフェッチの残り物は許可されません。

注: サーバー コンポーネントのキャッシュをスキップしたい場合は、unstable_noStore() を使用することもできます。構文は後で変更される可能性があるため、安定性のために cache: 'no-store' を使用してください。

キャッシュによるデータの再利用: 'force-cache' (unstable_cache() と同等)

一方、キャッシュされたデータの使用に問題がない場合 (頻繁に変更されない静的コンテンツを考えてください)、cache: 'force-cache' を使用してください。将来の使用のために応答を保存し、冗長なネットワーク リクエストをスキップします。

注: unstable_cache() もデータをキャッシュしますが、将来の予期せぬ事態を回避する場合は、安定した cache: 'force-cache' を使用する方が信頼性が高くなります。

再検証で最新の状態を保つ

特定の時間が経過した場合やイベントによってトリガーされた場合など、キャッシュされたデータの更新が必要になる場合があります。幸いなことに、Next.js を使用すると、キャッシュされたデータをいくつかの方法で再検証できます。

時間とともに再検証: next.revalidate

データを定期的に (1 時間ごと、1 日ごとなど) 更新する必要がある場合は、フェッチ リクエストの next.revalidate オプションを使用して再検証期間を設定できます。指定した時間の経過後に最新のデータを取得し、残りの時間はキャッシュされたままになります。

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

タグを使用したオンデマンド再検証: revalidateTag()

さて、フォームの送信や新しいブログ投稿の公開など、何か重要なことが起こったときに、キャッシュされたデータの特定のビットを更新するように Next.js に指示できると想像してください。キャッシュされたデータにタグを割り当て、必要に応じてそれらのタグを再検証できます。

これにより、次にスケジュールされた再検証を待たずに、オンデマンドでキャッシュの一部を手動で更新できます。

不安定なメソッドの使用

冒険好きな人は、unstable_noStore() メソッドと unstable_cache() メソッドをサーバー コンポーネントで直接使用して、キャッシュ動作を管理することもできます。これらは何らかの理由で「不安定」であるため、将来変更される可能性がある (または、これを読んでいる時点で変更されている可能性がある) ことに注意してください。

または、キャッシュに興味がある場合は、unstable_cache() の使用方法を次に示します:

プロペラの穴あけを省略

これが巧妙なトリックです: 複数のコンポーネント (レイアウト、ページ、一部の内部コンポーネントなど) にまたがって同じデータをフェッチしている場合は、最初にデータをフェッチして下に渡すか、またはフェッチする必要があるかについてストレスを感じないでください。複数のコンポーネント上でそのデータを複数回リクエストすると、パフォーマンスが低下します。 Next.js は、サーバー レンダリング中にフェッチ リクエストを自動的にメモ化します。つまり、同じデータを複数回フェッチする場合でも、ネットワークにアクセスするのは 1 回だけで、その結果を複数のコンポーネントで共有するだけで十分賢明です。

まとめ

Next.js は、cache: 'no-store' や cache: 'force-cache' などのフェッチ API オプションを使用するかどうかに関係なく、キャッシュを効果的に管理するために必要なすべてのツールを提供します。 ]、またはより実験的なunstable_noStore()およびunstable_cache()メソッド。 next.revalidate や revalidateTag などの再検証戦略を追加すると、苦労することなくデータを最新の状態に保つために必要なものがすべて揃います。

出典:
Next.js キャッシュ