diff --git a/src/content/docs/ja/guides/prefetch.mdx b/src/content/docs/ja/guides/prefetch.mdx new file mode 100644 index 0000000000000..214db11af03c3 --- /dev/null +++ b/src/content/docs/ja/guides/prefetch.mdx @@ -0,0 +1,273 @@ +--- +title: プリフェッチ +description: ページ間のすばやいナビゲーションのためにリンクをプリフェッチします。 +i18nReady: true +--- + +import { Steps } from '@astrojs/starlight/components' +import Since from '~/components/Since.astro' + +ページのロード時間は、サイトの使いやすさとサイト全体の快適さに大きな影響を与えます。Astroの**オプトインのプリフェッチ**を利用すると、訪問者がマルチページアプリケーション(MPA)のサイトを操作する際に、ほぼ瞬時にページナビゲーションできるようになります。 + +## プリフェッチを有効にする + +プリフェッチは、`prefetch`設定で有効にできます。 + +```js title="astro.config.mjs" ins={4} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + prefetch: true +}); +``` + +プリフェッチスクリプトがサイトのすべてのページに追加されます。その後、サイト上の任意の``リンクに`data-astro-prefetch`属性を追加することで、プリフェッチにオプトインできます。リンク上にホバーすると、スクリプトがページをバックグラウンドでフェッチします。 + +```html + +``` + +プリフェッチはサイト内のリンクに対してのみ機能し、外部リンクに対しては機能しないことに注意してください。 + +## プリフェッチの設定 + +`prefetch`設定は、プリフェッチをさらにカスタマイズするためのオプションのオブジェクトも受け付けます。 + +### プリフェッチ戦略 + +Astroは、さまざまなユースケースのために、以下の4種類のプリフェッチ戦略をサポートします。 + +- `hover`(デフォルト)。リンク上にホバーまたはフォーカスしたときにプリフェッチします。 +- `tap`。リンクをクリックする直前にプリフェッチします。 +- `viewport`。リンクがビューポートに入ったときにプリフェッチします。 +- `load`。ページのロード後に、ページ上のすべてのリンクをプリフェッチします。 + +個別のリンクに対して戦略を指定するには、戦略を`data-astro-prefetch`属性に渡します。 + +```html +About +``` + +各戦略はファインチューニングされており、必要なときにのみプリフェッチしてユーザーの帯域を節約します。たとえば、 + +- 訪問者が[データ節約モード](https://developer.mozilla.org/ja/docs/Web/API/NetworkInformation/saveData)や[低速なコネクション](https://developer.mozilla.org/ja/docs/Web/API/NetworkInformation/effectiveType)を使っている場合、プリフェッチは`tap`戦略にフォールバックします。 +- リンク上にすばやくホバーやスクロールした場合はプリフェッチしません。 + +### デフォルトのプリフェッチ戦略 + +`data-astro-prefetch`属性を追加した場合のデフォルトのプリフェッチ戦略は`hover`です。デフォルトを変更するには、`astro.config.mjs`ファイルで[`prefetch.defaultStrategy`](/ja/reference/configuration-reference/#prefetchdefaultstrategy)を設定します。 + +```js title="astro.config.mjs" ins={4-6} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + prefetch: { + defaultStrategy: 'viewport' + } +}); +``` + +### すべてのリンクをデフォルトでプリフェッチする + +`data-astro-prefetch`属性のないリンクも含めて、すべてのリンクをプリフェッチするには、[`prefetch.prefetchAll`](/ja/reference/configuration-reference/#prefetchprefetchall)を`true`に設定します。 + +```js title="astro.config.mjs" ins={4-6} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + prefetch: { + prefetchAll: true + } +}); +``` + +その後、`data-astro-prefetch="false"`に設定することで、個別のリンクのプリフェッチをオプトアウトできます。 + +```html +About +``` + +すべてのリンクに対するデフォルトのプリフェッチ戦略は、[デフォルトのプリフェッチ戦略](#デフォルトのプリフェッチ戦略)に示したように、`prefetch.defaultStrategy`で変更できます。 + +## プログラムによるプリフェッチ + +ナビゲーションは常に``リンクとして表示されるとは限らないため、`astro:prefetch`モジュールの`prefetch()` APIを使用してプログラムからプリフェッチすることもできます。 + +```astro + + + +``` + +`prefetch()` APIには、同様の[データ節約モード](https://developer.mozilla.org/ja/docs/Web/API/NetworkInformation/saveData)と[低速なコネクション](https://developer.mozilla.org/ja/docs/Web/API/NetworkInformation/effectiveType)の検出機能があるため、必要なときにだけプリフェッチします。 + +低速なコネクションの検出を無視するには、`ignoreSlowConnection`オプションが利用できます。 + +```js +// データ節約モードや低速なコネクションの場合でもプリフェッチする +prefetch('/about', { ignoreSlowConnection: true }); +``` + +### `eagerness` + +
+**型:** `'immediate' | 'eager' | 'moderate' | 'conservative'`
+**デフォルト:** `'immediate'`
+