Skip to content

Instantly share code, notes, and snippets.

@nberlette
Last active March 29, 2022 05:53
Show Gist options
  • Save nberlette/c7ee7e1773fb55cf4ff1b713e748969e to your computer and use it in GitHub Desktop.
Save nberlette/c7ee7e1773fb55cf4ff1b713e748969e to your computer and use it in GitHub Desktop.
Svelte vs. Next.js

SvelteKit πŸ†š Next.js

Objectives: fast, easy, convention over configuration, & batteries included. Overwhelming choices < providing a clear path forward.

Contenders: SvelteKit (by Svelte) and Next.js (by Vercel).


Comparison of Major Features

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.

Conclusion and Thoughts

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.


Legend: Emojis & Symbols

  • 🟒 Feature Available
  • 🟑 3rd-party / partially available
  • β›” Feature Unavailable
  • 🚧 Work in Progress or RFC
  • ⚠️ Important Info / Warning

MIT 2021 Β© Nicholas Berlette. Forked from jasongitmail.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment