Next.js でのルートのプリフェッチ

Next.js がルート プリフェッチを使用してナビゲーションを高速化する仕組みと、それをカスタマイズする方法。

Milica Mihajlija

学習内容

この記事では、Next.js でのルーティングの仕組み、速度を重視した最適化方法、ニーズに合わせてカスタマイズする方法について説明します。

<Link> コンポーネント

Next.js では、ルーティングを手動で設定する必要はありません。Next.js はファイル システムベースのルーティングを使用します。これにより、./pages/ ディレクトリ内にファイルとフォルダを作成できます。

別のページにリンクするには、旧式の <a> 要素と同じように、<Link> コンポーネントを使用します。

<Link href="/margherita">
  <a>Margherita</a>
</Link>

ナビゲーションに <Link> コンポーネントを使用すると、Next.js によりわずかな処理が行われます。通常、ページへのリンクをクリックするとページがダウンロードされますが、Next.js はページのレンダリングに必要な JavaScript を自動的にプリフェッチします。

リンクがいくつかあるページを読み込むと、リンク先のコンポーネントがすでにフェッチされている可能性があります。これにより、新しいページへのナビゲーションが高速化され、アプリケーションの応答性が向上します。

以下のサンプルアプリでは、index.js ページが <Link> で margherita.js にリンクされています。

Chrome DevTools を使用して、margherita.js がプリフェッチされていることを確認します。サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。

1. Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して DevTools を開きます。

2. [ネットワーク] タブをクリックします。

3. [キャッシュを無効にする] チェックボックスをオンにします。

4. ページを再読み込みする。

index.js を読み込むと、[ネットワーク] タブに margherita.js もダウンロードされたことが表示されます。

自動プリフェッチの仕組み

Next.js は、ビューポートに表示されるリンクのみをプリフェッチし、Intersection Observer API を使用して検出します。また、ネットワーク接続が遅い場合や、ユーザーが Save-Data をオンにしている場合も、プリフェッチが無効になります。これらのチェックに基づいて、Next.js は <link rel="preload"> タグを動的に挿入して、後続のナビゲーション用のコンポーネントをダウンロードします。

Next.js は JavaScript を「フェッチ」するだけであり、実行はしません。これにより、リンクにアクセスするまで、プリフェッチされたページがリクエストする追加のコンテンツはダウンロードされません。

不要なプリフェッチを回避する

不要なコンテンツのダウンロードを回避するには、<Link> の prefetch プロパティを false に設定して、アクセス頻度の低いページのプリフェッチを無効にします。

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

この 2 番目のサンプルアプリの index.js ページには、prefetch が false に設定された <Link> から pineapple-pizza.js へのリンクがあります。

ネットワーク アクティビティを調べるには、最初の例の手順に沿って操作します。index.js を読み込むと、DevTools の [Network] タブに、margherita.js はダウンロードされているが pineapple-pizza.js はダウンロードされていないことが示されます。

カスタム ルーティングによるプリフェッチ

<Link> コンポーネントはほとんどのユースケースに適していますが、ルーティングを行う独自のコンポーネントを作成することもできます。Next.js では、next/router で利用可能なルーター API を使用して、これを簡単に行うことができます。新しいルートに移動する前になんらかの操作（フォームの送信など）を行う場合は、その操作をカスタム ルーティング コードで定義できます。

ルーティングにカスタム コンポーネントを使用する場合、それらのコンポーネントにプリフェッチも追加できます。ルーティング コードにプリフェッチを実装するには、useRouter の prefetch メソッドを使用します。

このサンプルアプリの components/MyLink.js を見てみましょう。

プリフェッチは useEffect フック内で行われます。<MyLink> の prefetch プロパティが true に設定されている場合、その <MyLink> がレンダリングされると、href プロパティで指定されたルートがプリフェッチされます。

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

リンクをクリックすると、handleClick でルーティングが完了します。メッセージがコンソールにログに記録され、push メソッドは href で指定された新しいルートに移動します。

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

このサンプルアプリの index.js ページには、margherita.js と pineapple-pizza.js への <MyLink> があります。prefetch プロパティは、/margherita では true に、/pineapple-pizza では false に設定されます。

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

index.js を読み込むと、[ネットワーク] タブに、margherita.js がダウンロードされ、pineapple-pizza.js がダウンロードされていないことが示されます。

いずれかのリンクをクリックすると、コンソールに「Having fun with Next.js」というログが出力され、新しいルートに移動します。

まとめ

<Link> を使用すると、Next.js はリンクされたページのレンダリングに必要な JavaScript を自動的にプリフェッチし、新しいページにすばやく移動できるようにします。カスタム ルーティングを使用している場合は、Next.js ルーター API を使用してプリフェッチを実装できます。あまりアクセスしないページのプリフェッチを無効にして、不必要にコンテンツをダウンロードしないようにします。