こんにちは。よっしーです(^^)
今日は、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でのリンクオプションについて解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント