之前有說過在 SvelteKit 中，在頁面 redirect 的操作都只要透過 HTML 的 <a> 即可並不需要額外的 component ， 除此之外 <a> 在 SveltKit 還有其他方便的功能。

當 <a> href 的對象「不是外部連結」時，在預設情況下只要我們 hover 在 <a> 上， SvelteKit 會自動預載即將該頁面的資料。

data-sveltekit-preload-data

首先新增 +page.svelte 以及 +page.ts

<h1>Day22</h1>

export const load = async () => {
	console.log('day22/+page.ts load');
	return {
		foo: 'foo',
		bar: 'bar'
	};
};

然後在 routes/+layout.svelte 上新增 <a>

<nav class="mb-4">
  	<!-- 省略其他部分 -->
	<a href="/day22" >day22</a>
</nav>

可以從上面影片中觀察到，當滑鼠移到 day22 這個超連結時可以看到 Console 中有day22/+page.ts 的 console.log 了。

當然如果真的不想要每次只要 hover 就預先載入資料的話，可以將在 <a> 上新增這個 property data-sveltekit-preload-data="tap"

  <a href="/day22" data-sveltekit-preload-data="tap" >day22</a>

這邊就可以看到當我點擊下去後才會有 console.log

data-sveltekit-preload-code

而這個 property 則是控制什麼時候要預載相關的程式碼

<a href="/day22">day22</a>

在預設情況下一樣是我們 hover 到連結上時就會開始預載程式碼。

而 data-sveltekit-preload-code 有四種參數可以設定分別是 eager 、viewport 、 hover 、 tap ，後面兩者就跟 data-sveltekit-preload-data 是一樣的道理。

eager 的 viewport 差別是在一個是進去頁面當下只要「它在DOM上的連結都開始加載」，一個是當瀏覽器畫面看到時才開始預載。

從上面影片可以看到只要我重新整理就會馬上預載相關的程式碼了

至於 data-sveltekit-preload-code 設定的比 data-sveltekit-preload-data 還晚觸發的話是會無效的，因為「預先載入程式碼」本身就是「預先載入資料」的先決條件。

所以即使是使用以下寫法，依然是會在 hover 時就載入程式碼

<a href="/day22" data-sveltekit-preload-data="hover" data-sveltekit-preload-code="tap">day22</a>

參考資料

• https://kit.svelte.dev/docs/link-options

source code

https://github.com/toddLiao469469/30days-for-svelte5/tree/main/src/routes/day22

demo 站點

https://30days-for-svelte5.pages.dev/