Objectives: fast, easy, convention over configuration, & batteries included. Overwhelming choices < providing a clear path forward.
Contenders: SvelteKit (by Svelte) and Next.js (by Vercel).
| Feature/Category | SvelteKit | Next.js | Winner | More Information |
|---|---|---|---|---|
| UI framework | Svelte | React | SvelteKit | Svelte offers faster, more minimal DOM updates & smaller Kb client size. |
| O(1) Hot Reload (dev) | Vite | ⛔ | SvelteKit | I.e. Processes only the changed files. Fast even in big projects. |
| Hot Reload (dev) | 🟢 | 🟢 | -- | I.e. Auto reload on file save. |
| "Fast refresh" (dev) | 🟢 | 🟢 | -- | I.e. UI state preserved across reloads. |
| Write modern JS (dev) | 🟢 | 🟢 | -- | Svelte compiler processes it. Next.js uses Babel for this. |
| A11y console hints (dev) | 🟢 | ⛔ | SvelteKit | |
| Prettier (dev) | 🟢 | 🟢 | -- | For .svelte or .jsx files. For SvelteKit, install Svelte for VSCode extension. |
| Auto code-splitting, per route (prod) | 🟢 | 🟢 | -- | I.e. Auto code splits JS & CSS per route & bundles appropriately. |
| HTTP2 push JS/CSS* (prod) | ⛔ | ⛔ | Neither | I.e. Set initial page's HTML headers to push JS & CSS. Requires host support (and/or 'link preload' added to HTML head). *Chrome deprecated this 12/2020. |
| Build adapters for host providers (prod) | 🟢 | ⛔ | SvelteKit | SvelteKit provides easy portability. Next.js works best with Vercel. |
| Server Side Rendering (SSR), per route | 🟢 | 🟢 | -- | I.e. Server-side rendered (at run time). |
| Static Site Generation (SSG), per route | 🟢 | 🟢 | -- | I.e. Static (at build time). |
| Incremental Rendering (SSG), per route | ⛔ | 🟢 | Next.js | I.e. Static 'on demand' in production--first req dynamic then cached. |
| Cache MaxAge Headers, per route | 🟢 | 🟡 | SvelteKit | SvelteKit can set headers for server routes or specify max-age for client routes via load function. Next.js allows it for server routes via vercel.json |
| File-based routing (Routes) | 🟢 | 🟢 | -- | For simplicity. Other routing utilities should be included. |
| "SPA mode" (Routes) | 🟢 | 🟢 | -- | SSR for initial page load, then client-side routing for subsequent pages. |
| Built-in: State Management | store 🟢 | 🟡 | SvelteKit | Ideal is one, easy, built-in way. React has many choices--Zustand is reasonable. |
| Built-in: Animations | 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. Next.js' is via CSS modules or CSS in JSX (not as clean). |
| Tailwind CSS compatible | 🟢 | 🟢 | -- | Easy via svelte-add-tailwindcss. Next.js requires more steps, but RFC for npx init tailwind |
| Headless UI available | ⛔ | 🟡 | Next.js | 🚧 Un-styled UI components (dropdown, slider, toggle, etc) from Tailwind creators. |
| Web vitals reporting | 🟢 | 🟢 | Next.js | *Not-so-relevant these days; easily added via analytics snippet/platform provider, such as: Cloudlfare Analytics and Vercel. |
| Bundler (prod) | Rollup | Webpack | -- | E.g. Minify assets, etc. |
| Built-in: Metadata | svelte:head | next/head | -- | Place within <svelte:head>...</svelte:head> |
| Pre-fetch JS/CSS on hover (Routes) | svelte:prefetch |
next/link | SvelteKit | Just add sveltekit:prefetch to a regular link. Svelte can prefetch routes (via regex); Next.js requires their next/link component; see docs. |
| Access Control / User Auth | (soon?) | NextAuth.js | Next.js | NextAuth.js is defacto standard for Next.js; easy to use; email, social, &/or one-click link. |
| Image component | svelte-image | next/image | -- | Preferably optimized image generation with caching. |
| Form Components | Felte | Formik | -- | Felte offers a nearly-native HTML5 form experience. Or Sveltik is a port of Formik for React. Can use Yup for validation. |
| SWR-like (Stale While Reload) fetching | svelte-query | SWR | -- | SWR is by Vercel. Easy fetch/isLoading/errors/caching. |
Hello World size (Kb) |
0.52 Kb | 204 Kb | SvelteKit | *Mar 19 2021. Source |
Real World size (Kb) |
45.3 Kb | 327 Kb | SvelteKit | *Mar 13, 2021 [Read: Real World App][svelterealworld-url], (source) |
| Documentation | A+ | A+ | -- | Both are thoroughly documented. |
I've been experimenting with both Svelte and Next.js a lot recently, I still have trouble picking one over the other 😬
Both of these frameworks bring a lot to the table, each in their own respective flavors. I'd say that rather than one being an out-and-out winner over the other, they're more along the lines of cordial competitors in similar fields. I can't really deny the fact that "SvelteKit" is all I'm seeing in the "Winner" column, however. At the end of the day, the choice (as always) boils down to your development preferences, and project-specific requirements.
In the React scene, Next.js and the development experience that Vercel provides are essentially unrivalled. They really are best-in-class, no doubt about that. But as we edge closer to the 10-year mark of React's existence, I must say that Svelte (and SvelteKit) are a refreshing change of pace. With it's built-in features (lookin' at you, CSS animations) and familiar syntax, it just seems to pick up right where Vanilla JS fell short... without forcing us to learn a whole new style of coding.
- 🟢 Feature Available
- 🟡 3rd-party / partially available
- ⛔ Feature Unavailable
- 🚧 Work in Progress or RFC
⚠️ Important Info / Warning
MIT 2021 © Nicholas Berlette. Forked from jasongitmail.