プリフェッチ

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

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

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

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戦略にフォールバックします。
リンク上にすばやくホバーやスクロールした場合はプリフェッチしません。

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

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

import { defineConfig } from 'astro/config';

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

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

data-astro-prefetch属性のないリンクも含めて、すべてのリンクをプリフェッチするには、prefetch.prefetchAll (EN)をtrueに設定します。

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>

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

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

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

`eagerness`

型: 'immediate' | 'eager' | 'moderate' | 'conservative'
デフォルト: 'immediate'

追加： astro@5.6.0

実験的なclientPrerender (EN)フラグを有効にすると、prefetch()のeagernessオプションを使用して、リンク先をどの程度積極的にプリフェッチまたはプリレンダリングするかをブラウザに提案できます。

このオプションはSpeculation Rules APIで説明されているものと同じAPIに従い、デフォルトはもっとも積極的なimmediateです。積極度の高い順に、ほかの選択肢はeager、moderate、conservativeです。

eagernessオプションを使用すると、待ち時間を短縮するメリットと、サイト訪問者の帯域幅、メモリ、CPUのコストとのバランスを調整できます。Chromeなど一部のブラウザには、過剰な投機的読み込み（リンクをプリレンダリングまたはプリフェッチしすぎること）を防ぐための制限があります。

---
---
<script>
// `experimental.clientPrerender`でプリフェッチの積極度を制御する
import { prefetch } from 'astro:prefetch';

// このページは多くのリソースを消費する
prefetch('/data-heavy-dashboard', { eagerness: 'conservative' });

// このページは訪問者の導線において重要である
prefetch('/getting-started'); // デフォルトは`{ eagerness: 'immediate' }`

// このページにはアクセスしない可能性がある
prefetch('/terms-of-service', { eagerness: 'moderate' });
</script>

多くのリンクをプログラムからprefetch()する場合は、eagerness: 'moderate'を設定できます。先入れ先出し（FIFO）方式とブラウザのヒューリスティックを活用し、どのリンクをどの順序でプリレンダリングまたはプリフェッチするかをブラウザに判断させられます。

<a class="link-moderate" href="/nice-link-1">A Nice Link 1</a>
<a class="link-moderate" href="/nice-link-2">A Nice Link 2</a>
<a class="link-moderate" href="/nice-link-3">A Nice Link 3</a>
<a class="link-moderate" href="/nice-link-4">A Nice Link 4</a>
...
<a class="link-moderate" href="/nice-link-20">A Nice Link 20</a>

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

  const linkModerate = document.getElementsByClassName("link-moderate");
  for (const link of linkModerate) {
    const href = link.getAttribute("href");
    if (href) prefetch(href, { eagerness: "moderate" });
  }
</script>

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

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

ページでAstroの<ClientRouter /> (EN)を使用すると、プリフェッチもデフォルトで有効になります。{ prefetchAll: true }がデフォルトで設定され、ページ内のすべてのリンクに対するプリフェッチが有効になります。

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

import { defineConfig } from 'astro/config';

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

import { defineConfig } from 'astro/config';

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

ブラウザサポート

Astroのプリフェッチは、ブラウザがサポートしている場合は<link rel="prefetch">を使用し、サポートしていない場合はfetch() APIにフォールバックします。

主要なブラウザはAstroのプリフェッチをサポートしていますが、動作には若干の違いがあります。

Chrome

Chromeは<link rel="prefetch">をサポートしており、プリフェッチは意図どおりに動作します。

また、Speculation Rules APIの<script type="speculationrules">も完全にサポートしています。このAPIを使用すると、プリフェッチの戦略やルールをさらに詳しく指定でき、Chromeユーザーの体験を向上できます。prefetch()でこの機能を使用するには、実験的なclientPrerender (EN)フラグを有効にする必要があります。

Firefox

Firefoxは<link rel="prefetch">をサポートしていますが、エラーが表示されたり、まったく機能しなかったりする場合があります。

明示的なキャッシュヘッダー（Cache-ControlやExpiresなど）がない場合、プリフェッチでNS_BINDING_ABORTEDエラーが発生します。
エラーが発生しても、レスポンスに適切なETagヘッダーがあれば、ページ移動時に再利用されます。
それ以外の場合、エラーが発生し、ほかのキャッシュヘッダーもなければ、プリフェッチは機能しません。

Safari

Safariは<link rel="prefetch">をサポートしていないため、fetch() APIにフォールバックします。プリフェッチを機能させるには、Cache-Control、Expires、ETagなどのキャッシュヘッダーを設定する必要があります。

エッジケース: プライベートウィンドウではETagヘッダーが機能しません。

推奨事項

すべてのブラウザをできる限りサポートするため、ページに適切なキャッシュヘッダーが設定されていることを確認してください。

静的ページやプリレンダリングされたページでは、多くの場合デプロイ先のプラットフォームによってETagヘッダーが自動的に設定され、そのまま動作します。

動的ページやサーバーサイドレンダリングされたページでは、ページの内容に応じて適切なキャッシュヘッダーを設定してください。詳しくは、HTTPキャッシュに関するMDNドキュメントを参照してください。

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

@astrojs/prefetchインテグレーションはv3.5.0で非推奨となり、現在はメンテナンスされていません。以下の手順に従って、このインテグレーションを置き換えるAstro組み込みのプリフェッチへ移行してください。

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

import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  integrations: [prefetch()],
  prefetch: true
});

@astrojs/prefetchの設定オプションから変換します。
- 非推奨になったインテグレーションでは、ビューポートに入ったときにプリフェッチするリンクを指定するために、selector設定オプションを使用していました。
  
  代わりに、これらの個別のリンクにdata-astro-prefetch="viewport"を追加してください。
```
<a href="/about" data-astro-prefetch="viewport">
```
- 非推奨になったインテグレーションでは、ホバーまたはフォーカスしたときにプリフェッチするリンクを指定するために、intentSelector設定オプションを使用していました。
  
  代わりに、これらの個別のリンクにdata-astro-prefetchまたはdata-astro-prefetch="hover"を追加してください。
```

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


<a href="/about" data-astro-prefetch="hover">
```
- 新しいプリフェッチ機能は自動的にスケジューリングを行って最適にプリフェッチするため、@astrojs/prefetchのthrottlesオプションは必要なくなりました。

貢献するコミュニティスポンサー