SvelteKit

SvelteKit is the official application framework for Svelte. Where Svelte builds components, SvelteKit builds whole apps: file-based routing, server-side rendering, data loading, form handling, API endpoints, and deployment adapters for nearly any hosting platform. It's built on Vite, so development is fast, and it's designed around web standards — Request, Response, FormData, and fetch — rather than framework-specific abstractions.

A SvelteKit app can be a server-rendered site, a fully static site, a single-page app, or a mix, chosen per route. That flexibility, plus progressive enhancement by default, makes it a strong alternative to Next.js and Nuxt.

TL;DR

Quick Example

A route that loads a post on the server and accepts comments through a form action:

The form works with JavaScript disabled; with use:enhance, it submits via fetch and updates the page without a full reload.

Core Concepts

Routing Files

Dynamic segments use brackets ([slug]), optional ([[lang]]), and rest ([...path]) parameters; route groups (marketing) share layouts without affecting URLs.

Load Functions

load runs before rendering and returns data as props. Server loads can access databases and private environment variables; universal loads can run in the browser during client navigation. SvelteKit tracks dependencies and reruns loads only when their inputs (params, URL, invalidated keys) change. Return promises to stream slow data.

Form Actions and Progressive Enhancement

Actions handle POST submissions server-side and return validation errors with fail(). Because they're plain HTML forms first, they work without JavaScript, then use:enhance provides SPA-like behavior. This is SvelteKit's recommended way to mutate data.

Rendering Options Per Route

Mix static marketing pages, server-rendered dashboards, and client-only widgets in one app. See SEO for SPAs.

Hooks

hooks.server.ts exports handle (wraps every request — ideal for session lookup into event.locals, security headers, and redirects), handleFetch, and handleError. Client hooks handle client-side errors and navigation.

Adapters

Adapters convert the build for a target: adapter-node, adapter-static, adapter-vercel, adapter-netlify, adapter-cloudflare, and community adapters for others. adapter-auto detects common platforms.

Best Practices

Keep Secrets in $lib/server and Server Files

Modules under $lib/server and $env/static/private can't be imported into client code — SvelteKit enforces this at build time.

Use Form Actions for Mutations

They give validation, progressive enhancement, and CSRF protection (origin checks) out of the box.

Authenticate in handle

Resolve the session once per request in hooks and read event.locals.user in loads and actions.

Prerender What You Can

Static pages are faster and cheaper; prerender marketing and documentation routes.

Avoid Waterfalls in Loads

Start independent fetches in parallel with Promise.all, and use the fetch passed to load so SvelteKit can dedupe and inline responses during SSR.

Common Mistakes

Fetching Private Data in Universal Loads

+page.ts can run in the browser; database calls and secrets belong in +page.server.ts.

Global Mutable State on the Server

Module-level variables are shared across all users' requests on the server. Use locals, context, or per-request stores.

Disabling SSR Everywhere

Setting ssr = false globally loses SEO and first-paint benefits. Choose per route.

Forgetting the Adapter

Deploying without configuring the right adapter leads to broken server routes or missing static output.

Comparison

FAQ

What is SvelteKit?

The official full-stack framework for Svelte, providing routing, server-side rendering, data loading, form handling, API endpoints, and deployment adapters.

What's the difference between +page.ts and +page.server.ts?

+page.ts load functions can run on both server and client. +page.server.ts runs only on the server, so it can use databases, secrets, and form actions.

Can SvelteKit build a static site?

Yes. Use adapter-static and prerender = true to generate a fully static site, or prerender only selected routes.

SvelteKit or Next.js?

Choose SvelteKit for Svelte's simplicity, small bundles, and progressive-enhancement-first forms. Choose Next.js for the React ecosystem and team familiarity.

Related Topics

References