How to Use Universal Load Function in Svelte

In SvelteKit, use the load function exported from a page or layout to fetch data universally on server and client. This function runs before the component renders, allowing you to prepare data for rendering regardless of where the code runs.

Syntax

The load function is an async function exported from a SvelteKit page or layout script. It receives a LoadEvent object with useful properties like fetch, params, and url. It must return an object whose properties become available as props in the component.

• async function load(event): The main function to fetch or prepare data.
• event.fetch: Use this to make fetch requests that work on server and client.
• event.params: Access dynamic route parameters.
• return { props }: Return data as props for the page.

javascript

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

Example

This example shows a SvelteKit page using the universal load function to fetch JSON data from an API endpoint. The data is then displayed in the page component.

svelte

<script context="module">
  export async function load({ fetch }) {
    const res = await fetch('/api/users');
    const users = await res.json();
    return { users };
  }
</script>

<script>
  export let users;
</script>

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

Output

<h1>User List</h1><ul><li>Alice</li><li>Bob</li><li>Charlie</li></ul>

Common Pitfalls

Common mistakes when using the universal load function include:

• Not using event.fetch and instead using the global fetch, which may not work on the server.
• Returning data directly instead of inside a props object (legacy pattern).
• Trying to access browser-only APIs like window inside load, which runs on the server.

javascript

/* Wrong: using global fetch */
export async function load() {
  const res = await fetch('/api/data'); // May fail on server
  const data = await res.json();
  return { data };
}

/* Right: use event.fetch and return data */
export async function load({ fetch }) {
  const res = await fetch('/api/data');
  const data = await res.json();
  return { data };
}

Quick Reference

• Use export async function load({ fetch, params, url }) to fetch data universally.
• Always use event.fetch to ensure server and client compatibility.
• Return an object with your data as keys.
• Do not use browser-only APIs inside load.
• load runs before the component renders, so data is ready on first paint.

Key Takeaways

Use the universal load function to fetch data on both server and client in SvelteKit.

Always use the fetch provided in the load function's event parameter.

Return data as keys in the returned object to pass it to the component.

Avoid browser-only APIs inside the load function as it runs on the server.

The load function runs before rendering, ensuring data is ready for the page.