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

Concept Flow - Server load functions (+page.server.js)

Request from browser

↓

+page.server.js load function runs

↓

Fetch or compute data on server

↓

Return data as props

↓

Svelte page receives data

↓

Page renders with server data

↓

Send HTML to browser

When a page is requested, the +page.server.js load function runs on the server to get data, then passes it to the page for rendering.

Execution Sample

Svelte

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

This load function fetches data from an API on the server and returns it as props for the page.

Execution Table

Step	Action	Evaluation	Result
1	Request received	Browser requests page	Trigger +page.server.js load
2	Run load function	Call load()	Start fetching data
3	Fetch data	await fetch('https://api.example.com/data')	Response object received
4	Parse JSON	await res.json()	Data object extracted
5	Return props	return { data }	Data passed to page
6	Page render	Page uses data props	HTML generated with data
7	Send response	Send HTML to browser	Page displayed to user

💡 Load function completes after returning props; page renders and response sent.

Variable Tracker

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

Key Moments - 3 Insights

Why does the load function run on the server and not the browser?

Because +page.server.js load functions run only on the server to keep secrets safe and reduce client work, as shown in step 2 of the execution_table.

What happens if the fetch call fails inside the load function?

The load function will throw an error and the page won't render normally; error handling should be added to manage this, which is not shown in the simple example.

Why do we return data inside an object?

Returning { data } passes the data as props to the page component, enabling it to render with that data, as seen in step 5.

Visual Quiz - 3 Questions

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

A res

B data

C props

D load

💡 Hint

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

At which step does the page start rendering with the server data?

A Step 6

B Step 5

C Step 3

D Step 7

💡 Hint

Refer to the execution_table row describing 'Page render'.

If the fetch URL changes, which step in the execution_table will be directly affected?

A Step 5

B Step 2

C Step 3

D Step 6

💡 Hint

Look at the step where fetch is called.

Concept Snapshot

Server load functions (+page.server.js):
- Run only on server when page requested
- Fetch or compute data securely
- Return { ... } to pass data
- Page receives props and renders
- Keeps secrets safe and improves performance

Full Transcript

When a user requests a page, the +page.server.js load function runs on the server. It fetches or computes data needed for the page. This data is returned in an object. The page component receives these properties as props and renders HTML using the data. Finally, the server sends the rendered HTML to the browser. This process keeps sensitive operations on the server and improves page load speed.