Svelte is a component framework, SvelteKit is an app framework. Handles:
- Routing
- SSR
- Data fetching
- Service workers?
- Typescript
- SPA
- Library packaging
- Optimizing builds
Server rendered by default (Multi-page apps) but then can transition to client-side navigation to avoid janky reloading
Routing
SvelteKit uses filesystem-based routing. Every +page.svelte in src/routes creates a page at/. A +page.svelte in /src/routes/about would create a page in /about
A +layout.svelte defines a common page layout to avoid duplicated code. The children will be passed in as a prop.
let {children} = $props();
{@render children()}You can have dynamic parameters (“slugs”) by surrounding the route with square brackets. You can even have multiple (provided they are separated by one static char), like: foo/[bar]x[baz]
$Lib
The $lib alias can be used to reference code in the src/lib, good for reusability