svelte is a compiler that turns declarative components into efficient JavaScript code with no virtual DOM. @sveltejs/kit is a full application framework built on Svelte that provides routing, server-side rendering, static site generation, and deployment adapters. astro is a content-focused meta-framework that supports multiple UI libraries and uses an "islands architecture" to minimize JavaScript by default. @astrojs/svelte is an integration that allows Svelte components to be used within Astro projects. @sveltejs/adapter-static is a SvelteKit adapter that outputs static files for deployment to CDN or static hosts. sapper is the deprecated predecessor to SvelteKit and should not be used in new projects.
Svelte, SvelteKit, Astro, and Their Ecosystems: A Practical Guide for Frontend Architects
Choosing between svelte, @sveltejs/kit, astro, @astrojs/svelte, @sveltejs/adapter-static, and the legacy sapper requires understanding not just what each package does, but how they fit together in real-world architectures. Let’s cut through the noise and compare them as building blocks — because that’s exactly what they are.
🧱 Core Roles: Framework vs Compiler vs Integration
svelte is the compiler and reactive runtime. It transforms .svelte files into highly optimized vanilla JavaScript with no virtual DOM. You can use it standalone for components or embed it in any app.
<!-- svelte: Counter.svelte -->
<script>
let count = 0;
</script>
<button on:click={() => count++}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
@sveltejs/kit is a full application framework built on top of Svelte. It handles routing, SSR, data loading, and deployment adapters. Think of it as Svelte’s answer to Next.js.
// @sveltejs/kit: +page.server.js
export async function load({ params }) {
const post = await db.getPost(params.slug);
return { post };
}
astro is a content-focused meta-framework that supports multiple UI libraries (React, Vue, Svelte, etc.). Its core philosophy is “islands architecture” — ship zero JavaScript by default, then hydrate interactive islands only when needed.
<!-- astro: Blog.astro -->
---
const posts = await fetchPosts();
---
{posts.map(post => <article>{post.title}</article>)}
<SvelteCounter client:load />
@astrojs/svelte is an Astro integration that lets you use .svelte components inside Astro projects. It compiles Svelte components so Astro can render them as static HTML or hydrated islands.
// astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
export default defineConfig({
integrations: [svelte()]
});
@sveltejs/adapter-static is a deployment adapter for SvelteKit that outputs static files (HTML, JS, CSS) instead of server-rendered responses. Use it when you want to deploy a SvelteKit app to Netlify, GitHub Pages, or any static host.
// svelte.config.js
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter()
}
};
sapper is the predecessor to SvelteKit. According to its npm page, it is deprecated and should not be used in new projects. The Svelte team recommends migrating to SvelteKit.
⚠️ Do not start new projects with
sapper. It lacks modern features like unified data loading, proper TypeScript support, and active maintenance.
🏗️ Rendering Strategies Compared
Static Site Generation (SSG)
Astro excels at SSG out of the box. Every page is pre-rendered to static HTML unless you opt into interactivity.
<!-- astro: fully static by default -->
<h1>Welcome</h1>
<!-- No JS shipped unless you add a client:* directive -->
SvelteKit with @sveltejs/adapter-static also supports SSG, but you must configure which pages are prerendered.
// +page.js
export const prerender = true; // enables SSG for this route
Standalone svelte has no built-in SSG — you’d need a bundler like Vite or Rollup with custom scripts.
Server-Side Rendering (SSR)
SvelteKit supports SSR natively when using server-based adapters (like @sveltejs/adapter-node). Data loading happens on the server per request.
// +page.server.js
export async function load({ url }) {
// Runs on server for every request
return { query: url.searchParams.get('q') };
}
Astro can do SSR too, but only when configured with an SSR adapter (e.g., @astrojs/node). By default, it’s static.
// astro.config.mjs
import node from '@astrojs/node';
export default defineConfig({
output: 'server',
adapter: node()
});
Standalone svelte can be rendered on the server manually using svelte.compile and App.render(), but it’s low-level and not practical for apps.
// Manual SSR with svelte (not recommended for apps)
import App from './App.svelte';
const { html } = App.render(props);
🔌 Component Model and Interactivity
SvelteKit treats every page as a Svelte component. All components are hydrated by default — you get reactivity everywhere.
<!-- SvelteKit: fully interactive -->
<script>
let name = '';
</script>
<input bind:value={name} />
<p>Hello {name}!</p>
Astro uses partial hydration. Components are static unless you explicitly enable interactivity.
<!-- Astro: static by default -->
<SvelteCounter /> <!-- no JS -->
<!-- Only this one becomes interactive -->
<SvelteCounter client:load />
This makes Astro ideal for content-heavy sites (blogs, docs, marketing pages) where most of the page doesn’t need JavaScript.
📦 Project Structure and Routing
SvelteKit uses a file-based router with conventions like +page.svelte, +layout.svelte, and +page.server.js.
src/routes/
blog/
[slug]/
+page.svelte
+page.server.js
Astro also uses file-based routing, but with .astro files or framework-specific components.
src/pages/
blog/
[slug].astro
Standalone svelte has no opinionated structure — you manage everything via your bundler config.
🔄 When to Combine Packages
It’s common — and encouraged — to combine these packages:
- Use
astro+@astrojs/sveltewhen you want mostly static content with a few Svelte-powered interactive widgets (e.g., a theme switcher, comment form, or cart widget). - Use
@sveltejs/kit+@sveltejs/adapter-staticwhen you’re building a Svelte-first app that needs to be deployed as a static site (e.g., a dashboard, admin panel, or SPA-like experience). - Never use
sapperin new work — it’s obsolete.
🛠️ Real-World Decision Matrix
| Use Case | Best Choice |
|---|---|
| Marketing site, blog, documentation | astro + @astrojs/svelte (if you need Svelte components) |
| Web app with complex state, auth, dashboards | @sveltejs/kit with appropriate adapter |
| Embedding Svelte widgets in non-Svelte projects | Standalone svelte compiled via Vite/Rollup |
| Migrating from Sapper | @sveltejs/kit (official successor) |
| Deploying a SvelteKit app to static hosting | @sveltejs/kit + @sveltejs/adapter-static |
💡 Key Takeaways
svelteis the engine — use it when you need fine-grained control or are embedding components elsewhere.@sveltejs/kitis the full app framework — choose it for dynamic, interactive applications.astrois the content-optimized meta-framework — pick it when performance and minimal JS matter most.@astrojs/svelteis just a bridge — it only makes sense inside an Astro project.@sveltejs/adapter-staticis a deployment tool — it doesn’t change your app logic, just how it’s output.sapperis deprecated — avoid it entirely.
The modern frontend stack isn’t about picking one monolithic framework. It’s about composing the right tools for the job. With Svelte’s compiler-first approach and Astro’s islands architecture, you now have surgical precision over interactivity, performance, and developer experience.
- svelte:
Choose standalone
sveltewhen you need fine-grained control over component compilation, are embedding interactive widgets into non-Svelte projects (e.g., WordPress, legacy jQuery apps), or building micro frontends where framework overhead must be minimized. Avoid it for full applications — use SvelteKit instead for routing, data loading, and deployment conveniences. - astro:
Choose
astrowhen your primary goal is delivering fast, content-rich websites (blogs, documentation, landing pages) with minimal JavaScript. Its islands architecture ensures only interactive components are hydrated, leading to excellent performance and SEO. It’s especially powerful when you need to mix multiple UI frameworks or prioritize content over complex client-side logic. - @sveltejs/kit:
Choose
@sveltejs/kitwhen you’re building a dynamic, interactive web application that benefits from Svelte’s reactivity, combined with modern features like file-based routing, unified data loading, SSR, SSG, and progressive enhancement. It’s the go-to for dashboards, admin panels, e-commerce frontends, or any app where user interaction and real-time updates are central. - @sveltejs/adapter-static:
Choose
@sveltejs/adapter-staticwhen you’re building a SvelteKit application but need to deploy it as a static site (e.g., to GitHub Pages, Netlify, or Cloudflare Pages). It prerenders pages at build time and disables server-side rendering, making it perfect for content-driven apps that don’t require per-request server logic like user-specific data fetching. - @astrojs/svelte:
Choose
@astrojs/svelteonly when you're already using Astro and need to incorporate Svelte components as interactive "islands" within a mostly static site. It’s not a standalone solution — it’s a bridge between Astro’s content-focused model and Svelte’s reactivity. Ideal for blogs, documentation, or marketing sites that require occasional rich interactivity without shipping full framework overhead. - sapper:
Do not choose
sapperfor any new project. It is officially deprecated, lacks modern Svelte features like proper TypeScript support and unified data loading, and receives no active development. The Svelte team explicitly recommends migrating existing Sapper apps to SvelteKit instead.
What is Svelte?
Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
Learn more at the Svelte website, or stop by the Discord chatroom.
Getting started
You can play around with Svelte in the tutorial, examples, and REPL.
When you're ready to build a full-fledge application, we recommend using SvelteKit:
npx sv create my-app
cd my-app
npm install
npm run dev
See the SvelteKit documentation to learn more.
Changelog
The Changelog for this package is available on GitHub.
Supporting Svelte
Svelte is an MIT-licensed open source project with its ongoing development made possible entirely by fantastic volunteers. If you'd like to support their efforts, please consider:
Funds donated via Open Collective will be used for compensating expenses related to Svelte's development.