Build confidence with SvelteKit's file-based routing vocabulary, from +page.svelte and +layout.svelte conventions to load functions, form actions, and streaming.
0 / 5 completed
1 / 5
What is the role of a +page.svelte file in SvelteKit's file-based routing?
+page.svelte is the convention SvelteKit uses for route components. A file at src/routes/blog/+page.svelte renders when the user visits /blog. The + prefix distinguishes routing-special files from reusable component files.
2 / 5
What does +layout.svelte provide in SvelteKit?
+layout.svelte wraps all routes in the same directory (and subdirectories). It persists across navigation — meaning state is preserved — and uses <slot /> to render the active child page. It can also export a load function to fetch shared data.
3 / 5
In SvelteKit, what does a load function exported from +page.server.ts do?
Load functions in +page.server.ts execute server-side before the page renders and return an object available as the data prop in +page.svelte. They have access to fetch, cookies, and the platform context, keeping sensitive logic off the client.
4 / 5
How do SvelteKit form actions (defined in +page.server.ts) handle mutations?
Form actions are defined by exporting an actions object from +page.server.ts. Each key is an action name (e.g., actions.create), and SvelteKit routes form POSTs to the correct handler via ?/actionName query parameter, with progressive enhancement built-in.
5 / 5
What does SvelteKit's streaming feature allow a load function to do?
Streaming in SvelteKit lets a load function return an object containing unresolved Promises. The page renders with the resolved data immediately and uses Svelte's {#await} block to display deferred values once their promises settle, improving perceived performance for slow data sources.