Svelte 50: SvelteKit Mental Model
easy⏱ 5 mincoursesvelte
File-based routing
Every folder inside src/routes/ becomes a URL segment, and a +page.svelte inside it is the page rendered for that route. Square brackets create dynamic segments, like [slug]. There is no router library to install or configure — the filesystem IS the route table.
src/routes/
├── +page.svelte // matches "/"
├── about/
│ └── +page.svelte // matches "/about"
└── blog/
└── [slug]/
├── +page.svelte // matches "/blog/:slug"
└── +page.js // universal load() for this route
load functions: universal vs server
A +page.js load function runs on both server and client (universal) — good for fetching public data. A +page.server.js load function runs ONLY on the server — the only place you can safely touch a database, secret API keys, or cookies. Whatever the load function returns becomes the data prop of +page.svelte.
// src/routes/blog/[slug]/+page.server.js
import { db } from '$lib/server/db';
export async function load({ params }) {
const post = await db.posts.findUnique({ where: { slug: params.slug } });
return { post };
}
// src/routes/blog/[slug]/+page.svelte
<script>
let { data } = $props();
</script>
<h1>{data.post.title}</h1>
This sandbox can't host real routes
There's no filesystem for SvelteKit to scan and no server process here, so real file-based routing can't literally run. What CAN run: a hand-rolled router using a real, live writable store to hold the 'current path' and swap components — which is conceptually exactly what SvelteKit does under the hood, just automated for you.