How does SvelteKit routing and data loading work?
Assesses fundamental understanding of Svelte conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
SvelteKit uses filesystem routing under src/routes. A +page.svelte renders a page, +page.js or +page.server.js exports a load function that runs before the page and returns data, +layout.svelte wraps child routes, and +error.svelte handles errors. Dynamic segments use [slug] and rest parameters use [...rest].
// +page.server.js
export async function load({ params, fetch }) {
const post = await fetch(`/api/posts/${params.slug}`).then(r => r.json());
return { post };
}
A universal +page.js load runs on server and client, while a +page.server.js load runs only on the server and can access databases and secrets, returning serialisable data as props. Layout loads run for every descendant route and can nest. Form actions handle POST mutations progressively, and +server.js files are API endpoints.
This model gives SSR by default, with export const prerender = true for static pages and ssr = false for client-only ones.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.