How to Use Page Data in SvelteKit: Simple Guide

In SvelteKit, you use the load function in a page's +page.js or +page.ts file to fetch or prepare data, which is then accessible in the page component via the data prop. Alternatively, you can access page data reactively using the $page store inside your Svelte component.

Syntax

The load function runs on the server or client before the page renders. It returns an object whose properties become available as data in the page component.

Inside the Svelte component, you access this data by using the export let data; statement or by subscribing to the $page store for reactive updates.

javascript

export async function load({ params, fetch }) {
  // Fetch or prepare data here
  const response = await fetch('/api/items');
  const items = await response.json();
  return { items };
}

// In +page.svelte
<script>
  export let data;
  // data.items is available here
</script>

Example

This example shows how to fetch a list of users in the load function and display them in the page component.

svelte

// +page.js
export async function load({ fetch }) {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();
  return { users };
}

// +page.svelte
<script>
  export let data;
</script>

<h1>User List</h1>
<ul>
  {#each data.users as user}
    <li>{user.name} ({user.email})</li>
  {/each}
</ul>

Output

<h1>User List</h1><ul><li>Leanne Graham ([e-mail])</li><li>Ervin Howell ([e-mail])</li><li>Clementine Bauch ([e-mail])</li><li>Patricia Lebsack ([e-mail])</li><li>Chelsey Dietrich ([e-mail])</li><li>Mrs. Dennis Schulist ([e-mail])</li><li>Kurtis Weissnat ([e-mail])</li><li>Nicholas Runolfsdottir V ([e-mail])</li><li>Glenna Reichert ([e-mail])</li><li>Clementina DuBuque ([e-mail])</li></ul>

Common Pitfalls

• Not exporting load from the correct file (+page.js or +page.ts) will cause data not to load.
• Forgetting to export let data; in the Svelte component means you can't access the loaded data.
• Trying to access data before it is loaded or outside the component scope leads to errors.
• Using fetch inside load must be the provided one, not the global fetch, to ensure SSR compatibility.

svelte

// Wrong: load function in +page.svelte (not supported)
<script>
  export async function load() {
    return { message: 'Hello' };
  }
</script>

// Right: load function in +page.js
export async function load() {
  return { message: 'Hello' };
}

// In +page.svelte
<script>
  export let data;
</script>
<p>{data.message}</p>

Quick Reference

Summary tips for using page data in SvelteKit:

• Define load in +page.js/+page.ts to fetch or prepare data.
• Access data in +page.svelte via export let data;.
• Use the $page store for reactive access to page data and URL info.
• Always use the fetch passed to load for SSR compatibility.
• Remember that load can run on server or client depending on navigation.

Key Takeaways

Use the load function in +page.js/+page.ts to prepare data for your page.

Access loaded data in +page.svelte by exporting let data.

Use the $page store for reactive page data and URL info inside components.

Always use the fetch provided to load for server-side rendering compatibility.

Keep load functions and data access in separate files for clarity and correctness.