SvelteKit's `load` Function: Pre-fetch Data for Pages

Why it exists

Before a page can be displayed, it often needs data from a database or an API. Without a dedicated mechanism, you'd have to render a loading spinner, fetch data on the client, and then update the UI. SvelteKit's load function solves this by fetching data before the component renders, enabling fast, data-driven server-side rendering (SSR) and seamless client-side navigation.

The mental model

Think of the load function as a bouncer at a club. Your Svelte page component is the main event, but it can't start until the bouncer (load) gives the green light by providing the necessary data. This function lives in a file alongside your page component (+page.js for +page.svelte) and its return value is automatically passed to the component as a data prop.

How it works

A +page.js or +layout.js file can export an async function called load. This function receives an event object containing context about the request, such as params from the URL (e.g., the slug in /blog/[slug]) and a universal fetch function. Whatever object your load function returns is made available to the corresponding .svelte file through the data prop. If you return { post: myPostObject }, you can access data.post in your component.

When to use it

Use the universal load function (in +page.js) when you need to fetch data that can be accessed from both the server and the browser, like calling a public API. It runs on the server for the first page visit, giving you fast SSR, and then runs in the browser for subsequent client-side navigations, making the app feel instantaneous.

When not to use it

Do not use the universal load function for operations that require private credentials, API keys, or direct database access. Because the code in +page.js can be sent to and run in the browser, you would expose your secrets. For sensitive operations, you must use a server-only load function in a +page.server.js file.

One canonical example

To fetch data for a blog post page at src/routes/blog/[slug]/, you would create a sibling file, +page.js.

File: src/routes/blog/[slug]/+page.js

export function load({ params }) {

// In a real app, you'd fetch this from an API

return {

post: { title: Title for ${params.slug}, content: Content for post ${params.slug} goes here. } }; }

File: src/routes/blog/[slug]/+page.svelte <script> let { data } = $props(); </script> <h1>{data.post.title}</h1> {data.post.content}

When a user visits /blog/my-first-post, the load function runs, params.slug is 'my-first-post', and the returned post object is passed to the page component as data.