SvelteKit

SvelteKit is the official full-stack framework for Svelte. It wraps the Svelte compiler with everything an app needs: file-based routing, data loading, server endpoints, and deployment adapters — while preserving Svelte's tiny-bundle, compiler-first ethos.

It's flexible about rendering: prerender static pages at build time (SSG), render dynamic pages on the server (SSR), or mix both per route — all from one codebase and one deployment target chosen by an adapter.

TL;DR

• File-based routing in src/routes, with layouts and nested routes.
• Load functions fetch data for a page or layout (server or universal).
• Server endpoints (+server) build APIs alongside the UI.
• Adapters deploy to Node, serverless, edge, or static hosting.
• Choose SSR, prerender (SSG), or hybrid per route.

Quick Example

A server load function fetches data before the page renders — secrets and DB access stay server-side:

Core Concepts

• Routes — filesystem-based (src/routes), with +page, +layout, and +server files.
• Load functions — +page.server.ts (server-only, can use secrets) or +page.ts (universal).
• Server endpoints — +server.ts files expose API routes.
• Adapters — target Node, Vercel, Cloudflare, static export, etc.
• Rendering modes — SSR, prerendering, or SPA per route.

Best Practices

• Fetch data in load rather than in component onMount where possible.
• Keep secrets in +page.server.ts / +server.ts; never expose them to the client.
• Prerender static content for speed and SEO.
• Use progressive enhancement for forms (use:enhance) — server actions first, then enhance.

Common Mistakes

Accessing window during SSR

Over-fetching with nested loads

FAQ

Do I need SvelteKit, or just Svelte?

Use SvelteKit for anything beyond an embedded widget — routing, SSR/SSG, data loading, server endpoints, and deployment all come built in. Plain Svelte is for components you drop into another app or a single-page widget.

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

+page.server.ts runs only on the server, so it can use secrets, databases, and private APIs. +page.ts is "universal" — it may run on server and client, so keep it free of server-only code.

What are adapters for?

Adapters compile your SvelteKit app for a specific deployment target — Node server, Vercel, Cloudflare, or a static export. You write the app once and swap adapters to change where it runs.

SSR or prerendering?

Prerender (SSG) pages whose content is the same for everyone and changes rarely — fastest and cheapest. Use SSR for pages that are dynamic or personalized per request. You can choose per route.

Related Topics

• Svelte — The underlying framework
• Next.js — The React equivalent
• Nuxt.js — The Vue equivalent
• SEO for SPAs — Why SSR/SSG matters
• Frontend Development — The broader landscape

References

• SvelteKit — Documentation
• SvelteKit — Loading data
• SvelteKit — Adapters
• SvelteKit — Form actions