SvelteKit
An application framework where the server and client halves share one file tree.
SvelteKit is an application framework built on Svelte and Vite. Routing comes from the file tree, data loading is explicit, and forms work without client-side JavaScript unless you enhance them.
Reach for it when you are building an application — dashboards, tools, anything where most of the page is state rather than content. Reach for a static-first framework when most of the page is content and the interactivity is incidental; SvelteKit will do that job, but you will be turning things off.
The distinctive design choice is that server and client code live side by side
in the same directory, distinguished by filename. A +page.ts load function
runs in both places; a +page.server.ts runs only on the server. Getting that
distinction wrong is the source of the two most common problems — data fetched
twice on navigation, and server-only code following an import chain into the
browser bundle.
Deployment is adapter-shaped. The adapter you choose determines the build output and therefore where it can run, so the host decision comes first. Adapters exist for Node, static output, Cloudflare and several platform-specific targets, and switching between them means re-checking any Node API a load function relies on.
CodeNx does not have SvelteKit articles yet. This hub exists so that when they land they have a home, and so the topic’s relationship to Astro, TypeScript and edge deployment is already mapped. Until then, the official documentation is genuinely good and is linked above.
Common problems
Failure modes that come up repeatedly with SvelteKit, and where each one is solved.
- Server-only code leaks into the client bundle
- An import chain reached a browser module. Put secrets and server logic in `$lib/server/`, which the build refuses to include client-side.
- The chosen adapter does not match the host
- Adapters produce host-specific output. Switching hosts means switching adapters, and any Node API used in a load function has to be re-checked.
- Data loads twice on navigation
- A load function is running on both server and client because it was not marked server-only. Move it to a `+page.server.ts` file.
Frequently asked questions
SvelteKit or Astro for a content site?
Astro, in most cases. It ships no JavaScript by default and its content collections are built for exactly that job. SvelteKit is the better fit when the site is an application that also has some content pages.
What decides which adapter to use?
Where you deploy. There are adapters for Node, static output, Cloudflare, Vercel and Netlify, and each produces different output. Pick the host first, then the adapter — reversing that order causes rework.
How do you keep secrets out of the client bundle?
Use the `$env/static/private` and `$env/dynamic/private` modules, and keep server-only code under `$lib/server/`. The build fails rather than silently inlining a secret if a client module imports either.
Sources
- SvelteKit documentation Svelte Primary source
- Svelte documentation Svelte Primary source