> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/sveltejs/kit/llms.txt
> Use this file to discover all available pages before exploring further.
# Understanding page data
> Learn how data flows through layouts and pages in SvelteKit
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:
```javascript src/routes/blog/[slug]/+page.js theme={null}
export function load({ params }) {
return {
post: {
title: `Title for ${params.slug} goes here`,
content: `Content for ${params.slug} goes here`
}
};
}
```
```svelte src/routes/blog/[slug]/+page.svelte theme={null}
{data.post.title}
{@html data.post.content}
```
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:
Create a `+layout.server.js` file that returns data
```javascript src/routes/blog/[slug]/+layout.server.js theme={null}
import * as db from '$lib/server/database';
export async function load() {
return {
posts: await db.getPostSummaries()
};
}
```
Use the data in `+layout.svelte`
```svelte src/routes/blog/[slug]/+layout.svelte theme={null}
{@render children()}
```
Data from parent layouts is available to all child pages
```svelte src/routes/blog/[slug]/+page.svelte theme={null}
```
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:
```svelte src/routes/+layout.svelte theme={null}
{page.data.title}
```
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:
* Files: `+page.js`, `+layout.js`
* Runs on both server and client
* Can return any value including classes
* Reruns in browser during hydration
* Files: `+page.server.js`, `+layout.server.js`
* Only runs on the server
* Must return serializable data
* Access to cookies, databases, secrets
### When each runs
Always run on the server, both during SSR and when fetching data for client-side navigation.
* 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`:
```javascript +page.server.js theme={null}
export async function load() {
return {
serverMessage: 'hello from server load function'
};
}
```
```javascript +page.js theme={null}
export async function load({ data }) {
return {
serverMessage: data.serverMessage,
universalMessage: 'hello from universal load function'
};
}
```
## URL data
Load functions have access to URL information:
Contains `origin`, `hostname`, `pathname`, and `searchParams`
```javascript theme={null}
export function load({ url }) {
const query = url.searchParams.get('q');
}
```
Contains the route ID
```javascript theme={null}
export function load({ route }) {
console.log(route.id); // '/a/[b]/[...c]'
}
```
Derived from `url.pathname` and `route.id`
```javascript theme={null}
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`:
```javascript theme={null}
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()`:
```javascript +layout.js theme={null}
export function load() {
return { a: 1 };
}
```
```javascript abc/+layout.js theme={null}
export async function load({ parent }) {
const { a } = await parent();
return { b: a + 1 };
}
```
```javascript abc/+page.js theme={null}
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:
```javascript theme={null}
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:
If your `load` uses `params.slug`, it reruns when `slug` changes.
If your `load` uses `url.pathname` or `url.search`, it reruns when those change.
Calling `url.searchParams.get('x')` makes it rerun when `x` changes.
If a parent `load` reruns and this `load` calls `await parent()`.
Via `invalidate(url)`, `invalidateAll()`, or `depends()`.
## Streaming with promises
Return unresolved promises from server `load` to stream data:
```javascript theme={null}
export async function load({ params }) {
return {
// Comments stream in later
comments: loadComments(params.slug),
// Post loads immediately
post: await loadPost(params.slug)
};
}
```
```svelte theme={null}
{data.post.title}
{@html data.post.content}
{#await data.comments}
Loading comments...
{:then comments}
{#each comments as comment}
{comment.content}
{/each}
{:catch error}
Error loading comments: {error.message}
{/await}
```
Streaming only works when JavaScript is enabled and on platforms that support streaming responses.
Follow the interactive tutorial on loading data