DEV Community

loading...

When to use Svelte vs SvelteKit vs Sapper?

Dana Woodman
Software hacker working in the industry since 2003. Currently loves: #Typescript and #Svelte. Founder of Chimera, the first makerspace in northern California (https://www.chimeraarts.org/).
ใƒปUpdated on ใƒป2 min read

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 ๐Ÿค“

Discussion (7)

Collapse
zzoukk profile image
zZouKk

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 Author

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 Author

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
zzoukk profile image
zZouKk • Edited

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

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 Author

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