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.

Practice

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

easy

A. To fetch data or prepare information before the page is shown

B. To style the page with CSS

C. To handle user clicks on buttons

D. To define routes for the application

Solution

1. Step 1: Understand the role of load in SvelteKit

   The load function runs before the page renders to get data or do setup.

2. Step 2: Match the purpose with options

   Only To fetch data or prepare information before the page is shown describes fetching or preparing data before showing the page.

3. Final Answer:

   To fetch data or prepare information before the page is shown -> Option A

4. Quick Check:

   Page load functions fetch data before rendering [OK]

Hint: Load functions run before page shows to get data [OK]

Common Mistakes:

• Confusing load with styling or event handling
• Thinking load defines routes
• Assuming load runs after page renders

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

easy

A. export default function load() { return { props: { message: 'Hi' } }; }

B. function load() { return { message: 'Hi' }; }

C. export function load() { return { props: { message: 'Hi' } }; }

D. export const load = () => { return { message: 'Hi' }; };

Solution

1. Step 1: Recall correct export syntax for load

   In SvelteKit, load is exported as a named export, usually a const arrow function returning data without wrapping in props.

2. Step 2: Check each option

   export const load = () => { return { message: 'Hi' }; }; exports load as a named const returning an object with data directly, which is correct. export function load() { return { props: { message: 'Hi' } }; } wrongly uses props key, function load() { return { message: 'Hi' }; } lacks export, export default function load() { return { props: { message: 'Hi' } }; } uses default export which is incorrect.

3. Final Answer:

   export const load = () => { return { message: 'Hi' }; }; -> Option D

4. Quick Check:

   Named export const load returns data object [OK]

Hint: Use named export const load returning data object [OK]

Common Mistakes:

• Using default export instead of named export
• Returning data inside a props object
• Not exporting the load function

3. Given this +page.js code, what will be the value of data.greeting inside the page component?

export const load = () => {
  return { greeting: 'Hello, Svelte!' };
};

medium

A. undefined

B. 'Hello, Svelte!'

C. { greeting: 'Hello, Svelte!' }

D. An error occurs

Solution

1. Step 1: Understand what load returns

   The load function returns an object with a key greeting and value 'Hello, Svelte!'.

2. Step 2: How data is passed to the page

   The returned object keys become properties on the data object in the page component. So data.greeting equals 'Hello, Svelte!'.

3. Final Answer:

   'Hello, Svelte!' -> Option B

4. Quick Check:

   Returned keys become data props [OK]

Hint: Returned object keys become data properties [OK]

Common Mistakes:

• Expecting the whole object as data.greeting
• Thinking load returns props key
• Assuming undefined if not wrapped in props

4. Identify the error in this +page.js load function:

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

medium

A. The returned data must be wrapped in an object

B. fetch cannot be used inside load

C. The function should not be async

D. Missing export keyword

Solution

1. Step 1: Check the return value of load

   The load function must return an object whose keys become props for the page. Returning raw data (like an array or primitive) is invalid.

2. Step 2: Identify the fix

   Wrap the fetched data inside an object, e.g., return { data }, so the page receives it properly.

3. Final Answer:

   The returned data must be wrapped in an object -> Option A

4. Quick Check:

   Load returns object with keys for props [OK]

Hint: Always return an object from load function [OK]

Common Mistakes:

• Returning raw data instead of object
• Forgetting to export load
• Thinking fetch is disallowed in load

5. You want to redirect users to the login page if they are not authenticated inside a +page.js load function. Which code snippet correctly does this?

hard

A. import { redirect } from '@sveltejs/kit';

export const load = () => {
const user = null;
if (!user) return redirect(302, '/login');
return { user };
};

B. export const load = () => {
const user = null;
if (!user) return '/login';
return { user };
};

C. import { redirect } from '@sveltejs/kit';

export const load = () => {
const user = null;
if (!user) throw redirect(302, '/login');
return { user };
};

D. export const load = () => {
const user = null;
if (!user) window.location.href = '/login';
return { user };
};

Solution

1. Step 1: Understand how to redirect in load

   SvelteKit uses the redirect function from '@sveltejs/kit' which throws an exception to redirect the user.

2. Step 2: Check each option

   import { redirect } from '@sveltejs/kit'; export const load = () => { const user = null; if (!user) throw redirect(302, '/login'); return { user }; }; correctly imports redirect and throws it when user is not authenticated. export const load = () => { const user = null; if (!user) return '/login'; return { user }; }; returns a string which is invalid. export const load = () => { const user = null; if (!user) window.location.href = '/login'; return { user }; }; uses browser redirect which won't work server-side. import { redirect } from '@sveltejs/kit'; export const load = () => { const user = null; if (!user) return redirect(302, '/login'); return { user }; }; returns redirect instead of throwing it, which is incorrect.

3. Final Answer:

   import { redirect } from '@sveltejs/kit'; export const load = () => { const user = null; if (!user) throw redirect(302, '/login'); return { user }; }; -> Option C

4. Quick Check:

   Throw redirect to redirect in load [OK]

Hint: Throw redirect() from load to redirect users [OK]

Common Mistakes:

• Returning redirect instead of throwing it
• Using window.location in load (server-side)
• Returning a string URL to redirect