SvelteKit上級

リンクオプション

SvelteKitでは、アプリのルート間を移動するために、フレームワーク固有の``コンポーネントではなく、``要素を使用します。ユーザーが`href`がアプリによって「所有」されているリンク（たとえば、外部サイトへのリンクとは対照的に）をクリックした場合、SvelteKitは、そのコードをインポートし、必要な`load`関数を呼び出すことで新しいページに移動します。

`data-sveltekit-*`属性を使用して、リンクの動作をカスタマイズできます。これらは``自体、または親要素に適用できます。

これらのオプションは、`method="GET"`を持つ`

`要素にも適用されます。

data-sveltekit-preload-data

ブラウザがユーザーがリンクをクリックしたことを登録する前に、マウスがリンクの上にホバーしていること（デスクトップの場合）、または`touchstart`または`mousedown`イベントがトリガーされたことを検出できます。どちらの場合も、`click`イベントが発生すると推測できます。

SvelteKitは、この情報を使用してコードのインポートとページデータのフェッチを先行して開始できます。これにより、数ミリ秒の高速化が実現し、ユーザーインターフェースの応答性が向上します。

`data-sveltekit-preload-data`属性を使用して、この動作を制御できます。この属性には、2つの値のいずれかを指定できます。

`"hover"`は、マウスがリンクの上に静止するとプリロードが開始されることを意味します。モバイルでは、`touchstart`でプリロードが始まります。
`"tap"`は、`touchstart`または`mousedown`イベントが登録されるとすぐにプリロードが開始されることを意味します。

デフォルトのプロジェクトテンプレートでは、`src/app.html`の``要素に`data-sveltekit-preload-data="hover"`属性が適用されているため、デフォルトですべてのリンクがホバー時にプリロードされます。

<body data-sveltekit-preload-data="hover">
	<div style="display: contents">%sveltekit.body%</div>
</body>

ユーザーがリンクにホバーしたときに`load`を呼び出すことが望ましくない場合があります。これは、誤検知につながる可能性があるため（クリックはホバー後に必ずしも発生するとは限らない）、またはデータが非常に高速に更新され、遅延によってデータが古くなる可能性があるためです。

このような場合は、`tap`値を指定できます。これにより、ユーザーがリンクをタップまたはクリックした場合にのみSvelteKitが`load`を呼び出します。

<a data-sveltekit-preload-data="tap" href="/stonks">
	Get current stonk values
</a>

`$app/navigation`から`preloadData`をプログラムで呼び出すこともできます。

ユーザーがデータ使用量の削減を選択している場合、つまり`navigator.connection.saveData`が`true`の場合、データはプリロードされません。

data-sveltekit-preload-code

リンクのデータをプリロードしたくない場合でも、コードをプリロードすることが有益な場合があります。`data-sveltekit-preload-code`属性は`data-sveltekit-preload-data`と同様に機能しますが、「熱心さ」の点で4つの値のいずれかを取ることができます。

`"eager"`は、リンクがすぐにプリロードされることを意味します。
`"viewport"`は、リンクがビューポートに入るとプリロードされることを意味します。
`"hover"` - 上記と同様ですが、コードのみがプリロードされます。
`"tap"` - 上記と同様ですが、コードのみがプリロードされます。

`viewport`と`eager`は、ナビゲーション直後にDOMに存在するリンクにのみ適用されます。リンクが後で追加された場合（たとえば`{#if ...}`ブロック内）、`hover`または`tap`によってトリガーされるまでプリロードされません。これは、DOMの変更を積極的に監視することによって発生するパフォーマンスの問題を回避するためです。

コードのプリロードはデータのプリロードの前提条件であるため、この属性は、存在する`data-sveltekit-preload-data`属性よりも熱心な値を指定した場合にのみ効果があります。

`data-sveltekit-preload-data`と同様に、ユーザーがデータ使用量の削減を選択している場合、この属性は無視されます。

data-sveltekit-reload

場合によっては、SvelteKitがリンクを処理せず、ブラウザに処理させる必要がある場合があります。リンクに`data-sveltekit-reload`属性を追加すると…

<a data-sveltekit-reload href="/path">Path</a>

…リンクをクリックすると、フルページナビゲーションが行われます。

`rel="external"`属性を持つリンクは、同じ処理を受けます。さらに、プリレンダリング中は無視されます。

data-sveltekit-replacestate

ナビゲーションによってブラウザのセッション履歴に新しいエントリを作成したくない場合があります。リンクに`data-sveltekit-replacestate`属性を追加すると…

<a data-sveltekit-replacestate href="/path">Path</a>

…リンクをクリックすると、`pushState`を使用して新しいエントリを作成するのではなく、現在の`history`エントリが置き換えられます。

data-sveltekit-keepfocus

ナビゲーション後にフォーカスがリセットされないようにする場合があります。たとえば、ユーザーが入力しながら送信される検索フォームがあり、テキスト入力にフォーカスを維持したい場合があります。それに`data-sveltekit-keepfocus`属性を追加すると…

<form data-sveltekit-keepfocus>
	<input type="text" name="query">
</form>

…ナビゲーション後も、現在フォーカスされている要素がフォーカスを維持します。一般的に、リンクではこの属性の使用を避けてください。フォーカスされている要素は``タグになり（以前フォーカスされていた要素ではなく）、スクリーンリーダーやその他の支援技術ユーザーは、ナビゲーション後にフォーカスが移動されることを期待することが多いためです。また、ナビゲーション後も存在する要素にのみこの属性を使用する必要があります。要素が存在しなくなると、ユーザーのフォーカスが失われ、支援技術ユーザーにとって混乱を招くエクスペリエンスになります。

data-sveltekit-noscroll

内部リンクに移動する場合、SvelteKitはブラウザのデフォルトのナビゲーション動作をミラーリングします。リンクに`#hash`が含まれていない限り、スクロール位置を0,0に変更して、ユーザーがページの左上に移動します（その場合、一致するIDを持つ要素にスクロールします）。

特定のケースでは、この動作を無効にしたい場合があります。リンクに`data-sveltekit-noscroll`属性を追加すると…

<a href="path" data-sveltekit-noscroll>Path</a>

…リンクをクリックした後、スクロールされなくなります。

オプションの無効化

有効になっている要素内でこれらのオプションのいずれかを無効にするには、`"false"`値を使用します。

<div data-sveltekit-preload-data>
	<!-- these links will be preloaded -->
	<a href="/a">a</a>
	<a href="/b">b</a>
	<a href="/c">c</a>

	<div data-sveltekit-preload-data="false">
		<!-- these links will NOT be preloaded -->
		<a href="/d">d</a>
		<a href="/e">e</a>
		<a href="/f">f</a>
	</div>
</div>

属性を条件付きで要素に適用するには、次のようにします。

<div data-sveltekit-preload-data={condition ? 'hover' : false}>

GitHubでこのページを編集する

前へ次へ

エラーサービスワーカー