プリフェッチ

ページのロード時間は、サイトの使いやすさとサイト全体の快適さに大きな影響を与えます。Astroのオプトインのプリフェッチを利用すると、訪問者がマルチページアプリケーション（MPA）のサイトを操作する際に、ほぼ瞬時にページナビゲーションできるようになります。

プリフェッチを有効にする

セクションタイトル： プリフェッチを有効にする

プリフェッチは、prefetch設定で有効にできます。

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: true
});

プリフェッチスクリプトがサイトのすべてのページに追加されます。その後、サイト上の任意の<a />リンクにdata-astro-prefetch属性を追加することで、プリフェッチにオプトインできます。リンク上にホバーすると、スクリプトがページをバックグラウンドでフェッチします。

<a href="/about" data-astro-prefetch>

プリフェッチはサイト内のリンクに対してのみ機能し、外部リンクに対しては機能しないことに注意してください。

プリフェッチの設定

セクションタイトル： プリフェッチの設定

prefetch設定は、プリフェッチをさらにカスタマイズするためのオプションのオブジェクトも受け付けます。

プリフェッチ戦略

セクションタイトル： プリフェッチ戦略

Astroは、さまざまなユースケースのために、以下の4種類のプリフェッチ戦略をサポートします。

• hover（デフォルト）: リンク上にホバーまたはフォーカスしたときにプリフェッチします。
• tap: リンクをクリックする直前にプリフェッチします。
• viewport: リンクがビューポートに入ったときにプリフェッチします。
• load: ページのロード後に、ページ上のすべてのリンクをプリフェッチします。

個別のリンクに対して戦略を指定するには、戦略をdata-astro-prefetch属性に渡します。

<a href="/about" data-astro-prefetch="tap">About</a>

各戦略はファインチューニングされており、必要なときにのみプリフェッチしてユーザーの帯域を節約します。たとえば、

• 訪問者がデータ節約モードや低速なコネクションを使っている場合、プリフェッチはtap戦略にフォールバックします。
• リンク上にすばやくホバーやスクロールした場合はプリフェッチしません。
• viewportまたはload戦略を使用したリンクは、ネットワークの専有を避けるために低優先度でプリフェッチされます。

デフォルトのプリフェッチ戦略

セクションタイトル： デフォルトのプリフェッチ戦略

data-astro-prefetch属性を追加した場合のデフォルトのプリフェッチ戦略はhoverです。デフォルトを変更するには、astro.config.mjsファイルのprefetch.defaultStrategyで設定できます。

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: {
    defaultStrategy: 'viewport'
  }
});

すべてのリンクをデフォルトでプリフェッチする

セクションタイトル： すべてのリンクをデフォルトでプリフェッチする

data-astro-prefetch属性のないリンクも含めて、すべてのリンクをプリフェッチしたい場合は、次のように、prefetch.prefetchAllをtrueに設定できます。

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: {
    prefetchAll: true
  }
});

その後、data-astro-prefetch="false"に設定することで、個別のリンクのプリフェッチをオプトアウトできます。

<a href="/about" data-astro-prefetch="false">About</a>

すべてのリンクに対するデフォルトのプリフェッチ戦略は、デフォルトのプリフェッチ戦略に示したように、prefetch.defaultStrategyで変更できます。

プログラムによるプリフェッチ

セクションタイトル： プログラムによるプリフェッチ

ナビゲーションは常に<a />リンクとして表示されるとは限らないため、astro:prefetchモジュールのprefetch() APIを使用してプログラムからプロフェッチすることもできます。

<button id="btn">Click me</button>

<script>
  import { prefetch } from 'astro:prefetch';

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    prefetch('/about');
  });
</script>

withオプションを渡すことで、追加で優先度を設定できます。

// 高優先度の`fetch()`を使用してプリフェッチする。
prefetch('/about', { with: 'fetch' });

// 低優先度で、ブラウザにより手動でスケジュールされる
// `<link rel="prefetch">`を使用してプリフェッチする。（デフォルト）
prefetch('/about', { with: 'link' });

prefetch() APIには、同様のデータ節約モードと低速なコネクションの検出機能があるため、必要なときにだけプリフェッチします。

低速なコネクションの検出を無視するには、ignoreSlowConnectionオプションが利用できます。

// データ節約モードや低速なコネクションの場合でもプリフェッチする
prefetch('/about', { ignoreSlowConnection: true });

ブラウザのAPIに依存しているため、クライアント側でprefetch()だけをインポートするようにしてください。

ビュートランジションとともに使用する

セクションタイトル： ビュートランジションとともに使用する

ページ内でビュートランジションを使用するときは、プリフェッチもデフォルトで有効になります。ビュートランジションは、{ prefetchAll: true }というデフォルト設定を設定し、ページ内のすべてのリンクに対してプリフェッチを有効化します。

デフォルトを上書きするには、astro.config.mjs内のプリフェッチ設定をカスタマイズできます。たとえば、次のように設定します。

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  // プリフェッチを完全に無効化する
  prefetch: false
});

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  // プリフェッチは維持するが、`data-astro-prefetch`があるリンクのみをプリフェッチする。
  prefetch: {
    prefetchAll: false
  }
});

@astrojs/prefetchからのマイグレーション

セクションタイトル： @astrojs/prefetchからのマイグレーション

@astrojs/prefetchインテグレーションはv3.5.0で廃止され、最終的には完全に削除される予定です。以下の手順を利用して、このインテグレーションを置き換えるAstroのビルトインのプリフェッチにマイグレーションしてください。

1. @astrojs/prefetchインテグレーションを削除し、astro.config.mjs内のprefetch設定を有効化します。

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import prefetch from '@astrojs/prefetch';
   
   export default defineConfig({
     integrations: [prefetch()],
     prefetch: true
   });

2. @astrojs/prefetchの設定オプションから変換します。

   • 非推奨になったインテグレーションでは、ビューポートに入ったときにプリフェッチするべきリンクを指定するために、selector設定オプションを使用していました。

     代わりに、これらの個別のリンクにdata-astro-prefetch="viewport"を追加してください。

     <a href="/about" data-astro-prefetch="viewport">

   • 非推奨になったインテグレーションは、ホバーまたはフォーカスしたときにプリフェッチするべきリンクを指定するために、selector設定オプションを使用していました。intentSelector設定オプションを使用していました。

     代わりに、これらの個別のリンクにdata-astro-prefetchまたはdata-astro-prefetch="hover"を追加してください。

     <!-- `defaultStrategy`が`hover`（デフォルト）に設定されている場合、値を省略できます -->
     <a href="/about" data-astro-prefetch>
     
     <!-- そうでない場合は、プリフェッチ戦略を明示的に定義できます -->
     <a href="/about" data-astro-prefetch="hover">

   • 新しいプリフェッチ機能は自動的にスケジューリングを行って最適にプリフェッチするため、@astrojs/prefetchのthrottlesオプションは必要なくなりました。