Layout load functions in Svelte - Step-by-Step Execution

Concept Flow - Layout load functions

Page Request

↓

Layout load function runs

↓

Fetch or prepare data

↓

Return data

↓

Layout component receives data

↓

Render layout with data

↓

Render page inside layout

When a page loads, the layout's load function runs first to get data, then passes it to the layout component before rendering the page inside.

Execution Sample

Svelte

export async function load() {
  const user = await fetch('/api/user').then(r => r.json());
  return { user };
}

This load function fetches user data and returns it as data for the layout component.

Execution Table

Step	Action	Evaluation	Result
1	Page request starts	N/A	Trigger layout load function
2	Call load()	Fetch user data from '/api/user'	User data received: {name: 'Alice'}
3	Return data	Return { user }	Data object with user data
4	Layout receives data	Data passed to layout component	Layout renders with user data
5	Page renders inside layout	Page content uses layout data	Page shows with user info
6	End	All data loaded and rendered	Page fully displayed with layout

💡 Layout load function completes and returns data, allowing page rendering to continue.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
user	undefined	{name: 'Alice'}	{name: 'Alice'}	{name: 'Alice'}
data	undefined	undefined	{ user: {name: 'Alice'} }	{ user: {name: 'Alice'} }

Key Moments - 3 Insights

Why does the layout load function run before the page load function?

Because the layout wraps the page, its load function runs first to provide data that the page can use, as shown in execution_table step 1 and 4.

What happens if the load function does not return data?

The layout component will not receive any data, so it cannot render dynamic content. See execution_table step 3 where returning data is crucial.

Is the data fetched in the layout load function available to the page?

Yes, the data returned from the layout load function is accessible to the page inside the layout, as shown in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'user' after step 2?

A undefined

B {name: 'Alice'}

C null

D {}

💡 Hint

Check variable_tracker row for 'user' after Step 2.

At which step does the layout component receive the data?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at execution_table where data are passed to layout component.

If the load function returned no data, what would change in the execution_table?

A All of the above

B Step 3 would return an empty object

C Step 5 would render page without layout data

D Step 4 would not pass data to layout

💡 Hint

Consider the flow of data from load function to layout and page rendering.

Concept Snapshot

Layout load functions run before page load.
They fetch or prepare data.
Return data to layout.
Layout uses data to render.
Page renders inside layout with data.
Essential for shared data across pages.

Full Transcript

When a user requests a page, SvelteKit first runs the layout load function. This function can fetch data, like user info, and returns it as data. The layout component receives this data and renders accordingly. Then the page content renders inside the layout, using the data provided. This process ensures shared data is ready before the page shows. If the load function does not return data, the layout won't have data to display. The execution table shows each step from request to final render, tracking variables like 'user' and 'data'. This helps beginners see how data flows and when components update.