こんにちは。よっしーです(^^)
今日は、SvelteKitでのリンクオプションについて解説しています。
背景
SvelteKitでのリンクオプションについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
リンクオプション
SvelteKitでは、アプリのルート間を移動するために、フレームワーク特有の<Link>
コンポーネントではなく、<a>
要素が使用されます。ユーザーがアプリに「所有」されているhref
を持つリンク(例えば、外部サイトへのリンクとは対照的に)をクリックすると、SvelteKitは新しいページのコードをインポートし、必要なデータを取得するためにload
関数を呼び出すことで、新しいページにナビゲートします。
data-sveltekit-*
属性を使用して、リンクの動作をカスタマイズすることができます。これらの属性は、<a>
要素自体、または親要素に適用できます。
これらのオプションは、method="GET"
を持つ<form>
要素にも適用されます。
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-preload-code
属性を使用して、コードのプリロード動作を細かく制御できます。 - プリロードの積極性レベル:
eager
: 最も積極的で、即座にプリロードviewport
: ビューポートに入った時点でプリロードhover
: マウスホバー時にプリロードtap
: タップまたはクリック時にプリロード
- 動的コンテンツへの対応:
eager
とviewport
は初期ロード時のリンクにのみ適用され、動的に追加されたリンクには適用されません。これはパフォーマンスを考慮した設計です。 - データプリロードとの関係:
コードのプリロードはデータのプリロードの前提条件となるため、data-sveltekit-preload-code
の設定はdata-sveltekit-preload-data
よりも積極的な場合にのみ効果を発揮します。 - ユーザー設定の尊重:
ユーザーのデータ使用量設定を尊重し、データ削減モードが有効な場合はプリロードを行いません。
この機能を適切に使用することで、アプリケーションのパフォーマンスを最適化し、ユーザーエクスペリエンスを向上させることができます。同時に、ユーザーの選択やデバイスの制約も考慮に入れた柔軟な設計となっています。
おわりに
今日は、 SvelteKitでのリンクオプションについて解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント