From 2f643624bf9e3280bd70fcc7dfda8f91e6839534 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sakku=20=F0=9F=A6=89?=
<64152685+Yusaku01@users.noreply.github.com>
Date: Thu, 3 Sep 2026 17:28:56 +0900
Subject: [PATCH 1/3] i18n(ja): add guides/prefetch.mdx
---
src/content/docs/ja/guides/prefetch.mdx | 273 ++++++++++++++++++++++++
1 file changed, 273 insertions(+)
create mode 100644 src/content/docs/ja/guides/prefetch.mdx
diff --git a/src/content/docs/ja/guides/prefetch.mdx b/src/content/docs/ja/guides/prefetch.mdx
new file mode 100644
index 0000000000000..82b5dd0aafdbc
--- /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'`
+
+
+
+実験的な[`clientPrerender`](/ja/reference/experimental-flags/client-prerender/)フラグを有効にすると、`prefetch()`の`eagerness`オプションを使用して、リンク先をどの程度積極的にプリフェッチまたはプリレンダリングするかをブラウザに提案できます。
+
+このオプションは[Speculation Rules API](https://developer.mozilla.org/ja/docs/Web/HTML/Element/script/type/speculationrules#eagerness)で説明されているものと同じAPIに従い、デフォルトはもっとも積極的な`immediate`です。積極度の高い順に、ほかの選択肢は`eager`、`moderate`、`conservative`です。
+
+`eagerness`オプションを使用すると、待ち時間を短縮するメリットと、サイト訪問者の帯域幅、メモリ、CPUのコストとのバランスを調整できます。Chromeなど一部のブラウザには、[過剰な投機的読み込み（リンクをプリレンダリングまたはプリフェッチしすぎること）を防ぐための制限](https://developer.chrome.com/blog/speculation-rules-improvements#chrome-limits)があります。
+
+```astro
+---
+---
+
+```
+
+多くのリンクをプログラムから`prefetch()`する場合は、`eagerness: 'moderate'`を設定できます。[先入れ先出し（FIFO）](https://ja.wikipedia.org/wiki/FIFO)方式とブラウザのヒューリスティックを活用し、どのリンクをどの順序でプリレンダリングまたはプリフェッチするかをブラウザに判断させられます。
+
+```astro "{eagerness: 'moderate'}"
+A Nice Link 1
+A Nice Link 2
+A Nice Link 3
+A Nice Link 4
+...
+A Nice Link 20
+
+
+```
+
+ブラウザのAPIに依存しているため、クライアント側で`prefetch()`だけをインポートするようにしてください。
+
+## ビュートランジションとともに使用する
+
+ページで[Astroの``](/ja/guides/view-transitions/#ビュートランジションspaモードを有効にする)を使用すると、プリフェッチもデフォルトで有効になります。`{ prefetchAll: true }`がデフォルトで設定され、ページ内の[すべてのリンクに対するプリフェッチ](#すべてのリンクをデフォルトでプリフェッチする)が有効になります。
+
+デフォルトを上書きするには、`astro.config.mjs`内のプリフェッチ設定をカスタマイズできます。たとえば、次のように設定します。
+
+```js title="astro.config.mjs"
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+ // プリフェッチを完全に無効化する
+ prefetch: false
+});
+```
+
+```js title="astro.config.mjs"
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+ // プリフェッチは維持するが、`data-astro-prefetch`があるリンクのみをプリフェッチする。
+ prefetch: {
+ prefetchAll: false
+ }
+});
+```
+
+## ブラウザサポート
+
+Astroのプリフェッチは、ブラウザがサポートしている場合は[``](https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/rel/prefetch)を使用し、サポートしていない場合は[`fetch()` API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)にフォールバックします。
+
+主要なブラウザはAstroのプリフェッチをサポートしていますが、動作には若干の違いがあります。
+
+### Chrome
+
+Chromeは``をサポートしており、プリフェッチは意図どおりに動作します。
+
+また、[Speculation Rules API](https://developer.mozilla.org/ja/docs/Web/API/Speculation_Rules_API)の`