🙆
SvelteKitで<a>のプリロードの完了を待ちたい
はじめに
皆さん、こんにちは。
今回はSvelteKitの<a>のプリロードを待機する方法を調べましたので、ご紹介します。
<a>のプリロードって？
SvelteKitは<a>でページ遷移のリンクを配置します。この<a>は機能拡張されており、デフォルトだとホバーぼタイミングでプリロードが行われます。
プリロードが終わる前に遷移させたくない
プリロードが完了するのを待つには次のような書き方で実現できます。
preloadData 関数を活用することで、データの事前ロードとその結果に基づくページ遷移を効率的に管理できます。
<script lang="ts">
import { goto, preloadData } from "$app/navigation"; // SvelteKitのナビゲーション関数をインポート
// '/examplepage' のデータをプリロードし、成功した場合にそのページへ遷移する非同期関数
const loadCheck = async () => {
// '/examplepage' のデータをプリロードし、その結果を取得
const result = await preloadData("/examplepage");
// プリロードが成功し、HTTPステータスが200の場合
if (result.type === "loaded" && result.status === 200) {
goto("/examplepage"); // '/examplepage' へ遷移
}
// プリロード結果がリダイレクトを示す場合
else if (result.type === "redirect") {
goto(result.location); // 指定されたリダイレクト先へ遷移
}
// その他の場合（プリロード失敗など）
else {
console.error("プリロードに失敗しました:", result); // エラーメッセージをコンソールに出力
}
};
</script>
<!-- ボタンがクリックされたときに loadCheck 関数を実行 -->
<button onclick={loadCheck}>プリロードしてから遷移ボタン</button>
preloadData('パス') を呼び出すことで、該当のページのデータを事前にロードします。preloadData は Promise を返し、その解決時に以下のようなオブジェクトを取得します。
-
{ type: 'loaded', status: number, data: Record<string, any> }：データのロードが成功した場合。 -
{ type: 'redirect', location: string }：リダイレクトが必要な場合。
type が 'loaded' かつ status が 200 の場合、goto('/examplepage') により /examplepage へ遷移します。type が 'redirect' の場合、goto(result.location) によりリダイレクト先へ遷移します。
<a>のプリロードのタイミングを変えたい
<a>にはオプションがあり、プリロードのタイミングを変えることができます。デフォルトではホバーですが、ページが表示されたタイミングなどに変更可能です。
<!-- "eager" を指定することで、ページの読み込み時に即座にリンク先のデータをプリロード -->
<a href="/page1" data-sveltekit-preload-data="eager">リンク１</a>
<a>タグにdata-sveltekit-preload-data属性を追加することで、リンク先のデータのプリロードタイミングを制御できます。
- "hover" デフォルト
- "tap" デスクトップではマウスダウン、モバイルではタップ時にプリロードを開始
- "off"プリロードを無効化
- "eager"ページの読み込み時に即座にリンク先のコードをプリロード
- "viewport"リンクがビューポート内に入った際にコードをプリロード
おわりに
プリロードの制御について見てきました。あまり意識しないことかもしれませんが、頻繁なアクセスや確実なアクセスが必要な場合はプリロードについて工夫をしても良いかもしれませんね。
参考リンク集
Discussion