はじめに

この記事は、React Tokyo アドベントカレンダーの7日目の記事です。
昨年までは副業での個人事業や本業内での兼務稼働で月間の30%くらいを開発組織、残りを営業・マネジメントサイドの組織で過ごしていたのですが、今年から開発組織の一員として本格的に学んでいきたく、妻と娘と新築のマイホームを大阪に残し（涙）、東京へ転勤しました。
その後、React Tokyoというコミュニティがあるのを知り、東京に来たのであれば、プライベートでもたくさん勉強したい！と参加したのがきっかけで参加するようになった大好きなコミュニティです。

■React Tokyo

https://react-tokyo.vercel.app/

まだまだお恥ずかしい限りの知識で恐縮ですが、最近Next.jsのLinkコンポーネントが使用している機能の一つであるPrefetchの動作について考えることがありました。
理解がふわっとしてるな・・・と感じていたので、今回はアドベントカレンダーをきっかけにNext.jsのPrefetchについて、調べてみたことをまとめてみます。

Prefetchとは

Prefetchとは、ユーザーが新しいルートに移動する前に、そのルートに必要なリソース（HTMLやJavaScriptファイルなど）を事前に取得するプロセスのことで、Next.jsの <Link> コンポーネントがビューポートに入った時（自動）や、 useRouterによる任意のタイミング（手動）で使用することができる機能の一つです。

Next.jsでは必要に応じてこのPrefetchを行うことで、ナビゲーションが発生した際に即時にページを表示することを助けてくれます。

※実際の動作にはRouter Cache、部分的なDOM更新の話、fetchの有無によるData Cacheやメモ化なども絡んだりでケースが様々なので、Prefetchの挙動のみが実際の挙動を表すものではない、という前提です。今回は話がとんでもなく長くなるので、Prefetchのみに絞ってまとめます。

静的ルートと動的ルートでの挙動の違い

Prefetchは、公式ドキュメントの通り、下記の3つが静的ルートなのか動的ルートなのかによって変わります。
1. Prefetch対象となるのか
2. Prefetch対象となる場合、クライアント(Router Cache)で保持されるキャッシュのTTLがどうなるか
3. Prefetch対象となる場合、実際にクリック（ナビゲーション発生）した際のサーバー側との通信はどうなるか

さらに、最初のナビゲーション時にはHTML・JavaScript・Reactサーバーコンポーネント（RSC）ペイロードを取得。それ以降のナビゲーション発生時にはサーバーコンポーネント（RSC）ペイロードとクライアントコンポーネント用のJSバンドルのデータを取得するとドキュメントに記載されています。

ここまでがPrefetchの基本、幹部分です！

Prefetchの使い分け

上記の基本の幹を押さえた上で、あとは以下の枝があることを理解するとわかりやすいかなと思います。

パターン1自動Prefetch・・・Linkコンポーネントのデフォルト動作
パターン2手動Prefetch・・・useRouterのrouter.prefetch()を使用して、ビューポート外のルートや特定のイベント（ホバー、スクロールなど）に応じてプリフェッチを手動実行できる
パターン3Prefetch無効化・・・Prefetchが行われることでパフォーマンスが悪化してしまうようなルート先の場合には、prefetchプロパティをfalseで指定することで無効化できる。ただし、静的ルートならユーザーがリンクをクリックしたときにのみデータが取得される挙動になるし、動的ルートならまずサーバー上でルートをレンダリングするところからやらないといけなくなる

パターン4ホバーやタッチ操作時にのみPrefetchを有効化・・・ビューポートに入った時にPrefetchが実行されるのではなく、ホバーやタッチ操作といったユーザーの意思があった場合にのみPrefetchを実行させる

注意点

上記の パターン1に分類した自動Prefetchですが、開発環境(npmだとnpm run devした時）では動作しません。
動作を確認したい場合はnpm run buildしてからnpm run startして確認しましょう。

その他の仕様部分

その他の葉っぱの部分として、ドキュメントに書いてあるところをかみ砕いて説明します。

Client cache

/dashboard/settingsから /dashboard/analyticsといったように、兄弟となっているルート間を移動する際、親のレイアウトを再利用し、更新された葉の部分のみを取得し、ネットワークトラフィックを削減、ナビゲーション速度を向上させます。
（葉っぱだけに）

Prefetch Scheduling

Prefetchによってパフォーマンスを悪化させることなく、効果的にこの機能が活かせるように、Prefetchのタスクキューには優先度が設定されています（1が最優先、4が最後の順）

ビューポート内のリンク
ユーザーの意図を示すリンク（ホバーまたはタッチ）
新しいリンクが古いリンクに置き換わります
画面外にスクロールされたリンクは破棄されます

Partial Prerendering (PPR)

PPRは、1つのページを「静的な部分」と「動的な部分」に分けてレンダリングできる機能です。
nextConfigの構成にcacheComponents: trueを追加することで利用できます。

■Enabling Cache Components | Next.js公式
https://nextjs.org/docs/app/getting-started/cache-components#enabling-cache-components

この機能を利用することで、プリフェッチ可能な静的部分はすぐに表示され、動的な部分は準備ができ次第表示、キャッシュを無効化・再検証（revalidateTag、revalidatePath）する部分は関連するPrefetch部分が表示された後、バックグラウンドで情報更新された場合でも特にユーザーの操作なくサイレントに更新する、という挙動を実現できます。

終わりに

React Tokyo アドベントカレンダー、まだまだ募集中ですので、興味がある方はぜひコミュニティへのご参加と併せて投稿してみてください！
皆でわいわいやりましょう！

HTNCode