SvelteKit: Full-Stack Svelte

Svelte builds components; SvelteKit builds apps

Svelte gives you components. SvelteKit is the official application framework built on top of it (and on Vite): it adds everything a real app needs — a router, server-side rendering, data loading, form handling, API endpoints, and deployment — so you don’t assemble those yourself.

The relationship mirrors React and Next.js, or Vue and Nuxt: the view library handles UI; the meta-framework handles the app.

What this module covers

Lesson	What you’ll learn
Routing & pages	File-based routing, `+page.svelte`, layouts, dynamic routes
Loading data	`load` functions, universal vs server-only, the `data` prop
Forms & actions	Form `actions` and progressive enhancement with `use:enhance`
Server & API	`+server.js` endpoints, hooks, render modes, and adapters

The shape of a SvelteKit app

Routes are files in src/routes/, and special filenames play specific roles:

flowchart TB
  route["a route folder in src/routes/"] --> page["+page.svelte — the UI"]
  route --> pjs["+page.js / +page.server.js — load data + actions"]
  route --> layout["+layout.svelte — shared shell"]
  route --> server["+server.js — API endpoint"]
  page --> ssr["rendered on the server (SSR) by default,
then hydrated on the client"]

The files that make up a route

+page.svelte is a route’s page — a normal Svelte component.
+page.js / +page.server.js provide that page’s data (via load) and its form actions.
+layout.svelte wraps child routes with a shared shell (nav, footer).
+server.js is a standalone API endpoint (JSON, webhooks) with no UI.

By default SvelteKit renders pages on the server first (fast first paint, SEO), then hydrates them on the client for interactivity — the best of both worlds, and configurable per route.