SvelteKit

What is SvelteKit?

SvelteKit is a framework for building web applications with Svelte. Svelte handles the UI components, and SvelteKit adds what a full app needs: file-based routing, data loading, server endpoints and form handling. Pages can render on the server, in the browser or at build time, and you choose per route. It plays the same role for Svelte that Next.js plays for React and Nuxt for Vue.

Development runs on Vite, so code changes show up in the browser through hot module replacement.

How routing and data loading work

Routes come from the folder structure under src/routes. Files that start with + define a route's behavior:

• +page.svelte is the page itself. It renders on the server for the first request and in the browser for later navigation.
• +page.js exports a load function that runs on the server during the first render and in the browser on client-side navigation.
• +page.server.js has a load that runs only on the server, so it can reach a database or private environment variables. It can also export form actions.
• +layout.svelte wraps child pages with shared UI such as navigation.
• +server.js creates an API endpoint by exporting handlers named after HTTP methods, such as GET and POST.

A bracketed folder such as src/routes/blog/[slug] matches a dynamic segment, available as params.slug in load.

Rendering options

Three page options control how a route is rendered. ssr is on by default, so pages are rendered on the server first (server-side rendering). csr is also on by default, so the server HTML is made interactive in the browser, a step known as hydration. prerender builds a route to static HTML at build time, which is static site generation. Setting ssr to false in the root layout turns the app into a single-page app, and setting csr to false ships no JavaScript to the client.

You can mix these in one app: prerender the marketing pages, render a dashboard on the server and keep one tool client-only.

Adapters: deploy anywhere

An adapter converts the built app into something a host can run. The SvelteKit documentation lists official adapters for Node servers (adapter-node), fully static output (adapter-static), Vercel, Netlify, Cloudflare Workers and Pages, and Bun. Pick the adapter that matches where the app will run, and remember that a fully static adapter only works if every route can be prerendered.

Form actions

Form actions let a +page.server.js file handle <form> submissions on the server. They use POST and work without client-side JavaScript. Adding use:enhance upgrades the form to a fetch request without a full page reload, with the same server code. For JSON APIs or other non-form requests, use a +server.js endpoint instead.

Common mistakes

• Putting secrets in a universal load (+page.js). It also runs in the browser, so database access and private variables belong in +page.server.js.
• Prerendering a page that has form actions. The documentation says such pages cannot be prerendered.
• Choosing the static adapter for an app with dynamic routes that cannot be prerendered.
• Leaving trailingSlash on 'ignore'. /x and /x/ become separate URLs, which the documentation says harms SEO. The default is 'never'.

SvelteKit, load testing and monitoring

Server-rendered routes do real work on every request: load functions, database calls and HTML rendering. That makes them the place to look when traffic grows. Run a load test against the routes that matter, such as the home page, a data-heavy page and your +server.js endpoints, and watch response time and errors as virtual users increase. The post how to load test single-page applications covers the browser-heavy side.

After launch, API monitoring checks your endpoints on a schedule, and page speed monitoring tracks Core Web Vitals so a slow release shows up quickly.

FAQ: SvelteKit

What is the difference between Svelte and SvelteKit?

Svelte is the component framework for building UI. SvelteKit is the application framework around it, adding routing, data loading, server rendering, endpoints and deployment adapters.

Does SvelteKit use server-side rendering?

Yes, by default. Pages render on the server for the first request and then become interactive in the browser. You can turn this off per route or for the whole app.

Can SvelteKit build a static site?

Yes. Prerender the routes and use the static adapter. This only works when every route can be prerendered, so pages that depend on request-time data or form actions need another adapter.

Where can I deploy a SvelteKit app?

Wherever an official or community adapter exists. Official ones cover Node servers, static hosting, Vercel, Netlify, Cloudflare and Bun.

How is SvelteKit different from Next.js and Nuxt?

The idea is the same: a full-stack framework with routing and server rendering. The difference is the UI library underneath, Svelte instead of React or Vue.