Page load functions (+page.js) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a +page.js file in SvelteKit?

The +page.js file defines a page load function that runs before the page renders. It fetches data or prepares props for the page component.

beginner

How do you export a load function in +page.js?

You export a named async function called <code>load</code>. For example: <pre>export async function load({ params, fetch }) { /* ... */ }</pre>

intermediate

What arguments does the load function receive in +page.js?

It receives an object with properties like params (route parameters), fetch (to make requests), url (current URL), and route (route info).

beginner

What should the load function return in +page.js?

It should return an object with data that becomes props for the page component. For example:

return { user, posts }

intermediate

Can the load function in +page.js run on the server, client, or both?

By default, it runs on the server during initial page load. It can also run on the client during navigation between pages.

What does the load function in +page.js primarily do?

A Defines CSS styles for the page

B Fetches data before the page renders

C Handles user input events

D Manages routing configuration

The load function fetches or prepares data before the page renders.

Which of these is NOT a parameter passed to the load function?

A document

B fetch

C params

D url

The document object is not passed to the load function.

What must the load function return?

A Nothing, it returns void

B A string with HTML content

C A boolean indicating success

D An object with data for the page

The load function returns an object whose properties become props for the page.

Where does the load function run when you first visit a page?

A Only on the server

B Only in the browser console

C On both server and client simultaneously

D Only on the client

On initial page load, the load function runs on the server.

How do you export the load function in +page.js?

A export default function load() {}

B function load() {}

C export async function load() {}

D module.exports = load

You export an async named function called load using ES module syntax.

Explain how the load function in +page.js helps prepare data for a SvelteKit page.

Think about when and why you need data ready before showing a page.

Describe the difference in where the load function runs during initial page load versus client-side navigation.

Consider server rendering and client navigation separately.