svelte-vs-next
svelte-vs-next copied to clipboard
jasongitmail
Comparison of major features in SvelteKit vs NextJS.
trafficstars
Svelte Kit vs NextJS
Comparison of major features in Svelte Kit vs NextJS.
Goals: fast, easy, convention over configuration, & batteries included. Overwhelming choices are bad versus providing a clear path forward.
| Svelte Kit | NextJS | Winner | Notes | |
|---|---|---|---|---|
| UI lib | Svelte | React (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 | ❌ | SvelteKit | I.e. Processes only the changed files. Fast even in big projects. |
| 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 splits JS & CSS per route & bundles appropriately. |
| Prod: Build adapters for different hosts | 🟢 | ❌ | SvelteKit | SvelteKit provides easy portability. NextJS works best with Vercel. |
| KB size: Hello World | 🟢 34.21 (16.2 gzip)* | ❌ 265.9 (91.59 gzip)* | SvelteKit | *June 11, 2022. With Svelte Kit, it is possible to exclude all JS from a route, meaning that its minimal KB size would be an HTML file containing Hello World; so the listed KB is the default configuration with client-side router, et al, that most apps will use. |
| KB size: "Real World" app | too out of date | too out of date | -- | *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 SSR | 🟢 | 🟢 | -- | Server sends |
| Rendering: SSG, per route | 🟢 | 🟢 | -- | I.e. Static (at build time). |
| Rendering: Incremental SSG, per route | ❌ ETA post-1.0 | 🟢 | NextJS | I.e. Static 'on demand' in production--first req dynamic then cached. |
| Headers: s-max-age & max-age, per route | 🟢 ❌ | 🟢 🟢 | -- | SvelteKit can set headers for server routes or specify max-age for client routes via load function. NextJS allows it for server routes, not client routes, but can be set via vercel.json if hosted on Vercel. |
| 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 | Just add sveltekit:prefetch to a regular link. Svelte also offers a prefetch() and prefetchRoutes() to prefetch 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: 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. |
| Built-in: CSS scoping | 🟢 | 🟢 | SvelteKit | Svelte's is automatic. NextJS' is via CSS modules or CSS in JSX (not as clean). |
| Auth | ❌ (soon?) | 🟢 NextAuth.js | NextJS | NextAuth.js is defacto standard for NextJS; easy to use; email, social, &/or one-click link. |
| Forms | 🟢 Felte | 🟢 Formik | -- | Felte offers a nearly-native HTML5 form experience. Or Sveltik is a port of Formik for React. Can use Yup for validation. |
| Image component | 🟢? svelte-image or image-tools | 🟢 next/image | -- | For optimized image generation, preferably with caching. Hosted services exist as well |
| SWR-like data fetching | 🟢? svelte-query | 🟢 SWR | -- | SWR is by Vercel. Easy fetch/isLoading/errors/caching. |
| Tailwind CSS compatible | 🟢 | 🟢 | SvelteKit | Easy via github.com/svelte-add/tailwindcss. NextJS requires more steps, but RFC for npx init tailwind |
| Headless UI available | 🟢 svelte-headlessui (unofficial) | 🟢 | NextJS | Un-styled UI components (dropdown, slider, toggle, etc) from Tailwind creators. |
| Docs | 10/10 | 10/10 | -- | |
| Module Directory | sveltesociety.dev/components | -- |
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. |
Metadata
209
Stars
4
Forks
Watchers
Owner
jasongitmail
Metadata
Comparison of major features in SvelteKit vs NextJS.