Next.js キャッシュ: 効率的なデータ取得でアプリを高速化する

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() もデータをキャッシュしますが、将来の予期せぬ事態を回避する場合は、安定した キャッシュ: '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'、またはより実験的なunstable_noStore()メソッドとunstable_cache()メソッド。 next.revalidate や revalidateTag などの再検証戦略を追加すると、苦労せずにデータを最新の状態に保つために必要なものがすべて揃います。

出典:

Next.js キャッシュ

以上がNext.js キャッシュ: 効率的なデータ取得でアプリを高速化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。