Dana Woodman
Posted on April 16, 2021
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 🤓
Posted on April 16, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.