Understanding page data

Before a page component can be rendered, SvelteKit needs to get data. This guide explains how data flows through your application.

Page data

A +page.svelte file can have a sibling +page.js that exports a load function:

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

export function load({ params }) {
	return {
		post: {
			title: `Title for ${params.slug} goes here`,
			content: `Content for ${params.slug} goes here`
		}
	};
}

src/routes/blog/[slug]/+page.svelte

<script>
	let { data } = $props();
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>

The return value of a load function is available to the page via the data prop.

Layout data

Layout load functions work the same way:

Define layout load

Create a +layout.server.js file that returns data

src/routes/blog/[slug]/+layout.server.js

import * as db from '$lib/server/database';

export async function load() {
  return {
    posts: await db.getPostSummaries()
  };
}

Access in layout

Use the data in +layout.svelte

src/routes/blog/[slug]/+layout.svelte

<script>
  let { data, children } = $props();
</script>

<main>
  {@render children()}
</main>

<aside>
  <h2>More posts</h2>
  <ul>
    {#each data.posts as post}
      <li><a href="/blog/{post.slug}">{post.title}</a></li>
    {/each}
  </ul>
</aside>

Access in child pages

Data from parent layouts is available to all child pages

src/routes/blog/[slug]/+page.svelte

<script>
  import { page } from '$app/state';
  
  let { data } = $props();
  
  // Access parent layout data
  let index = $derived(data.posts.findIndex(post => post.slug === page.params.slug));
  let next = $derived(data.posts[index + 1]);
</script>

If multiple load functions return data with the same key, the last one wins. A page load will override a layout load for the same key.

page.data

The page store provides access to all data for the current page:

src/routes/+layout.svelte

<script>
	import { page } from '$app/state';
</script>

<svelte:head>
	<title>{page.data.title}</title>
</svelte:head>

Use page.data when a parent layout needs to access data from a child page or layout.

Universal vs server load

There are two types of load functions:

Universal load

Files: +page.js, +layout.js
Runs on both server and client
Can return any value including classes
Reruns in browser during hydration

Server load

Files: +page.server.js, +layout.server.js
Only runs on the server
Must return serializable data
Access to cookies, databases, secrets

When each runs

Server load functions

Always run on the server, both during SSR and when fetching data for client-side navigation.

Universal load functions

Run on the server during SSR
Run again during hydration
Run in the browser for subsequent navigations
Can be disabled via export const ssr = false

Combining both

When you have both, the server load runs first and its output is passed to the universal load:

export async function load() {
	return {
		serverMessage: 'hello from server load function'
	};
}

export async function load({ data }) {
	return {
		serverMessage: data.serverMessage,
		universalMessage: 'hello from universal load function'
	};
}

URL data

Load functions have access to URL information:

URL

Contains origin, hostname, pathname, and searchParams

export function load({ url }) {
  const query = url.searchParams.get('q');
}

object

Contains the route ID

export function load({ route }) {
  console.log(route.id); // '/a/[b]/[...c]'
}

object

Derived from url.pathname and route.id

export function load({ params }) {
  // For route /a/[b]/[...c] and URL /a/x/y/z
  console.log(params.b);  // 'x'
  console.log(params.c);  // 'y/z'
}

Making fetch requests

Use the provided fetch function in load:

export async function load({ fetch, params }) {
	const res = await fetch(`/api/items/${params.id}`);
	const item = await res.json();

	return { item };
}

The fetch in load has special powers:

Inherits cookies and authorization headers
Makes relative requests on the server
Inlines responses into HTML during SSR
Reads from HTML during hydration

Parent data

Access data from parent load functions with await parent():

export function load() {
	return { a: 1 };
}

export async function load({ parent }) {
	const { a } = await parent();
	return { b: a + 1 };
}

export async function load({ parent }) {
	const { a, b } = await parent();
	return { c: a + b };
}

Be careful not to create waterfalls. Call parent() after independent operations:

export async function load({ params, parent }) {
  // Good: fetch data first
  const data = await getData(params);
  const parentData = await parent();
  
  return { ...data, meta: { ...parentData.meta, ...data.meta } };
}

When load reruns

SvelteKit tracks dependencies to avoid unnecessary reruns:

Referenced params change

If your load uses params.slug, it reruns when slug changes.

Referenced URL properties change

If your load uses url.pathname or url.search, it reruns when those change.

Search params accessed

Calling url.searchParams.get('x') makes it rerun when x changes.

Parent reruns

If a parent load reruns and this load calls await parent().

Manual invalidation

Via invalidate(url), invalidateAll(), or depends().

Streaming with promises

Return unresolved promises from server load to stream data:

export async function load({ params }) {
	return {
		// Comments stream in later
		comments: loadComments(params.slug),
		// Post loads immediately
		post: await loadPost(params.slug)
	};
}

<script>
	let { data } = $props();
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>

{#await data.comments}
	Loading comments...
{:then comments}
	{#each comments as comment}
		<p>{comment.content}</p>
	{/each}
{:catch error}
	<p>Error loading comments: {error.message}</p>
{/await}

Streaming only works when JavaScript is enabled and on platforms that support streaming responses.

Learn more

Follow the interactive tutorial on loading data

Getting Started

Core Concepts

Build and Deploy

Advanced

Understanding page data

Page data

Layout data

page.data

Universal vs server load

Universal load

Server load

When each runs

Combining both

URL data

Making fetch requests

Parent data

When load reruns

Streaming with promises

Learn more

​Page data

​Layout data

​page.data

​Universal vs server load

Universal load

Server load

​When each runs

​Combining both

​URL data

​Making fetch requests

​Parent data

​When load reruns

​Streaming with promises

Learn more

Page data

Layout data

page.data

Universal vs server load

When each runs

Combining both

URL data

Making fetch requests

Parent data

When load reruns

Streaming with promises