Server load functions (+page.server.js) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What data does the page receive from this +page.server.js load function?

Consider this +page.server.js load function in SvelteKit:

export async function load() {
  return { user: { name: 'Alice', age: 30 } };
}

What will the page component receive as data?

Svelte

export async function load() {
  return { user: { name: 'Alice', age: 30 } };
}

A { user: { name: 'Alice', age: 30 } }

B { data: { user: { name: 'Alice', age: 30 } } }

C { props: { user: { name: 'Alice', age: 30 } } }

D { user: 'Alice', age: 30 }

💡 Hint

Remember that the object returned from load is passed as data to the page.

The load function returns an object whose properties become available as data in the page. So the page receives { user: { name: 'Alice', age: 30 } }.

📝 Syntax

intermediate

Which option correctly exports a server-only load function in +page.server.js?

In SvelteKit, which of the following is the correct syntax to export a server-only load function in +page.server.js?

A export function load() { return { message: 'Hello' }; }

B export const load = async () => { return { message: 'Hello' }; }

C export async function load() { return { message: 'Hello' }; }

D export async load() { return { message: 'Hello' }; }

💡 Hint

Check the correct way to declare an async function export in JavaScript.

The correct syntax is export async function load() { ... }. Option C is valid JavaScript but SvelteKit expects a named function export for load. Option C is missing async keyword. Option C is invalid syntax.

❓ state_output

advanced

What is the output rendered by the page with this server load function and page code?

Given this +page.server.js:

export async function load() {
  return { count: 5 };
}

And this Svelte page component:

<script>
  export let data;
</script>

<p>Count is {data.count}</p>

What will the page display?

Svelte

export async function load() {
  return { count: 5 };
}

A Count is undefined

B Count is 5

C Count is 0

D Error: data is not defined

💡 Hint

The data prop contains the object returned by the load function.

The load function returns { count: 5 }, so data.count is 5. The page renders "Count is 5".

🔧 Debug

advanced

Why does this +page.server.js load function cause a runtime error?

Examine this +page.server.js code:

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

Why might this cause a runtime error in SvelteKit?

Svelte

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

A Because the returned object must be wrapped inside another object

B Because the load function must not be async

C Because response.json() returns a promise that is not awaited

D Because fetch is not available in server load functions by default

💡 Hint

Check what the load function must return for the page to receive data correctly.

The load function must return an object whose properties become available as data. Returning data directly (which might be an array or other type) causes errors. Wrapping it inside an object fixes this.

🧠 Conceptual

expert

What is the main difference between +page.server.js load functions and +page.js load functions in SvelteKit?

Choose the best explanation of the key difference between +page.server.js load functions and +page.js load functions in SvelteKit.

A +page.server.js load functions cannot return data; +page.js load functions can return data.

B +page.server.js load functions run in the browser; +page.js load functions run only on the server.

C +page.server.js load functions are synchronous; +page.js load functions are asynchronous.

D +page.server.js load functions run only on the server and can access server-only APIs; +page.js load functions run in the browser and cannot access server-only APIs.

💡 Hint

Think about where each load function runs and what APIs they can access.

+page.server.js load functions run only on the server, so they can use server-only APIs like database access or secrets. +page.js load functions run in the browser and cannot access server-only resources.

Practice

1. What is the main purpose of a server load function in a +page.server.js file in SvelteKit?

easy

A. To fetch or prepare data on the server before the page loads

B. To handle client-side user interactions

C. To style the page components

D. To manage browser cookies on the client

Solution

1. Step 1: Understand server load function role

   Server load functions run on the server to get data before the page renders.

2. Step 2: Compare options to this role

   Only To fetch or prepare data on the server before the page loads describes fetching or preparing data on the server side before page load.

3. Final Answer:

   To fetch or prepare data on the server before the page loads -> Option A

4. Quick Check:

   Server load function = fetch data before page load [OK]

Hint: Server load functions run on server, not client [OK]

Common Mistakes:

• Confusing server load with client-side event handlers
• Thinking server load manages styles or cookies
• Assuming server load runs in the browser

2. Which of the following is the correct way to export a server load function in +page.server.js?

easy

A. export function load() { return { data: 'hello' }; }

B. export const load = () => { return { data: 'hello' }; }

C. export default function load() { return { data: 'hello' }; }

D. function load() { return { data: 'hello' }; }

Solution

1. Step 1: Recall SvelteKit server load export syntax

   Server load functions are exported as named exports, usually as a const arrow function.

2. Step 2: Check each option

   export const load = () => { return { data: 'hello' }; } uses export const load = () => { ... }, which is correct. export function load() { return { data: 'hello' }; } exports a function declaration but not as const, which is allowed but less common. export default function load() { return { data: 'hello' }; } uses default export which is incorrect. function load() { return { data: 'hello' }; } does not export at all.

3. Final Answer:

   export const load = () => { return { data: 'hello' }; } -> Option B

4. Quick Check:

   Named export const load = arrow function [OK]

Hint: Use named export const load = () => {} [OK]

Common Mistakes:

• Using default export instead of named export
• Not exporting the load function at all
• Using function declaration without export

3. Given this +page.server.js code, what will be the value of data.message in the page?

export const load = () => {
  return { message: 'Hello from server' };
};

medium

A. 'Hello from client'

B. undefined

C. An error occurs

D. 'Hello from server'

Solution

1. Step 1: Understand the load function return

   The load function returns an object with a property message set to 'Hello from server'.

2. Step 2: Recognize data passed to page

   The returned object properties become available as data in the page, so data.message equals 'Hello from server'.

3. Final Answer:

   'Hello from server' -> Option D

4. Quick Check:

   Returned object property = data property [OK]

Hint: Returned object keys become data properties [OK]

Common Mistakes:

• Expecting undefined if not wrapped in another object
• Confusing server message with client message
• Thinking load function causes error without async

4. What is wrong with this +page.server.js code?

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

medium

A. The load function must not be async

B. Returning data directly instead of an object causes error

C. Fetching from '/api/data' on server causes an infinite loop

D. Missing export keyword

Solution

1. Step 1: Analyze fetch call in server load

   The load function fetches from '/api/data', which is likely a route handled by the same app.

2. Step 2: Understand server fetch behavior

   Fetching from an internal API route in server load can cause the server to call itself repeatedly, causing an infinite loop.

3. Final Answer:

   Fetching from '/api/data' on server causes an infinite loop -> Option C

4. Quick Check:

   Internal fetch in server load risks infinite loop [OK]

Hint: Avoid fetching internal routes directly in server load [OK]

Common Mistakes:

• Thinking async is not allowed in load
• Returning data directly is valid
• Forgetting to export load function

5. You want to load user data securely on the server and pass it to the page. Which approach correctly uses +page.server.js to fetch user info from a database and expose only the username?

hard

A. export const load = async () => {
const user = await db.getUser();
return { username: user.username };
};

B. export const load = async () => {
const user = await db.getUser();
return user;
};

C. export const load = () => {
fetch('/api/user').then(res => res.json());
return {};
};

D. export const load = async () => {
const user = await fetch('/api/user');
return { user };
};

Solution

1. Step 1: Identify secure data fetching on server

   export const load = async () => { const user = await db.getUser(); return { username: user.username }; }; fetches user data directly from the database on the server, which is secure.

2. Step 2: Check data exposure

   export const load = async () => { const user = await db.getUser(); return { username: user.username }; }; returns only the username property, exposing minimal info to the page.

3. Step 3: Evaluate other options

   export const load = async () => { const user = await db.getUser(); return user; }; returns full user object, exposing sensitive data. export const load = () => { fetch('/api/user').then(res => res.json()); return {}; }; uses client fetch incorrectly in server load. export const load = async () => { const user = await fetch('/api/user'); return { user }; }; fetches from API route which may cause loops or expose more data.

4. Final Answer:

   export const load = async () => { const user = await db.getUser(); return { username: user.username }; }; -> Option A

5. Quick Check:

   Server fetch minimal data, return only needed props [OK]

Hint: Fetch securely on server, return only needed data [OK]

Common Mistakes:

• Returning full user object exposing sensitive info
• Fetching from API route inside server load
• Using client fetch inside server load