svelte-vs-next

Svelte Vs Next

Comparison of major features in SvelteKit vs NextJS.

SvelteKit vs NextJS

Comparison of major features in SvelteKit vs NextJS.

Goals: fast, easy, convention over configuration, & batteries included. Overwhelming choices are bad versus providing a clear path forward.

SvelteKit NextJS Winner Notes
UI lib Svelte React
(or MillionJS or Preact)
SvelteKit Svelte offers faster, more minimal DOM updates & smaller KB client size.
Dev: Hot reload 🟒 🟒 -- I.e. Auto reload on file save.
Dev: O(1) hot reload 🟒 Vite 🟒 🚧 Turbopack (*not enabled by default) SvelteKit I.e. Processes only the changed files. Fast even in big projects. *Update package.json to enable Turbopack: "dev": "next dev --turbo".
Dev: "Fast refresh" 🟒 🚧 (not enabled by default) 🟒 NextJS I.e. UI state preserved across reloads.
Dev: Write modern JS 🟒 🟒 --
Dev: A11y console hints 🟒 ❌ SvelteKit
Dev: Prettier 🟒 🟒 -- For .svelte or .jsx files, respectively. For SvelteKit, install Svelte for VSCode extension.
Prod: Bundler 🟒 🟒 -- E.g. Minify assets, etc. Both are enabled by default.
Prod: Auto code splitting, per route 🟒 🟒 -- I.e. Auto code split JS & CSS per route & bundle appropriately.
Prod: Build adapters for different hosts 🟒 ❌ SvelteKit SvelteKit provides easy portability. NextJS works best with Vercel.
KB size: Hello World 🟒 46.3 (25.6 gzip) with CSR*
🟒 2.9 (3.3 gzip) without CSR (1.8kb of this is the favicon; shows as bigger with gzip in Chrome)
❌ 336.3 (131.3 gzip) (includes a 9.7kb favicon πŸ‘€)* SvelteKit - *CSR is "client side router".
- SvelteKit updated Aug 25, 2023 using SvelteKit 1.23 & Svelte 4.
- NextJS updated Aug 25, 2023 using App Router, NextJS 13.4.19, & React 18.2.0.
- Both tests return HTML of <p>hello world</p> and exclude CSS.
KB size: "Real World" app too out of date too out of date -- Out of date; PR welcome. *Mar 13, 2021 https://realworld.svelte.dev/, https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework
Rendering: SSR, per route 🟒 🟒 -- I.e. Server-side rendered at run time.
Rendering: Streaming 🟒 🟒 -- I.e. Server sends HTTP stream as it rendered on the server, rather than waiting for full rendering to complete before sending the response.
Rendering: Static, per route 🟒 🟒 -- I.e. Static HTML generated at build time.
Rendering: Incremental Static Regeneration, per route 🟒 on non-edge Vercel 🟒 on non-edge Vercel -- Static 'on demand' in production–i.e. first request dynamic, then cached as static. For other runtimes (like Edge on Vercel & Cloudflare), consider setting your route's cache-control header to use stale-while-revalidate for some similar benefits.
Rendering: "Partial Prerendering" ❌ 🟒* NextJS *NextJS v14 or newer.
Allows static prerendring of a page + streaming dynamic areas, like user auth buttons in a header, shopping cart status, etc.
Headers: s-max-age & max-age, per route 🟒 🟒 --
Routes: File-based routing 🟒 🟒 -- For simplicity. Other routing utilities should be included.
Routes: "SPA mode" 🟒 🟒 -- SSR for initial page load, then client-side routing for subsequent pages.
Routes: Pre-fetch JS/CSS on link hover 🟒 🟒 next/link SvelteKit By default in SvelteKit, can be overridden or removed. Svelte also offers a preloadCode() and prefetchData() to preload all or some routes specified via regex--powerful! NextJS requires using their link component; see docs.
Built-in: Metadata 🟒 🟒 next/head -- Place within <svelte:head>...</svelte:head>
Built-in: CSS scoping 🟒 🟒 SvelteKit Svelte's is automatic. NextJS' is via CSS modules or CSS in JSX (not as clean).
Built-in: State management 🟒 svelte/store ❌ SvelteKit Ideal is one, easy, built-in way. React has many choices–Zustand is reasonable.
Built-in: Animations 🟒 svelte/animate ❌ SvelteKit 3rd-party options exist for React, but they're not as easy to use. FramerMotion is popular for React.
Built-in: Image optimizations 🟒 enhanced:img (beta) 🟒 next/image -- Build-time image optimizations (conversion to AVIF or WEBP), creation of picture element with fallback to JPEG or PNG, resizing, adding width & height automatically, add file name hash for caching, etc. Hosted services exist as well if you prefer to do this at runtime (Cloudflare Images, Cloudinary, Gumlet, etc)
Built-in: Forms 🟒 Form actions & use:enhance (works with or without JS)
or
Superforms
🟒 NextJS 13 Form and Server actions (works with or without JS, if built properly) -- Svelte has built-in form support with a progressive enhancement that works even without JS; they're very clean because validation rules are defined once and used for both client & server side.

Formik (for React) is clean but requires JS and duplication of validation rules on the server side; similar to Felte (for React, SvelteKit, & Vue).
Auth 🟒 Auth.js or Lucia 🟒 Auth.js or Lucia -- NextAuth.js is defacto standard for NextJS; easy to use; email, social, &/or one-click link. It's renaming as Auth.js and supports SvelteKit too. Original announcement.
OG Image Generation 🟒❌ @ethercorps/sveltekit-og* 🟒 @vercel/og NextJS @ethercorps/sveltekit-og is based on Satori, which @vercel/og is also based on.
*❌ on @ethercorps/sveltekit-og's because not working on certain hosts like Cloudflare Pages. Credit to Vercel for creating Satori. Both include TailwindCSS support.
Sitemap 🟒 Super Sitemap 🟒 next-sitemap -- Disclaimer: I'm the author of Super Sitemap; Github issue for official sitemap.xml support.
Data fetching 🟒 SSWR
🟒 TanStack Query
🟒 tRPC
🟒 SWR
🟒 TanStack Query
🟒 tRPC
-- Easy fetch/isLoading/errors/caching. Can always use regular fetch() and this is usually all you'll need.
Tailwind CSS compatible 🟒 (or via svelte-add) 🟒 NextJS b/c built in. Both are easy. Easy via github.com/svelte-add/tailwindcss. For NextJS, just check Yes for the TailwindCSS option when creating your NextJS app using create-next-app
UI Component Libs - Styled - 🟒 Shadcn Svelte (unofficial)*
- 🟒 Flowbite Svelte
- 🟒 Skeleton UI
- 🟒 Carbon Components Svelte
- 🟒 Shadcn UI**
- 🟒 Tailwind UI
- 🟒 MUI
- 🟒 Ant Design
- 🟒 Mantine UI
- 🟒 Chakra UI
- 🟒 Flowbite React
NextJS - *Built on BitsUI (similar to RadixUI), which itself is built on MeltUI
- **Built on RadixUI.
UI Component Libs - Unstyled - 🟒 Bits UI*
- 🟒 Melt UI**
- 🟒🚧 svelte-headlessui (unofficial; issues for official support: 1, 2)
- 🟒 Radix UI
- 🟒 Headless UI
- 🟒 React Aria
NextJS Un-styled UI components (dropdown, slider, toggle, etc).
-*Built on MeltUI, to provide a more familiar component interface.
- **Melt UI is the successor to radix-svelte.
Tailwind CSS Component Libs (i.e. no JS)

*CSS-only component libs NOT recommended
- 🟒 DaisyUI
-🟒❌ Headless UI*
🟒 DaisyUI -- *Categorically not recommended b/c some components will require JavaScript and adding your own JS and achieving accessibility is hard; the better approach is to start with an accessible, JS-enabled UI component lib for your framework that comes with nice default styles and allows styling to your preference (e.g. Shadcn).
- DaisyUI offers themes that can be one-off customized with TailwindCSS classes or altered using Tailwind's @apply directive. CSS-only components require the dev to add accessible interactions with JS–a lot of work.
- **Headless UI is a paid product with official React and Vue support; can use as HTML & CSS with SvelteKit, but no JS.
- Update: won't maintain this row anymore.
Docs 10/10 10/10 --
Component Directory sveltesociety.dev/components (add yours) --

Low priority

The following are low-priority framework features because they can be enabled easily via hosting providers or other common tools (e.g. analytics).

Svelte Kit NextJS Winner Notes
Prod: HTTP Early Hints response of JS/CSS** ❌ ❌ Neither **Not super relevant as a framework feature anymore because easily enabled via some hosting platform providers. Replaces HTTP2 Server Push. Send two responses: 1.) a 103 response status with headers listing resources to preload & preconnect; 2.) a standard 200 response status or similar. (Cloudflare can do this for sites automatically.)
Web vitals reporting** ❌ 🟒 NextJS **Not super relevant as a framework feature anymore because easily added via analytics snippet now or via some hosting platform providers. Cloudlfare Site Analytics offers Core Web Vitals tracking with zero configuration; it's part of their JS snippet. Vercel also offers it if using NextJS or NuxtJS & has a superb dashboard.

Due to the wide ecosystem of Next JS, a framework built on top of Next JS Blitz JS is also an honorable mention. It comes with features that Next JS doesn't support natively like auth mechanism and more. Suitable for medium or large-size projects. And also, you can utilize your Next JS knowledge while using Blitz JS.

Top categories

Loading Svelte Themes