[Next.js]use cacheについて学んだ
2025年01月04日 8:43
use cacheについて学んだので、学んだことを書いていきます。
use cache ディレクティブは、コンポーネント、関数、またはファイルをキャッシュ対象として指定します。
ファイルや関数のトップレベルに宣言することで、ファイル内のすべての関数や、関数の戻り値をキャッシュ可能にしたりすることができます。
ただ、まだ実験的なNext.jsの機能なので、use clientやuse serverのようなネイティブのReact機能ではありません。
今回は、以下のようにユーザーの一覧からランダムでユーザーを取得し、画面に表示する簡単なアプリケーションです。
こちらのアプリケーションにuse cacheを組み込んでいきたいと思います。
use cacheを使えるようにするための手順です。
「use cache」は、まだcanaryなので、以下のコマンドで、Next.jsのcanaryバージョンをインストールする必要があります。
Next.jsには、APIからデータを取得する際には、第二引数にcacheオプションをつけ、no-storeやforce-cacheを指定してcacheするかどうかを指定していた。
詳しくは以下のドキュメントに記載しています。
https://nextjs.org/docs/app/building-your-application/caching
https://nextjsjp.org/docs/app/api-reference/directives/use-cache
キャッシュするコンポーネントや関数を指定することができる機能。
ファイルの先頭で「use cache」を使用して、ファイル内のすべてのエクスポートがキャッシュ可能であることを示すか、関数またはコンポーネントの先頭にインラインで使用して、戻り値をキャッシュして後続のリクエストで再利用する必要があることを Next.jsに通知できます。
3つの使い方が存在する
以下のようにすると、getName, getCountのどちらも対象にすることができます。
https://nextjsjp.org/docs/app/api-reference/next-config-js/dynamicIO
dynamicIO フラグは、App Router内のデータフェッチ操作を、明示的にキャッシュされない限りプリレンダリングから除外する、Next.jsの実験的な機能です。これは、サーバーコンポーネントでの動的データフェッチのパフォーマンスを最適化する際に役立ちます。
use cacheを利用する場合、以下のようにdynamicIOを有効にする必要があります。
dynamicIOが有効な場合、Next.jsは、全てのユーザーリクエストでアクセスされるべきデータを待機するコンポーネントの前(親コンポーネント)に、Suspense Boundaryが存在しなければいけません。
https://nextjsjp.org/docs/app/api-reference/next-config-js/cacheLife
cacheを永続的にではなく、定期的に更新したい場合は、以下のように「unstable_cacheLife」を設定することで、cacheの保持時間を管理できます。
ISRのようなイメージですね。めっちゃ便利だ。
上記のコードでは、3秒おきにcacheを更新するように設定しているため、画面を3秒おきにリロードすると、表示される名前も更新されるはずです。
また、上記のコードでは、3秒としていますが、以下のように、1日おきや毎分、毎秒など様々な時間で設定をすることができます。
https://nextjsjp.org/docs/app/api-reference/functions/cacheTag
cacheTagは、オンデマンド無効化のためにキャッシュされたデータにタグを付けることができます。
結構使われそうな機能で、例えば、ユーザーの自分のアカウント名を変える時などに、キャッシュしているユーザー名を削除して、キャッシュを更新した場合などに利用するなどがあります。
cacheTagを削除するには、「revalidateTag」を使うことで、削除することができます。
以下のサンプルコードでは、ボタンをクリックすると、cacheをクリアし、新しい名前が画面に表示されます。
Next.jsの新しいキャッシュ管理機能について、主要なポイントを整理しました
use cache: キャッシュ可能な要素の指定
unstable_cacheLife: キャッシュの保持時間の管理
cacheTag: オンデマンドでのキャッシュ無効化
dynamicIO: データフェッチ操作の最適化
これらの機能を適切に組み合わせることで、より効率的でパフォーマンスの高いアプリケーションを構築できます。
特にキャッシュの粒度やライフサイクルを細かく制御できる点が、従来のNext.jsのキャッシュ管理からの大きな進化といえます。
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。