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.