DEV Community

Dana Woodman
Dana Woodman

Posted on • Updated on

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 πŸ€“

Top comments (11)

Collapse
 
souksyp profile image
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...

Collapse
 
colinaut profile image
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
Collapse
 
danawoodman profile image
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

Collapse
 
danawoodman profile image
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

Collapse
 
souksyp profile image
Souk Syp. • Edited

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

Collapse
 
syedsimanta03 profile image
syedsimanta03

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

Collapse
 
avxkim profile image
Alexander Kim

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

Collapse
 
danawoodman profile image
Dana Woodman

I make a note in the article πŸ‘

Collapse
 
rawas94 profile image
AbdulRaHman elRawas

Straight to the point. Thanks.

Collapse
 
kalashin1 profile image
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

Collapse
 
danawoodman profile image
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