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

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this +page.js load function return?

Consider this +page.js file in a SvelteKit app:

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

What will the page component receive as data?

Svelte

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

A Undefined, because load must be async

B A string 'Hello from load!' directly

C An object with a property 'message' containing the string 'Hello from load!'

D An error because load must return a Promise

💡 Hint

The load function can return an object synchronously or a Promise resolving to an object.

The load function returns an object that becomes the data prop in the page component. Returning { message: 'Hello from load!' } means data.message will be that string.

📝 Syntax

intermediate

Which +page.js load function syntax is correct for async data fetching?

Choose the correct syntax for an async load function that fetches JSON data from an API.

A

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

B

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

C

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

D

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

💡 Hint

Remember that await can only be used inside async functions.

Option B correctly marks load as async and uses await to wait for the fetch and JSON parsing. Options A and D misuse await outside async or miss awaiting promises.

🔧 Debug

advanced

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

Look at this +page.js code:

export function load() {
  return fetch('/api/data')
    .then(res => res.json())
    .then(json => ({ data: json }));
}

What is the cause of the runtime error when the page loads?

Svelte

export function load() {
  return fetch('/api/data')
    .then(res => res.json())
    .then(json => ({ data: json }));
}

A The fetch URL is relative and causes a network error on server-side load

B The load function returns a Promise but SvelteKit expects a plain object synchronously

C The load function must be async and use await, promises are not allowed

D Nothing wrong; this code works fine and returns data correctly

💡 Hint

Consider where the load function runs and how fetch URLs behave there.

The load function runs on the server during SSR. Using a relative URL like '/api/data' in fetch causes a network error because the server does not know the base URL. Absolute URLs or special handling is needed.

❓ state_output

advanced

What is the value of data.count after this load function runs?

Given this +page.js load function:

export async function load({ url }) {
  const count = Number(url.searchParams.get('count')) || 0;
  return { count: count + 1 };
}

If the page URL is https://example.com/page?count=4, what is data.count in the page component?

Svelte

export async function load({ url }) {
  const count = Number(url.searchParams.get('count')) || 0;
  return { count: count + 1 };
}

A 4

B NaN

C 0

D 5

💡 Hint

Check how url.searchParams.get and Number work.

The query parameter 'count' is '4'. Converting to Number gives 4. Adding 1 results in 5, so data.count is 5.

🧠 Conceptual

expert

Which statement about +page.js load function behavior is true?

Choose the correct statement about how +page.js load functions behave in SvelteKit.

A The load function runs on both server and client during navigation and must be serializable

B The load function runs only on the client after the page is fully loaded

C The load function can directly modify component state variables

D The load function can only return primitive values, not objects

💡 Hint

Think about when and where data loading happens in SvelteKit.

The load function runs on the server during initial page load and on the client during navigation. It must return data that can be serialized and passed to the page component.