svelte vs next

Sveltekit vs Nextjs

Perbandingan fitur utama di Sveltekit vs NextJS.

Sasaran: Termasuk Konfigurasi, Cepat, Konvensi, & Baterai Termasuk. Pilihan yang luar biasa adalah buruk versus memberikan jalan yang jelas ke depan.

	Sveltekit	Nextjs	Pemenang	Catatan
Ui Lib	Langsing	Bereaksi (atau MillionJs atau Preact)	Sveltekit	Svelte menawarkan pembaruan dom yang lebih cepat, ukuran klien KB yang lebih kecil, manajemen negara bagian lintas komponen yang jauh lebih mudah, kemampuan untuk abstrak keadaan responsif ke dalam file eksternal, dll. Svelte5 memiliki rune (sinyal)?, React belum memiliki yang setara.
Dev: Reload panas	?	?	-	IE Muat Ulang Otomatis pada Simpan File.
Dev: o (1) Reload panas	? Vite	? ? Turbopack (*tidak diaktifkan secara default)	Sveltekit	IE hanya memproses file yang diubah. Cepat bahkan dalam proyek besar. *Perbarui package.json untuk mengaktifkan turbopack: "dev": "next dev --turbo" .
Dev: "Refresh Cepat"	? ? (tidak diaktifkan secara default)	?	Nextjs	IE UI State dilestarikan di seluruh ulang.
Dev: Tulis JS modern	?	?	-
Dev: a11y Console mengisyaratkan	?		Sveltekit
Dev: Prettier	?	?	-	Untuk file .svelte atau .jsx , masing -masing. Untuk Sveltekit, instal Svelte for VSCode .
Prod: Bundler	?	?	-	Misalnya aset minifikasi, dll. Keduanya diaktifkan secara default. Ketika Rolldown (Rust) siap pada tahun 2024, SVELTE akan dapat beralih dari Rollup+EsBuild ke Rolldown untuk bangunan produksi yang lebih cepat.
Prod: Pemisahan kode otomatis, per rute	?	?	-	IE Auto Code Split JS & CSS per rute & bundel dengan tepat.
Prod: Bangun adaptor untuk host yang berbeda	?		Sveltekit	Sveltekit memberikan portabilitas yang mudah bagi banyak host. NextJS bekerja paling baik dengan Vercel.
Ukuran KB: Halo Dunia	? 46.3 (25.6 GZIP) dengan CSR* ? 2.9 (3.3 GZIP) tanpa CSR (1.8kb dari ini adalah favicon; menunjukkan lebih besar dengan Gzip di Chrome)	336.3 (131.3 GZIP) (Termasuk Favicon 9.7kb?)*	Sveltekit	- *CSR adalah "router sisi klien". - SVELTEKIT Diperbarui 25 Agustus 2023 Menggunakan Sveltekit 1.23 & Svelte 4. - NextJS Diperbarui 25 Agustus 2023 Menggunakan Router Aplikasi, NextJs 13.4.19, & React 18.2.0. - Kedua tes mengembalikan html dari <p>hello world</p> dan mengecualikan CSS.
Ukuran KB: Aplikasi "Dunia Nyata"	Terlalu kedaluwarsa	Terlalu kedaluwarsa	-	Kedaluwarsa; PR selamat datang. *13 Mar 2021 https://realworld.svelte.dev/, https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework
Rendering: SSR, per rute	?	?	-	IE server-side yang diberikan pada waktu lari.
Rendering: Streaming	?	?	-	IE Server mengirim aliran http saat diterjemahkan di server, daripada menunggu render penuh untuk diselesaikan sebelum mengirim respons.
Rendering: statis, per rute	?	?	-	Yaitu html statis yang dihasilkan pada waktu pembangunan.
Rendering: regenerasi statis tambahan, per rute	? di Vercel non-tepi	? di Vercel non-tepi	-	Static 'on Demand' dalam produksi - Saya pertama meminta dinamis, lalu di -cache static. Untuk runtime lainnya (seperti Edge di Vercel & Cloudflare), pertimbangkan untuk mengatur header cache-control rute Anda untuk menggunakan stale-while-revalidate untuk beberapa manfaat serupa.
Rendering: "prerendering parsial"		??*	Nextjs	*"Eksperimental", di NextJs v14 atau lebih baru. Memungkinkan prerendring statis dari halaman dinamis streaming + streaming, seperti tombol auth pengguna di header, status keranjang belanja, dll.
Header: S-Max-Age & Max-Age, per rute	?	?	-
Rute: Perutean berbasis file	?	?	-	Untuk kesederhanaan. Utilitas perutean lainnya harus dimasukkan.
Rute: "Mode Spa"	?	?	-	SSR untuk pemuatan halaman awal, lalu perutean sisi klien untuk halaman berikutnya.
Rute: Pra-Fetch JS/CSS di Link Hover	?	? Berikutnya/Tautan	Sveltekit	Secara default di Sveltekit, dapat ditimpa atau dihapus. Svelte juga menawarkan preloadCode() dan prefetchData() untuk memuat semua atau beberapa rute yang ditentukan melalui regex-POWERFID! NextJS mengharuskan menggunakan komponen tautannya; Lihat Docs.
Built-in: Metadata	?	? Berikutnya/Kepala	-	Tempatkan di dalam <svelte:head>...</svelte:head> .
Built-in: Manajemen Negara	? Svelte/Store	? usestate	Sveltekit	Ideal adalah salah satu, mudah, cara bawaan. Bereaksi memiliki useState , Zustand, & lainnya. Svelte4 menggunakan vars dan toko reaktif. SVELTE5 membawa rune (sinyal) untuk DX yang lebih baik, kinerja memperbarui keadaan lebih baik daripada React (karena berbasis sinyal), dan kemampuan untuk menggunakan reaktivitas di dalam file templat (mis .svelte ) dan mendukung file (mis .svelte.ts ), memungkinkan cara baru untuk refactor dan abstrak kode Anda. Svelte terus menang atas manajemen negara.
Built-in: Animasi	? Svelte/Animate		Sveltekit	Pilihan pihak ke-3 ada untuk bereaksi, tetapi mereka tidak mudah digunakan. Framermotion populer untuk bereaksi. Motion One juga perpustakaan yang hebat (kecil & cepat) dan bekerja dengan kerangka kerja UI apa pun.
Built-in: Optimalisasi Gambar	? Enhanced: IMG (beta)	? Berikutnya/Gambar	-	Optimalisasi gambar waktu build-time (konversi ke avif atau webp), pembuatan elemen gambar dengan fallback ke jpeg atau png, mengubah ukuran, menambahkan lebar & tinggi secara otomatis, tambahkan nama file hash untuk caching, dll. Layanan host juga ada jika Anda lebih suka melakukan ini pada saat runtime (gambar cloudflare, cloudinary, gumlet, dll) juga jika Anda lebih suka melakukan ini pada runtime (cloudflare gambar, cloudinary, cloudinary, dll)) jika Anda lebih suka melakukan ini pada runtime (cloudflare, cloudinary, gumlet,
Built-in: Formulir	? Tindakan & use:enhance (bekerja dengan atau tanpa JS) atau Formsnap (dibangun di atas superform) atau Superform	? Formulir NextJS 13 dan Tindakan Server (berfungsi dengan atau tanpa JS, jika dibangun dengan benar)	-	Svelte memiliki dukungan bentuk bawaan dengan peningkatan progresif yang berfungsi bahkan tanpa JS; Mereka sangat bersih karena aturan validasi didefinisikan sekali dan digunakan untuk sisi klien & server. Formik (untuk React) bersih tetapi membutuhkan JS dan duplikasi aturan validasi di sisi server; Mirip dengan Felte (untuk React, Sveltekit, & Vue).
Auth	? AUTH.JS atau LUCIA	? AUTH.JS atau LUCIA	-	Auth.js (formal nextAuth.js) adalah standar defacto untuk NextJS; mudah digunakan; Tautan email, sosial, &/atau satu klik. Ini juga mendukung Sveltekit. Pengumuman asli. Namun, Lucia sangat populer di komunitas Sveltekit. - thecopenhagenbook.com (gratis oleh penulis Lucia) mungkin bermanfaat untuk mempelajari cara mengatur auth, untuk salah satu kerangka kerja.
Generasi gambar OG	? @ethercorps/lsveltekit-og*	? @Vercel/OG	Nextjs	@ethercorps/sveltekit-og didasarkan pada Satori, yang @vercel/og juga didasarkan pada. * ON @ethercorps/sveltekit-og karena tidak bekerja pada host tertentu seperti halaman cloudflare. Kredit ke Vercel karena membuat Satori. Keduanya termasuk dukungan tailwindcss. Kesempatan bagi seseorang untuk menyumbangkan OG Lib untuk Sveltekit!
Sitemap	? Sitemap super	? Sitemap berikutnya	-	Super Sitemap menang dengan kemudahan penggunaan dan terkini konvensi yang diharapkan untuk Sitemap, tetapi keduanya menyelesaikan pekerjaan. Pengungkapan: Saya penulis Super Sitemap. Masalah GitHub untuk Dukungan Sitemap.xml resmi di Sveltekit.
Pengambilan data	? Kueri Tanstack ? SSWR ? trpc	? Kueri Tanstack ? Swr ? trpc	-	Easy fetch/isloading/kesalahan/caching. SVELTEKIT menyediakan keamanan tipe otomatis (lihat catatan di bawah sampel kode) untuk data yang dikembalikan dari fungsi beban berkat modul $types autogenerated, tanpa pekerjaan di bagian dev.
Kompatibel CSS Tailwind	? (atau melalui LSVELTE-ADD)	?	Nextjs b/c built in. Keduanya mudah.	Untuk NextJS, cukup periksa Yes untuk opsi TailWindCSS saat membuat aplikasi NextJS Anda menggunakan create-next-app. Tailwind V4 akan membuat pengaturan menjadi lebih mudah.
Lib komponen UI - ditata	-? Shadcn Svelte (tidak resmi)* -? Flowbite Svelte -? Kerangka UI -? Komponen karbon langsing	-? Shadcn ui ** -? Tailwind ui -? Mui -? Desain semut -? UI Mantine -? Chakra Ui -? Flowbite bereaksi	Nextjs	- *Dibangun di atas Bitsui (mirip dengan Radixui), yang sendiri dibangun di atas Meltui - ** Dibangun di Radixui.
LIBS KOMPONEN UI - Tidak Ternak	-? Bit ui* -? Melelehkan ui ** - ?? Svelte-headlessui (tidak resmi; masalah untuk dukungan resmi: 1, 2)	-? Radix UI -? UI tanpa kepala -? Bereaksi aria	Nextjs	Komponen UI yang tidak bergaya (dropdown, slider, sakelar, dll). -*Dibangun di atas Meltui, untuk menyediakan antarmuka komponen yang lebih akrab. - ** Melt UI adalah penerus Radix-Svelte.
Dokumen	10/10	10/10	-
Direktori Komponen	lsveltesociety.dev/components (tambahkan milik Anda)	-
Retensi dev (proxy untuk kenikmatan; svelte vs bereaksi)	90%	83%	Langsing	*Sumber: State of JS 2022 Front-End Frameworks 'Retensi'
Filsafat	Prinsip	?	n/a	"Orang -orang menggunakan Svelte karena mereka suka Svelte. Mereka menyukainya karena itu selaras dengan kepekaan estetika mereka. Alih -alih berusaha untuk menjadi yang tercepat atau terkecil atau apa pun, kami secara eksplisit bertujuan untuk menjadi kerangka kerja dengan getaran terbaik. ... Kami tidak berusaha menjadi kerangka kerja yang paling populer, kami berusaha menjadi framework terbaik. ?

Prioritas rendah

Berikut ini adalah fitur kerangka kerja prioritas rendah karena dapat diaktifkan dengan mudah melalui penyedia hosting atau alat umum lainnya (misalnya analitik), atau praktik terbaik lainnya telah muncul seperti menggunakan kerangka kerja gaya berbasis utilitas.

	Kit langsing	Nextjs	Pemenang	Catatan
Built-in: CSS Scoping	?	?	Sveltekit	Svelte adalah otomatis. NextJS 'adalah melalui modul CSS atau CSS di JSX (tidak bersih). Tidak relevan jika Anda menggunakan tailwindcss. Pindah ke "prioritas rendah" b/c sekarang standar untuk menggunakan kerangka kerja gaya berbasis utilitas seperti tailwindcss atau unocss untuk komposabilitas & berbagi komponen.
Prod: HTTP Petunjuk Awal Respons JS/CSS **			Juga tidak	** Tidak super relevan sebagai fitur kerangka kerja lagi karena mudah diaktifkan melalui beberapa penyedia platform hosting. Menggantikan dorongan server HTTP2. Kirim dua tanggapan: 1.) Status respons 103 dengan header mencantumkan sumber daya ke preload & prakoneksi; 2.) Status respons 200 standar atau serupa. (Cloudflare dapat melakukan ini untuk situs secara otomatis.)
Pelaporan Vital Web **		?	Nextjs	** Tidak super relevan sebagai fitur kerangka kerja lagi karena mudah ditambahkan melalui cuplikan analitik sekarang atau melalui beberapa penyedia platform hosting. Cloudlfare Site Analytics menawarkan pelacakan inti web vitals dengan nol konfigurasi; Itu bagian dari cuplikan JS mereka. Vercel juga menawarkannya jika menggunakan NextJs atau Nuxtjs & memiliki dasbor yang luar biasa .
Lib komponen khusus CSS (yaitu tidak JS) * secara kategoris tidak disarankan *	-? Daisyui -? UI tanpa kepala*	? Daisyui	-	*Kategoris tidak disarankan B/C beberapa komponen akan memerlukan javascript dan menambahkan JS Anda sendiri dan mencapai aksesibilitas itu sulit; Pendekatan yang lebih baik adalah memulai dengan komponen UI yang dapat diakses, komponen UI untuk kerangka kerja Anda yang dilengkapi dengan gaya default yang bagus dan memungkinkan gaya untuk preferensi Anda (misalnya shadcn). - DaisyUi menawarkan tema yang dapat disesuaikan sekali saja dengan kelas TailWindCSS atau diubah menggunakan Tailwind's @apply Directive. Komponen khusus CSS mengharuskan DEV untuk menambahkan interaksi yang dapat diakses dengan JS-banyak pekerjaan. - ** UI Tanpa Kepala adalah produk berbayar dengan Dukungan Reaksi dan Vue resmi; Dapat digunakan sebagai HTML & CSS dengan Sveltekit, tetapi tidak ada JS. - UPDATE: Tidak akan mempertahankan baris ini lagi.

Karena ekosistem yang luas dari JS berikutnya, kerangka kerja yang dibangun di atas JS Blitz JS berikutnya juga merupakan penghargaan terhormat. Muncul dengan fitur -fitur yang Next JS tidak mendukung secara asli seperti mekanisme auth dan banyak lagi. Cocok untuk proyek ukuran sedang atau besar. Dan juga, Anda dapat memanfaatkan pengetahuan JS berikutnya saat menggunakan Blitz JS.