Next.js 16でuse cacheを使う方法

TL;DR

Next.js 16では、再利用できるデータは「use cache」でサーバー側にキャッシュし、常に最新のデータが必要な部分はSuspenseで囲みます。これにより、静的部分を先に表示し、動的部分をストリーミングするPPRを構成できます。

Transcript

はい、どうも新です。今回ですけども、 NETJS16入門というところで、ま、 新しくユースキャッシュっていうですね、 ディレクティブが登場しました。で、 キャッシュコンポーネントが登場しました ので、え、キャッシュ周りの実装が大きく 変わりましたので、ま、そこら辺を、ま、 今回解説しようかなと思います。ま、今回 ブログを作りながらそこら辺をお伝えでき たらなと思います。ま、皆さんの プロジェクトまだV14とかV15の バージョン使ってると思うので、ま、この 16のバージョン導入するってのはね、 すぐないと思うんですけど、ま、今後この 16のユースキャっていうディレクティブ を使った開発仕用が主流になるかもしれ ないので、ま、そこの予習と思ってね、 あの、学習していただければなと思います 。ま... Read More

Key Insights

• Cache Componentsは、撮影時点ではnext.config.tsでcacheComponentsをtrueに設定し、開発サーバーを再起動すると有効になる機能である。
• 「use cache」は、非同期のデータ取得関数の先頭に置くことで、その関数の戻り値をサーバー側にキャッシュするディレクティブである。
• 未キャッシュのデータ取得は、Cache Components有効時にSuspenseの外で実行するとエラーになり、キャッシュするかSuspenseで囲む必要がある。
• PPRは、同じページ内の静的部分を事前生成し、動的な部分だけをサーバーで処理してストリーミングできるレンダリング方式である。
• Suspenseのfallbackは、動的データの取得中にローディング表示やスケルトンUIを見せ、待機中の視認性を保つ仕組みである。
• cacheLifeはキャッシュ期間を調整する関数であり、実演ではdaysによる1日単位の再検証やmaxプリセットの設定内容が紹介された。
• ルーターキャッシュは、Linkによる遷移でRSCペイロードをクライアント側に保持し、本番環境のページ遷移を高速化する仕組みである。
• 更新直後の表示反映は、サーバーアクション内でrevalidateTag、revalidatePath、updateTag、refreshを用途に応じて呼び出す方法が示された。
• 🎬 このチャンネルの他の動画:
  • AIコーディングで画像生成アプリを作る方法
  • AI時代にエンジニアが独立して稼ぐ方法
  • 信頼できるWeb開発会社を選ぶ3つの基準とは？
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Next.js 16でuse cacheを有効にする方法は？

撮影時点では、next.config.tsにcacheComponentsを追加してtrueに設定し、開発サーバーを再起動します。起動時にCache Componentsが有効になったことを確認すれば、「use cache」ディレクティブをデータ取得関数などで利用できます。trueにしない場合は、講師によればNext.js 15相当の状態で動作します。

Q: use cacheはデータ取得関数でどう使いますか？

非同期のデータ取得関数の先頭に「use cache」と記述します。これにより、その関数が返すデータがサーバー側にキャッシュされ、同じデータを毎回データソースから取得せずに返せます。ブログ記事のように、更新頻度が低く高速表示を優先したいデータに適した使い方として紹介されています。

Q: 未キャッシュのデータ取得でエラーが出るのはなぜですか？

Cache Componentsを有効にしたNext.js 16では、未キャッシュのデータをSuspenseの外で取得するとエラーになるためです。以前はページ全体をSSRとして処理できましたが、実演された構成では、取得結果を「use cache」でキャッシュするか、取得するコンポーネントをSuspenseで囲む必要があります。

Q: 常に最新のデータをSSRで表示する方法は？

データ取得関数に「use cache」を付けず、その関数を呼ぶコンポーネントをSuspenseで囲みます。これにより、対象部分はリクエスト時に動的に処理され、取得中はfallbackを表示できます。リアルタイム性が必要な場合には、クライアントコンポーネントからSWRやTanStack Queryを使う選択肢も紹介されています。

Q: Next.js 16のPPRとは何ですか？

PPRは、1つのページ内で静的に事前生成する部分と、動的にサーバー処理する部分を分けるレンダリング方式です。静的な外枠は先に高速表示し、Suspenseで囲んだ未キャッシュ部分は後からストリーミングできます。実演では、ビルド結果にPartial Prerenderと表示されることで確認しています。

Q: Suspenseのfallbackには何を表示すればよいですか？

fallbackには、ローディング文言やスケルトンUIを指定します。未キャッシュのデータをSSRで取得している間も空白のまま待たせず、ページの構造を先に示せます。講師の実演では、投稿一覧の読み込み領域にスケルトンUIを置き、静的部分を表示しながら動的データを待つ構成にしています。

Q: use cacheの再検証時間を変更する方法は？

「use cache」を指定した関数内でcacheLifeを使い、用意された期間を指定します。実演ではdaysを指定すると1日ごとの再検証になること、maxでは再検証30日、キャッシュ有効期間1年と説明されています。ただし講師自身も仕様は日々更新されると述べているため、動画内の数値は撮影時点の説明です。

Q: キャッシュを投稿直後に更新する方法は？

サーバーアクション内でrevalidateTag、revalidatePath、updateTag、refreshなどを呼び出し、対象のキャッシュや画面を更新します。タグ単位で更新する場合は、先に対象データへキャッシュタグを付ける必要があります。投稿を保存した直後に一覧へ反映したい場面が、代表的な利用例として挙げられています。

Q: Next.js 16でブログ記事一覧はキャッシュすべきですか？

更新頻度が低いブログ記事一覧なら、データ取得関数に「use cache」を付ける構成が適切だと講師は説明しています。サーバー側に取得結果を保持し、再検証時に新しいデータを取得するため、高速表示と更新反映を両立できます。常に最新状態が必要なら、キャッシュせずSuspense内でSSRする構成を選びます。

Q: ルーターキャッシュはどのように確認できますか？

開発環境ではなく、本番相当の環境で確認します。動画ではnpm run buildでビルドした後、npm run startで起動し、Linkコンポーネントによるページ遷移を試しています。ルーターキャッシュはRSCペイロードをクライアント側に保持し、再訪時などの遷移を高速化する仕組みとして説明されています。

Summary & Key Takeaways

• Next.js 16でCache Componentsを使うには、撮影時点ではnext.config.tsのcacheComponentsをtrueに設定し、開発サーバーを再起動する。サーバーコンポーネントとクライアントコンポーネントの区別は維持され、主な変化はデータ取得時のキャッシュ指定と動的コンテンツの扱いにある。

• サーバーコンポーネントで取得結果を再利用する場合は、非同期のデータ取得関数の先頭に「use cache」を置く。講師の実演では、指定なしの既定値として15分の再検証が示された。期間はcacheLifeで変更でき、daysなら1日、maxでは再検証30日と有効期間1年という設定が紹介された。

• キャッシュしないデータ取得はSuspenseで囲み、fallbackにローディング表示やスケルトンUIを設定する。すると静的部分は事前生成され、動的部分だけがサーバーで処理されてストリーミングされる。更新直後の反映には、サーバーアクションからタグやパスの再検証、refreshを使う方針が示された。