BackEnd

Next.jsのrevalidatePathとrevalidateTag

投稿日:

はじめに

Next.jsでの実装において、他システムの挙動をトリガーにして、手動でフェッチキャッシュの再検証を実施したい場面に遭遇しました。
調べると、revalidatePathとrevalidateTagという機能が使えそうでしたので紹介したいと思います。

前提

実装に当たっての前提条件は以下の通りです。

  • Next.jsのバージョンは14以降でApp Routerを使用している
  • 手動で再検証したいAPIはサーバーサイドコンポーネントのpage.tsxで使用しており、このコンポーネント内で他APIも呼んでいる
  • このAPIの取得元データは他システムから更新される
  • その際に、Router HandlerでNext.jsのキャッシュを再検証する処理を呼ぶ

revalidatePathとrevalidateTag

フェッチキャッシュを任意のタイミングで手動で再検証する方法としてrevalidatePathrevalidateTagがあります。
Route Handlerを定義して別システムでデータ更新したタイミングで、Next.jsにアクセスしてキャッシュの再検証を行いたいと思います。

revalidatePath

  • URLパス単位でキャッシュを再検証することができる
  • 指定したURLパスのpage.tsxなどサーバーコンポーネントの中で呼ばれる全てのAPIのフェッチキャッシュが再検証される
  • 逆に言うと、特定のフェッチキャッシュだけを再検証する事等は出来ない
  • 実際の更新タイミングはrevalidatePathが呼ばれた後に、指定URLパスにアクセスする時

以下の例では、Route Handlersの中でrevalidatePathを実行して、 /test ページで呼ばれる2つのフェッチキャッシュを再検証しています。
URLパスは動的なルートパラメーターを含んだ形の指定も可能のようです。( /[slug]/test など)

revalidateTag

  • タグ単位でキャッシュを再検証することができる
  • タグとはfetch時にオプションとして指定する値のこと
  • ページを跨いで同じタグが指定された複数のフェッチキャッシュを再検証できる
  • 実際の更新タイミングはrevalidateTagが呼ばれた後に、実際に各APIデータにアクセスする時

以下の例では、 testタグ を指定して、このタグが指定されている2つのフェッチキャッシュを再検証しています。

今回の場合

再検証したいAPIと同じコンポーネント内で他APIも呼んでいるのでrevalidatePathを使用すると、不要なキャッシュも再検証されてしまいAPIアクセス回数が増えてしまいます。
今回の場合だとrevalidateTagを使用して、再検証したいAPIだけにタグ指定して、無駄なAPIアクセス回数を増やさない形で実装するのが適当かと思いました。

おすすめ書籍

実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書 TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-BackEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

rails

form_withでフォームの送信前に処理を行う方法

1 はじめに2 form_with3 サンプル4 さいごに5 参考 はじめに フォームを送信する前に処理を行いたいケース(Google Analyticsのイベントのトラッキングなど)があると思います ...

rails

Ruby2.4でCookieを手動で復号する際に発生したエラーの対処

1 はじめに1.1 前提条件2 発生したエラー2.1 実際のコード2.2 エラー詳細2.3 原因3 どう対処したか3.1 修正後のコード はじめに こんにちは、onoです。 現在開発中のアプリケーショ ...

laravel logo

Laradock環境にPHPStormからXdebugする

1 はじめに2 Laradock側の設定変更2.1 xdebug.iniファイル2.2 .env2.3 コンテナの再構築3 PHPStormの設定3.1 Preferences3.1.1 Build, ...

Go言語

Go言語のエラーハンドリングとログローテーション

1 はじめに2 エラーハンドリング2.1 error インターフェース2.2 pkg/errors パッケージ3 独自のエラータイプ付き errorsパッケージを作成4 log パッケージ4.1 lo ...

markdownで書けるドキュメントツールのGitbookを試す

1 はじめに2 Gitbookとは3 nvm4 node.jsインストール5 Gitbook導入5.1 インストール5.2 初期化5.3 ローカルでブラウザから確認6 作成と編集6.1 見出し編集7 ...

フォロー

blog-page_side_responsive

2024年8月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。