Advanced
app.html template
Page template with %sveltekit.head%, %sveltekit.body% and other placeholders.
Appendix
Avoid shared state on the server
Do not store data in shared variables on the server.
Best practices
Build and deploy
Build optimizations
Loads only the minimal required code.
command
Remote command flavour supporting single-flight mutations.
Component and page state is preserved
Component and page state is preserved.
config option
Per-page configuration export.
Configurable rendering
Handle different parts of your app on the server, in the browser, or at build-time.
Core concepts
csr option
Controls client-side rendering of a page.
Default actions
A page can declare a default action exported from +page.server.js.
Development server
npm run dev starts the development server on localhost:5173.
enhance
Form enhancement supporting multiple instances and submit buttons.
Storing ephemeral state in snapshots
Store ephemeral state using snapshots.
Fetch APIs
form
Remote form flavour for handling form submissions.
FormData
Generated tsconfig
SvelteKit generates .svelte-kit/tsconfig.json which your own config extends.
Getting started
Headers
Hot Module Replacement
Reflects code changes in the browser instantly via Vite with a Svelte plugin.
instrumentation.server.js
Observability setup and instrumentation code; requires adapter support.
$lib alias
Library code in src/lib can be imported via the $lib alias.
Load functions
Define load functions in +page.js or +page.server.js to fetch data before rendering.
Multi-page app
Render all links on the server with data-sveltekit-reload.
Named actions
A page can have as many named actions as it needs.
No side-effects in load
load functions should avoid side-effects.
+page.js
Module that exports a load function to load data before rendering.
Page options
Export options from +page.js, +page.server.js or layouts to control rendering per page or group.
+page.svelte
Defines a page of your app, rendered on server and client.
Pages as Svelte components
Each page of your app is a Svelte component added under src/routes.
Page preloading
Preloads pages before user navigation.
prerender
Remote prerender flavour for static data.
prerender option
Set prerender to true, false or 'auto' to generate HTML at build time.
Project scaffolding with sv create
Run npx sv create my-app to scaffold a new project and optionally set up tooling like TypeScript.
query
Reads dynamic data from the server via a remote query.
query.batch
Batched remote query variant.
query.live
Live remote query variant with reconnection support.
Redirects
Actions can perform redirects.
Remote files
Remote functions exported from .remote.js or .remote.ts files.
Request
Response
Route parameters
Directories like [slug] create a parameter used to load data dynamically.
Separate backend
Deploy the frontend separately from a backend written in another language.
$lib/server alias
Server-only library code in src/lib/server, blocked from client imports.
Serverless app
Run apps on serverless platforms with zero config or platform-specific adapters.
Single-page app
Build SPAs that exclusively use client-side rendering.
src directory
Contains the project code; everything except src/routes and src/app.html is optional.
ssr option
Controls server-side rendering of a page.
Using state and stores with context
Use context alongside state and stores.
State management
Guidance for managing state across server and client.
static directory
Static assets served without alteration to the name, such as robots.txt.
Static site generation
Use SvelteKit as a static site generator that fully prerenders your site with adapter-static.
Storing state in the URL
Persist state in the URL.
Streaming with promises
Return promises from load to stream data to the page as it resolves.
svelte.config.js
Contains Svelte and SvelteKit configuration.
trailingSlash option
Controls trailing slash behavior for routes.
Universal vs server load
load in +page.js runs on server and browser; +page.server.js runs only on the server.
URLSearchParams
URLSearchParams is listed among the standard Web APIs SvelteKit builds on.
use:enhance
Enhance form interactions with JavaScript.
Using parent data
Access data from parent layout load functions with await parent().
Validation errors
Actions support validation errors.
Web Crypto
Web Crypto is listed among the standard Web APIs SvelteKit builds on.
Web standards