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

Recall & Review

beginner

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

It contains server-side load functions that run only on the server to fetch or prepare data before the page renders. This keeps sensitive logic and data secure.

beginner

How does a server load function differ from a client load function in SvelteKit?

Server load functions run only on the server and can access secrets or databases safely. Client load functions run in the browser and cannot access server-only resources.

beginner

What is the typical export name for a server load function inside +page.server.js?

The function is exported as load. This is the standard name SvelteKit looks for to run server-side data loading.

intermediate

Can you access URL parameters inside a server load function in +page.server.js? How?

Yes, the server load function receives an argument with a params object containing URL parameters. You can use params.id or similar to get values.

beginner

Why should you avoid putting sensitive API keys or secrets in client-side code and instead use +page.server.js?

Because client-side code is visible to users and can be inspected, exposing secrets. Server load functions run only on the server, keeping secrets hidden and secure.

Where does the load function inside +page.server.js run?

A Only on the server

B Only in the browser

C Both server and browser

D Nowhere, it is ignored

The load function in +page.server.js runs only on the server to keep data fetching secure.

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

A export async function clientLoad() {}

B export default function() {}

C export const serverLoad = () => {}

D export function load() {}

The server load function must be exported as load to be recognized by SvelteKit.

Which of these can you safely do inside a server load function?

A Use browser APIs like localStorage

B Access environment secrets

C Manipulate DOM elements

D Run client-side animations

Server load functions run on the server and can access environment secrets safely.

How do you access URL parameters inside a server load function?

A Using the <code>params</code> object passed as an argument

B Using <code>window.location</code>

C Using <code>document.querySelector</code>

D Using <code>fetch</code> API

The params object is provided to the server load function to access URL parameters.

What happens if you put a secret API key in client-side code instead of +page.server.js?

A It stays hidden automatically

B It runs faster

C It becomes visible to anyone using the app

D It encrypts itself

Client-side code is visible to users, so secrets placed there can be exposed.

Explain what a server load function in +page.server.js does and why it is important.

Think about where the code runs and what it can access.

Describe how you would access URL parameters inside a server load function and why this is useful.

Consider how URLs can carry information for the page.