Sveltekit - Link Options

---

---

The Link Options chapter in SvelteKit provides a brief overview of various link options provided by SvelteKit that allow developers to control how links behave and how SvelteKit navigates between pages. SvelteKit provides several link options that enhance navigation within applications, such as preloading and reloading of pages.

Preloading

Preloading in SvelteKit is a feature that improves the user experience by loading important data or code before the user clicks on a link.

Implementation

To implement preloading, you can add the data-sveltekit-preload-data attribute to your links. For example:

<nav>
   <a href="/">home</a>
   <a href="/example-url" data-sveltekit-preload-data>example-url</a>
   <a href="/example-url">example-url</a>
</nav>

Preload Customizations

SvelteKit allows us to customize the preload by specifying values for the data-sveltekit-preload-data attribute and also SvelteKit allows us to preload javascript code without loading its data using the data-sveltekit-preload-code attribute:

• hover (default): Starts preloading on hover.
• tap: Starts preloading only on tap.
• off: Disables preloading.
• eager: Preloads everything immediately.
• viewport: Preloads as elements appear in the viewport.

Programmatic Preloading

SvelteKit also allows us to implement preloading programmatically using functions imported from $app/navigation as shown below:

import { preloadCode, preloadData } from '$app/navigation';

// Preload the code and data needed for navigating to /page1
preloadData('/page1');

// Preload only the code needed for navigating to /page2
preloadCode('/page2');

Reloading the Page

In SvelteKit, when you move from one page to another, the whole page doesn't refresh by default. This allows for a smoother user experience, where state and data can persist across navigations.

Using the data-sveltekit-reload Attribute

If you want to disable the default navigation behavior and trigger a full page reload, you can use the data-sveltekit-reload attribute on a link or a container element that contains links. Syntax example:

<nav data-sveltekit-reload>
   <a href="/">home</a>
   <a href="/about">about</a>
</nav>

Example

The following is a simple example of preloading in the Sveltekit application which preloads data and navigates to the next page.

<!--src/routes/api/hello.js-->
export function get() {
   return {
      body: {
      message: 'Hello, World!'
      }
   };
}

<!--src/routes/hello/+page.svelte-->
<script context="module">
   export async function load({ fetch }) {
      const response = await fetch('/api/hello');
      const data = await response.json();
      
      return { props: { message: data.message } };
   }
</script>

<script>
   export let message;
</script>

<h1>{message}</h1>

<!--src/routes/+layout.svelte-->
<nav>
   <a href="/">Home</a>
   <a href="/hello" data-sveltekit-preload-data="hover">Load Hello Message</a>
</nav>

<slot />

Output