Page load functions (+page.js) in Svelte - Step-by-Step Execution

Concept Flow - Page load functions (+page.js)

Page request

↓

+page.js load function runs

↓

Fetch or prepare data

↓

Return data object

↓

Page component receives data

↓

Page renders with data

When a page loads, the +page.js file's load function runs first to get data, then passes it to the page component to render.

Execution Sample

Svelte

export async function load({ fetch }) {
  const res = await fetch('/api/data');
  const data = await res.json();
  return { data };
}

This load function fetches data from an API and returns { data } which becomes the `data` prop for the page component.

Execution Table

Step	Action	Evaluation	Result
1	Page requested by user	N/A	Trigger +page.js load function
2	Run load function	Call load({ fetch })	Start async fetch
3	Fetch data from /api/data	Await fetch	Response received
4	Parse JSON from response	Await res.json()	Data object created
5	Return data object	return { data }	Data ready for page
6	Page component receives data	Data passed in	Page renders with data

💡 Load function completes and returns data object, page renders with data.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
res	undefined	Response object	Response object	Response object
data	undefined	undefined	Parsed JSON object	Parsed JSON object

Key Moments - 3 Insights

Why do we use 'await' inside the load function?

Because the fetch and res.json() are asynchronous, 'await' pauses execution until data is ready, as shown in steps 3 and 4 of the execution_table.

What happens if the load function does not return { data }?

The page component will not receive any data to render. Step 5 shows returning { data } is necessary for passing data to the page.

Is the load function run on the server or client?

+page.js load runs on the server for initial loads (SSR) and on the client for navigations to fetch data before rendering.

Visual Quiz - 3 Questions

Look at the execution_table, what variable holds the parsed JSON data after step 4?

A data

B res

C props

D load

💡 Hint

Check the variable_tracker row for 'data' after step 4.

At which step does the page component receive the data to render?

A Step 3

B Step 5

C Step 6

D Step 4

💡 Hint

Look at the execution_table row describing when data is passed to the page.

If the fetch call fails, what will happen to the load function execution?

A It will return empty props immediately

B It will throw an error and stop before returning data

C It will skip parsing JSON and return undefined

D It will continue and return stale data

💡 Hint

Consider what happens if 'await fetch' fails at step 3 in the execution_table.

Concept Snapshot

Page load functions (+page.js):
- Export an async 'load' function
- Fetch or prepare data inside it
- Return object like { data }
- Object passed as `data` prop to page component
- Runs before page renders (server/client)

Full Transcript

When a user requests a page, SvelteKit runs the +page.js load function first. This function can fetch data asynchronously using 'await'. After fetching and parsing data, it returns { data }, which becomes the `data` prop. The page component receives `data` and renders the page with the data. If the fetch fails, the load function throws an error and stops. This process ensures the page has all needed data before showing to the user.