When to use Svelte vs SvelteKit vs Sapper?

UPDATE July 15, 2022: At this point, despite SvelteKit not yet being at v1.0, I would highly recommend anyone deciding between SvelteKit and Sapper to choose SvelteKit. Sapper is effectively unmaintained and SvelteKit v1.0 is impending.

---

Confused as to when you should use Svelte vs SvelteKit vs Sapper? Hopefully I can help you get a little more clarity with this short guide. Let's go! 👇

---

Use Svelte if...

• You don't need/want SSR (Server Side Rendering)
• You want to render a component into an existing page
• You want to output things like a vanilla component, a WebComponent or a React component adapter

Use SvelteKit if...

• You're ok with Beta software and living on the bleeding edge
• You want SSR like Next.js/Nuxt.js
• You want to have a backend API as part of your project
• You want your app to work in a Serverless environment (e.g. Vercel/Netlify)
• You want super fast hot reloading in development (via Vite)

Note that SvelteKit supports static rendering with adapter-static which you can use to render a static site with built in routing in case you don't want/need any API/SSR.

Use Sapper if...

UPDATE: at this point, Kit is almost at a v1.0, so there is a 99% chance you want to use Kit instead of Sapper

• You don't want to use Beta software and don't want to deal with the potential roadblocks of Beta software
• You want/need access directly to Express/Polka
• You're ok using a product that will no longer be maintained (SvelteKit will replace Sapper)

In reality, you should almost never choose Sapper and should instead post feedback to the Svelte team if things are missing for your needs.

---

Scenarios

Still not sure what to use? Maybe these scenarios will help you decide:

• "I'm building a brand new web app (with backend/API)": Use SvelteKit
• "I want to build an SPA (Single Page App) and I have a pre-existing backend and don't need SSR": Use Svelte
• "I want to use Svelte in an existing web app": Use Svelte
• "I'm cautious of new things but want SSR/routing": Use Sapper
• "I'm building a rocket ship 🚀": Use something else

---

Note that if you end up using Sapper, you can always migrate to SvelteKit later.

See any reasons missing from the above list? Drop them in the comments below 💬

Follow me on Dev.to, Twitter and Github for more web dev and startup related content 🤓

Comments

[syedsimanta03]

I'm a React dev. This post is pretty simple just what I wanted to know

[Alexander Kim]

Yeah, svelte kit is for all purposes now, please, update your article.

[Dana Woodman]

I make a note in the article 👍

[AbdulRaHman elRawas]

Straight to the point. Thanks.

[Kinanee Samson]

Thanks pal, i wanted to start a new project but i have been headaches choosing between Sapper and svelte-kit, I'm a lil bit cleared as to which option to take

[Dana Woodman]

At this point, Kit is almost v1.0, so you likely want to use Kit in almost all cases now. I'll update the article

[Souk Syp.]

I had issue with SvelteKit when importing Faunadb-js*. I switched to Sapper and it worked as expected. Then I tried Next. I didn't look back.... no more Vite's import.meta.env thing and webpack hot reloading is so fast. My app state stays intact while I modify and save files on vscode.

Here's my preferences in 2021:

• Svelte for Single Page Apps.
• Next for Server-side web apps (best for SEO)

*Yes, I can use GraphQL but I had already FQL queries in my app. I mean I am too lazy to refactor...

[Dana Woodman]

Next us a great tool, esp if you want to work with React.

You likely had what is (now) a common issue with CommonJS packages, because Vite focuses on ESM (the future). This will likely be resolved soonish. Check the SvelteKit FAQ for the solution 👍

What is the issue with import.meta.env? You can use dotenv too if you want.

I'll wager in a few months most the SvelteKit issues will be in the past.

PS, Vite reloading is faster than Next because of ESM, but Sapper is def slower

[Souk Syp.]

No offence I love Svelte as you do (I imagine)

[Colin Fahrion]

Yep this is exactly where I’m at too. I’d love to use sveltekit/sapper for SSR but I don’t trust it yet and the ecosystem/DX for Next is really good. React itself can be a pain sometimes but the strength of Next makes up for it. For purely static sites these days though I’m all in on Eleventy. Maybe in a year from now it’ll be different when SvelteKit matures, but for me it’s:

• Svelte for SPA
• Next for SSR
• 11ty for SSG

[Dana Woodman]

Yeah, Kit is still rough (to be expected being a beta and all), so it isn't for everyone right now. I'll bet this will change rapidly tho.

Next is a great solution if you are happy using React