Layout load functions in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a layout load function in SvelteKit?

A layout load function runs before the page loads and fetches data or performs setup for all pages using that layout. It helps share data or logic across multiple pages.

beginner

Where do you define a layout load function in SvelteKit?

You define it in a +layout.js or +layout.ts file inside the folder where the layout is used. This function exports a load() that runs before the layout renders.

intermediate

How does a layout load function share data with pages?

The layout load function returns an object with data. This data is accessible in the layout and all child pages via the special $page.data store or props.

intermediate

Can a layout load function run on the server, client, or both?

Layout load functions run on the server during initial page load and on the client during navigation. This ensures data is fresh and consistent.

advanced

What happens if a layout load function throws an error?

If a layout load function throws an error, SvelteKit shows an error page or you can handle it with an error boundary layout. This prevents broken pages.

Where do you place a layout load function in SvelteKit?

A In a +layout.js or +layout.ts file

B In a +page.js file

C In the main.js file

D Inside the component script tag

Layout load functions belong in +layout.js or +layout.ts files to run before layouts render.

What does a layout load function return?

A A boolean value

B A string with HTML

C An object with data to share

D Nothing

It returns an object containing data that layouts and pages can use.

When does a layout load function run?

A Only on the server

B Only during build time

C Only on the client

D On server load and client navigation

Layout load functions run on the server initially and on the client during navigation.

How can pages access data from a layout load function?

A Using $page.data store or props

B By importing the layout file

C Using global variables

D They cannot access it

Pages access layout data through the $page.data store or props passed down.

What happens if a layout load function fails with an error?

A The app crashes without message

B SvelteKit shows an error page or error boundary

C The error is ignored

D The page reloads automatically

SvelteKit shows an error page or uses error boundaries to handle load function errors gracefully.

Explain how a layout load function works in SvelteKit and why it is useful.

Think about how you prepare shared data for multiple pages.

Describe where and how you define a layout load function and how pages access its data.

Consider the file structure and data flow.