Svelte Load Functions

Fetch route data before rendering using SvelteKit's load functions — server-only, universal, streaming, and invalidation patterns

When to Use

• You need to fetch data before a page renders (and show it server-side)
• You are choosing between

  +page.ts

  (universal) and

  +page.server.ts

  (server-only)
• You need access to database clients, cookies, or session data in your load function
• You want to stream slow data to the browser without blocking the initial render
• You need to invalidate and re-fetch data after a form action or user interaction

Instructions

Server load (+page.server.ts):

1. Use

   +page.server.ts

   when you need secrets, database access, cookies, or server-only APIs. This function never runs in the browser:

// src/routes/users/[id]/+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, locals, cookies }) => {
  const user = await locals.db.user.findUnique({
    where: { id: params.id },
  });

  if (!user) throw error(404, 'User not found');

  return { user };
};

2. Access the authenticated session via

   locals

   (set in

   hooks.server.ts

   ):

export const load: PageServerLoad = async ({ locals }) => {
  if (!locals.user) redirect(303, '/login');
  return { user: locals.user };
};

Universal load (+page.ts):

3. Use

   +page.ts

   for load functions that can run on both server (initial request) and client (navigation). Use the provided

   fetch

   — it is enhanced by SvelteKit for deduplication and credentials:

// src/routes/posts/+page.ts
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ fetch, params }) => {
  const res = await fetch(`/api/posts?page=${params.page ?? 1}`);
  const posts = await res.json();
  return { posts };
};

Accessing load data in the page:

4. Receive

   data

   as a prop (Svelte 5 with

   $props

   ) or as

   export let data

   (Svelte 4):

<!-- +page.svelte -->
<script lang="ts">
  import type { PageData } from './$types'
  let { data }: { data: PageData } = $props()
</script>

{#each data.posts as post}
  <article>{post.title}</article>
{/each}

Error handling:

5. Throw

   error

   or

   redirect

   from

   @sveltejs/kit

   to trigger the error page or redirect:

import { error, redirect } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params }) => {
  const post = await getPost(params.slug);
  if (!post) throw error(404, { message: 'Post not found' });
  if (post.status === 'draft') redirect(303, '/');
  return { post };
};

Layout loads:

6. Add a

   +layout.server.ts

   to provide data to all pages in a route segment. Layout data is merged with page data:

// src/routes/(app)/+layout.server.ts
export const load: LayoutServerLoad = async ({ locals }) => {
  return { currentUser: locals.user };
};

Streaming with promises:

7. Return a promise for slow data to stream it to the client without blocking the initial render. Wrap the slow part in

   {#await}

   :

// +page.server.ts
export const load: PageServerLoad = async ({ params }) => {
  // fast — included in initial HTML
  const product = await getProduct(params.id);

  // slow — streamed after initial render
  const reviews = getReviews(params.id); // not awaited

  return { product, reviews };
};

<!-- +page.svelte -->
{#await data.reviews}
  <p>Loading reviews...</p>
{:then reviews}
  {#each reviews as review}<Review {review} />{/each}
{/await}

Invalidation:

8. Use

   depends('app:tag')

   to declare a custom dependency; call

   invalidate('app:tag')

   to re-run the load function:

// load function
export const load: PageLoad = async ({ fetch, depends }) => {
  depends('app:cart');
  const cart = await fetch('/api/cart').then((r) => r.json());
  return { cart };
};

// After updating cart:
import { invalidate } from '$app/navigation';
await invalidate('app:cart');

9. Use

   invalidateAll()

   to re-run all load functions on the current page.

Details

Server vs. universal load — decision matrix:

+page.server.ts

+page.server.ts

+page.server.ts

+page.server.ts

+page.ts

+page.ts

Data merging:

When a route has both

+layout.server.ts

+page.server.ts

Type generation:

SvelteKit generates types for

PageData

PageServerLoad

LayoutLoad

LayoutServerLoad

.svelte-kit/types/

./$types

The

parent

Load functions can await parent layout data via

parent()

export const load: PageLoad = async ({ parent }) => {
  const { user } = await parent();
  return { greeting: `Hello, ${user.name}` };
};

Fetch in load vs. $fetch:

Always use the

fetch

• Includes credentials (cookies) when fetching same-origin
• Deduplicates identical requests within the same render cycle
• Works correctly on both server and client

Do not use the global

fetch

Source

https://kit.svelte.dev/docs/load

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.