Svelte入門：SvelteKitでのリンクオプション -Vol.1-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitでのリンクオプションについて解説しています。

背景
リンクオプション
data-sveltekit-preload-data
おわりに

背景

SvelteKitでのリンクオプションについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

リンクオプション

SvelteKitでは、アプリのルート間を移動するために、フレームワーク特有の<Link>コンポーネントではなく、<a>要素が使用されます。ユーザーがアプリに「所有」されているhrefを持つリンク（例えば、外部サイトへのリンクとは対照的に）をクリックすると、SvelteKitは新しいページのコードをインポートし、必要なデータを取得するためにload関数を呼び出すことで、新しいページにナビゲートします。

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

これらのオプションは、method="GET"を持つ<form>要素にも適用されます。

data-sveltekit-preload-data

ブラウザがユーザーのリンククリックを認識する前に、マウスがリンク上にホバーした（デスクトップの場合）、またはtouchstartやmousedownイベントが発生したことを検出できます。どちらの場合も、clickイベントが来ると予測できます。

SvelteKitはこの情報を利用して、コードのインポートとページデータの取得を先行して開始できます。これにより数百ミリ秒の先行が可能となり、ラグを感じるユーザーインターフェースと軽快に感じるインターフェースの差を生み出します。

この動作はdata-sveltekit-preload-data属性で制御でき、以下の2つの値を持つことができます：

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

デフォルトのプロジェクトテンプレートでは、src/app.htmlの<body>要素に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">
    現在の株価を取得
</a>

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

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

SvelteKitにおけるデータのプリロード機能について説明しています。主なポイントは以下の通りです：

プリロードの目的：
ユーザーエクスペリエンスを向上させるために、実際のクリックが行われる前にデータを先行して読み込むことができます。これにより、ページ遷移がより速く感じられるようになります。
プリロードのトリガー：

hover: マウスがリンク上で静止した時（デスクトップ）、またはtouchstartイベント時（モバイル）
tap: touchstartまたはmousedownイベントが発生した時

設定方法：
data-sveltekit-preload-data属性を使用して、プリロードの動作を制御します。この属性は<a>要素や親要素に適用できます。
デフォルト設定：
通常、プロジェクトテンプレートでは<body>要素にdata-sveltekit-preload-data="hover"が設定されており、全てのリンクがホバー時にプリロードされるようになっています。
カスタマイズ：
特定のリンクで異なる動作が必要な場合（例：頻繁に更新されるデータ）、個別に"tap"を指定することで、タップまたはクリック時のみプリロードを行うよう設定できます。
プログラムによる制御：
$app/navigationからプログラム的にpreloadDataを呼び出すことも可能です。
ユーザー設定の尊重：
ユーザーがデータ使用量の削減を選択している場合（navigator.connection.saveDataがtrue）、プリロードは行われません。