こんにちは。よっしーです(^^)
今日は、SvelteKitでのリンクオプションについて解説しています。
背景
SvelteKitでのリンクオプションについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
リンクオプション
SvelteKitでは、アプリのルート間を移動するために、フレームワーク特有の<Link>コンポーネントではなく、<a>要素が使用されます。ユーザーがアプリに「所有」されているhrefを持つリンク（例えば、外部サイトへのリンクとは対照的に）をクリックすると、SvelteKitは新しいページのコードをインポートし、必要なデータを取得するためにload関数を呼び出すことで、新しいページにナビゲートします。
data-sveltekit-*属性を使用して、リンクの動作をカスタマイズすることができます。これらの属性は、<a>要素自体、または親要素に適用できます。
これらのオプションは、method="GET"を持つ<form>要素にも適用されます。
data-sveltekit-reload
時々、SvelteKitにリンクを処理させずに、ブラウザに処理させる必要があります。リンクにdata-sveltekit-reload属性を追加すると…
<a data-sveltekit-reload href="/path">パス</a>…リンクがクリックされた時に、フルページナビゲーションが発生します。
rel="external"属性を持つリンクも同様の扱いを受けます。さらに、これらのリンクはプリレンダリング時に無視されます。
解説：
data-sveltekit-reloadの目的：
この属性は、SvelteKitの通常のクライアントサイドナビゲーション（CSR）をバイパスし、従来のフルページリロードを強制するために使用されます。- 使用ケース：
- 外部サイトへのリンク
- アプリケーション内で完全にページを再読み込みする必要がある特定のルート
- SvelteKitの動的ルーティングと互換性のない特殊なページ
- 動作：
この属性が付いたリンクがクリックされると、ブラウザは通常のHTTPリクエストを送信し、新しいページを完全に読み込みます。これはSvelteKitのクライアントサイドルーティングをバイパスします。 rel="external"との関係：
rel="external"属性も同様の効果を持ちます。- 加えて、
rel="external"はプリレンダリング時にそのリンクを無視するよう指示します。これは静的サイト生成（SSG）時に外部リンクをクロールしないようにするのに役立ちます。
- プリレンダリングへの影響：
rel="external"属性を持つリンクはプリレンダリング時に無視されます。これは、静的サイト生成時に外部リソースやダイナミックコンテンツを含むページを適切に処理するのに役立ちます。 - 使用の注意点：
- これらの属性の使用は、アプリケーションのパフォーマンスに影響を与える可能性があるため、必要な場合にのみ使用すべきです。
- フルページリロードは、SvelteKitの高速なクライアントサイドナビゲーションの利点を失うことになります。
これらの属性を適切に使用することで、開発者はSvelteKitアプリケーション内で特定のリンクの動作をより細かく制御できます。これは特に、外部リソースとの統合や特殊なルーティング要件がある場合に有用です。
おわりに
今日は、 SvelteKitでのリンクオプションについて解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント