How to Use Load Function for Data in Svelte

In SvelteKit, use the load function inside a page or layout script to fetch data before the component renders. This function runs on the server or client and returns data that becomes available as props in your component.

Syntax

The load function is an async function exported from a +page.js or +layout.js file. It receives a fetch method and other context parameters, and returns an object with data properties.

Example parts:

• export async function load({ fetch, params }): defines the load function with context.
• const response = await fetch(url): fetch data from an API or endpoint.
• return { data }: return data as props for the page component.

javascript

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

Example

This example shows a SvelteKit page that uses the load function to fetch a list of users from an API and display them.

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 users;
</script>

<h1>User List</h1>
<ul>
  {#each 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

Common mistakes when using the load function include:

• Not returning an object from load. Always return an object with your data.
• Trying to use browser-only APIs inside load, which runs on the server during SSR.
• Forgetting to export load as export async function load.
• Not handling fetch errors, which can cause the page to fail silently.

javascript

// Wrong: missing return
export async function load() {
  const data = await fetch('/api').then(r => r.json());
  // forgot to return
}

// Right:
export async function load() {
  const data = await fetch('/api').then(r => r.json());
  return { data };
}

Quick Reference

Tips for using load in SvelteKit:

• Use load in +page.js or +layout.js files.
• Return an object with data to pass props to your page component.
• Use the fetch provided in the context for server-side requests.
• Handle errors gracefully inside load.
• Remember load runs on server and client during navigation.

Key Takeaways

The load function fetches data before the page renders and passes it as props.

Always export load as an async function returning an object with your data.

Use the fetch method from load's context for server-safe requests.

Avoid browser-only APIs inside load since it runs on the server during SSR.

Handle fetch errors inside load to prevent page failures.