How to Use Server Load Function in Svelte for Data Loading

In Svelte, use the load function exported from a +page.server.js file to fetch or prepare data on the server before the page renders. This function runs only on the server and returns data that becomes available as props in your Svelte page component.

Syntax

The load function is an async function exported from a +page.server.js file. It receives a event object with request details and returns an object with data to pass to the page.

• export async function load(event): Defines the server-side load function.
• event: Contains request info like params, fetch, cookies.
• return { key: value }: Data returned here is accessible in the page component.

javascript

export async function load(event) {
  // fetch data or prepare server-side info
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { data };
}

Example

This example shows a +page.server.js file fetching user data from an API and passing it to the Svelte page component, which then displays the user name.

javascript

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

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

<h1>User Info</h1>
<p>Name: {data.user.name}</p>

Output

User Info
Name: Leanne Graham

Common Pitfalls

• Trying to use load in +page.js instead of +page.server.js when you want server-only code.
• Using browser-only APIs like window inside the server load function causes errors.
• Not returning an object from load or returning undefined leads to missing data in the page.
• Forgetting to access returned data via the data prop in the Svelte component.

javascript

/* Wrong: Using window in server load */
export async function load() {
  console.log(window.location.href); // Error: window is not defined
  return {};
}

/* Right: Use event.url instead */
export async function load({ url }) {
  console.log(url.href); // Works on server
  return {};
}

Quick Reference

Concept	Description
+page.server.js	File where server load function is defined
export async function load(event)	Server-side function to fetch or prepare data
event	Contains request info like params, fetch, cookies
return { key: value }	Data passed as props to the page component
Access data in +page.svelte	Use export let data; to receive load data

Key Takeaways

Use the server load function in +page.server.js to fetch data on the server before rendering.

Return an object from load; its properties become props in your Svelte page component.

Avoid browser-only APIs inside server load; use event properties instead.

Access the returned data in your page component via the data prop.

Server load runs only on the server, improving security and performance.