svelte vs next

sveltekit vs nextjs

การเปรียบเทียบคุณสมบัติที่สำคัญใน sveltekit vs nextjs

เป้าหมาย: เร็วง่ายการประชุมการกำหนดค่าและแบตเตอรี่รวมอยู่ด้วย ตัวเลือกที่ล้นหลามนั้นไม่ดีเมื่อเทียบกับเส้นทางที่ชัดเจนไปข้างหน้า

	sveltekit	nextjs	ผู้ชนะ	หมายเหตุ
ui lib	svelte	ตอบโต้ (หรือล้านหรือ preact)	sveltekit	Svelte เสนอการอัปเดต DOM ที่เร็วขึ้นขนาดไคลเอ็นต์ KB ที่เล็กลงการจัดการสถานะข้ามองค์ประกอบที่ง่าย ขึ้น ความสามารถในการเป็นนามธรรมในการตอบสนองต่อไฟล์ภายนอก ฯลฯ Svelte5 มีรูน (สัญญาณ)?, React ยังไม่ได้เทียบเท่า
dev: โหลดร้อนใหม่	-	-	-	เช่นโหลดอัตโนมัติบนไฟล์บันทึก
dev: o (1) โหลดร้อน	- Vite	- - Turbopack (*ไม่เปิดใช้งานโดยค่าเริ่มต้น)	sveltekit	เช่นประมวลผลเฉพาะไฟล์ที่เปลี่ยนแปลง เร็วแม้ในโครงการขนาดใหญ่ *Update package.json เพื่อเปิดใช้งาน Turbopack: "dev": "next dev --turbo"
Dev: "Fast Refresh"	- - (ไม่เปิดใช้งานโดยค่าเริ่มต้น)	-	nextjs	เช่นสถานะ UI ที่เก็บรักษาไว้ในการโหลดซ้ำ
Dev: เขียน JS ที่ทันสมัย	-	-	-
dev: คำแนะนำคอนโซล A11Y	-		sveltekit
Dev: สวยกว่า	-	-	-	สำหรับไฟล์ .svelte หรือ .jsx ตามลำดับ สำหรับ sveltekit ให้ติดตั้ง Svelte for VSCode
Prod: Bundler	-	-	-	เช่นสินทรัพย์ minify ฯลฯ ทั้งสองถูกเปิดใช้งานโดยค่าเริ่มต้น เมื่อ Rolldown (Rust) พร้อมในปี 2024 Svelte จะสามารถเปลี่ยนจาก Rollup+Esbuild เป็น Rolldown เพื่อสร้างการผลิตที่เร็วขึ้น
Prod: การแยกรหัสอัตโนมัติต่อเส้นทาง	-	-	-	IE รหัสอัตโนมัติแยก JS & CSS ต่อเส้นทางและชุดข้อมูลอย่างเหมาะสม
Prod: สร้างอะแดปเตอร์สำหรับโฮสต์ที่แตกต่างกัน	-		sveltekit	Sveltekit ให้ความสะดวกสบายให้กับโฮสต์จำนวนมาก NextJS ทำงานได้ดีที่สุดกับ Vercel
KB Size: Hello World	- 46.3 (25.6 GZIP) กับ CSR* - 2.9 (3.3 GZIP) โดยไม่มี CSR (1.8KB ของนี่คือ Favicon; แสดงให้เห็นว่าใหญ่กว่าด้วย GZIP ใน Chrome)	336.3 (131.3 GZIP) (รวมถึง 9.7KB favicon?)*	sveltekit	- *CSR คือ "เราเตอร์ฝั่งไคลเอ็นต์" - Sveltekit อัปเดต 25 ส.ค. 2023 โดยใช้ Sveltekit 1.23 & Svelte 4 - NextJS อัปเดต 25 ส.ค. 2023 โดยใช้เราเตอร์แอพ, NextJS 13.4.19, & React 18.2.0 - การทดสอบทั้งสองส่งคืน HTML ของ <p>hello world</p> และไม่รวม CSS
ขนาด KB: "โลกแห่งความจริง"	ล้าสมัยเกินไป	ล้าสมัยเกินไป	-	ล้าสมัย ยินดีต้อนรับ *13 มี.ค. 2021 https://realworld.svelte.dev/, https://svelte.dev/blog/sapper-towards-the-ideal-web-app-frameworkork
การแสดงผล: SSR ต่อเส้นทาง	-	-	-	IE ด้านเซิร์ฟเวอร์แสดงผลในเวลาทำงาน
การแสดงผล: สตรีมมิ่ง	-	-	-	IE Server ส่งสตรีม HTTP ตามที่แสดงบนเซิร์ฟเวอร์แทนที่จะรอการแสดงผลเต็มรูปแบบเพื่อให้เสร็จสมบูรณ์ก่อนที่จะส่งการตอบกลับ
การแสดงผล: คงที่ต่อเส้นทาง	-	-	-	เช่น HTML แบบคงที่สร้างขึ้นในเวลาที่สร้าง
การแสดงผล: การฟื้นฟูแบบคงที่แบบเพิ่มขึ้นต่อเส้นทาง	- บน vercel ที่ไม่ขอบ	- บน vercel ที่ไม่ขอบ	-	'ตามความต้องการ' แบบคงที่ในการผลิต - ie ขอครั้งแรกแบบไดนามิกจากนั้นแคชเป็นแบบคงที่ สำหรับ Runtimes อื่น ๆ (เช่น Edge on Vercel & CloudFlare) ให้พิจารณาการตั้งค่าส่วนหัว cache-control ของเส้นทางของคุณเพื่อใช้ stale-while-revalidate เพื่อผลประโยชน์ที่คล้ายกัน
การแสดงผล: "บางส่วนก่อน"		-	nextjs	*"การทดลอง" ใน NextJS V14 หรือใหม่กว่า อนุญาตให้ prerendring prerending ของหน้า + การสตรีมพื้นที่ไดนามิกเช่นปุ่ม Auth Auth ในส่วนหัว, สถานะตะกร้าสินค้า ฯลฯ
ส่วนหัว: S-Max-age & Max-age ต่อเส้นทาง	-	-	-
เส้นทาง: การกำหนดเส้นทางตามไฟล์	-	-	-	เพื่อความเรียบง่าย ควรรวมยูทิลิตี้การกำหนดเส้นทางอื่น ๆ
เส้นทาง: "โหมดสปา"	-	-	-	SSR สำหรับการโหลดหน้าเริ่มต้นจากนั้นกำหนดเส้นทางฝั่งไคลเอ็นต์สำหรับหน้าถัดไป
เส้นทาง: pre-fetch JS/CSS บนลิงค์โฮเวอร์	-	- ถัดไป/ลิงค์	sveltekit	โดยค่าเริ่มต้นใน sveltekit สามารถแทนที่หรือลบออกได้ Svelte ยังเสนอ preloadCode() และ prefetchData() เพื่อโหลดล่วงหน้าทั้งหมดหรือบางเส้นทางที่ระบุผ่าน Regex-พลัง! NextJS ต้องใช้ส่วนประกอบลิงก์ของพวกเขา ดูเอกสาร
ในตัว: ข้อมูลเมตา	-	- ถัดไป/หัว	-	สถานที่ภายใน <svelte:head>...</svelte:head>
ในตัว: การจัดการของรัฐ	- svelte/store	- ใช้งาน	sveltekit	อุดมคติเป็นวิธีที่ง่ายและในตัว React มี useState , Zustand, และอื่น ๆ SVELTE4 ใช้ VAR และร้านค้าที่มีปฏิกิริยา SVELTE5 นำรูน (สัญญาณ) สำหรับ DX ที่ดียิ่งขึ้นประสิทธิภาพการอัพเดตสถานะที่ดีกว่าปฏิกิริยา (เนื่องจากเป็นสัญญาณตามสัญญาณ) และความสามารถในการใช้ปฏิกิริยาภายในไฟล์เทมเพลต (เช่น .svelte ) และ สนับสนุนไฟล์ (เช่น .svelte.ts ) Svelte ยังคงชนะในการจัดการของรัฐ
ในตัว: ภาพเคลื่อนไหว	- svelte/antiMi		sveltekit	ตัวเลือกของบุคคลที่ 3 มีอยู่สำหรับ React แต่พวกเขาไม่ได้ใช้งานง่าย Framermotion เป็นที่นิยมสำหรับ React Motion One เป็นห้องสมุดที่ยอดเยี่ยม (เล็กและรวดเร็ว) และทำงานกับกรอบ UI ใด ๆ
ในตัว: การเพิ่มประสิทธิภาพรูปภาพ	- ปรับปรุง: IMG (เบต้า)	- ถัดไป/รูปภาพ	-	การเพิ่มประสิทธิภาพภาพเวลาสร้าง (การแปลงเป็น AVIF หรือ WEBP) การสร้างองค์ประกอบรูปภาพด้วยทางเลือกกลับไปยัง JPEG หรือ PNG การปรับขนาดเพิ่มความกว้างและความสูงโดยอัตโนมัติเพิ่มชื่อไฟล์แฮชสำหรับการแคช ฯลฯ
ในตัว: แบบฟอร์ม	- การกระทำและ use:enhance (ทำงานโดยมีหรือไม่มี JS) หรือ FormSNAP (สร้างขึ้นบน Superforms) หรือ มีรูปทรงสูง	- ฟอร์ม NextJS 13 และการกระทำของเซิร์ฟเวอร์ (ทำงานโดยมีหรือไม่มี JS หากสร้างขึ้นอย่างถูกต้อง)	-	Svelte ได้รับการสนับสนุนแบบฟอร์มในตัวพร้อมการปรับปรุงแบบก้าวหน้าที่ใช้งานได้แม้จะไม่มี JS พวกเขาสะอาดมากเนื่องจากกฎการตรวจสอบความถูกต้องถูกกำหนดหนึ่งครั้งและใช้สำหรับทั้งฝั่งไคลเอ็นต์และเซิร์ฟเวอร์ Formik (สำหรับ React) สะอาด แต่ต้องใช้ JS และการทำซ้ำกฎการตรวจสอบความถูกต้องทางฝั่งเซิร์ฟเวอร์ คล้ายกับ Felte (สำหรับ React, Sveltekit, & Vue)
รับรองความถูกต้อง	- Auth.js หรือ Lucia	- Auth.js หรือ Lucia	-	auth.js (อย่างเป็นทางการ nextauth.js) เป็นมาตรฐาน defacto สำหรับ nextjs; ใช้งานง่าย ลิงค์อีเมลโซเชียล &/หรือคลิกเดียว รองรับ sveltekit ด้วย ประกาศดั้งเดิม อย่างไรก็ตาม Lucia ได้รับความนิยมอย่างมากในชุมชน Sveltekit - TheCopenhagenbook.com (ฟรีโดยผู้เขียนของ Lucia) อาจเป็นประโยชน์ในการเรียนรู้วิธีการตั้งค่าการรับรองความถูกต้องสำหรับเฟรมเวิร์กทั้งสอง
การสร้างภาพ OG	- @ethercorps/sveltekit-og*	- @vercel/og	nextjs	@ethercorps/sveltekit-og ขึ้นอยู่กับ satori ซึ่ง @vercel/og ก็ขึ้นอยู่กับ * บน @ethercorps/sveltekit-og เพราะไม่ได้ทำงานกับโฮสต์บางอย่างเช่นหน้า CloudFlare เครดิตไปยัง Vercel สำหรับการสร้าง satori ทั้งสองรวมถึงการสนับสนุน tailwindcss โอกาสสำหรับใครบางคนที่จะมีส่วนร่วม OG lib สำหรับ sveltekit!
แผนผังไซต์	- Super Sitemap	- รายการถัดไป	-	Super Sitemap ชนะในการใช้งานง่ายและการประชุมที่คาดหวังสำหรับแผนผังไซต์ แต่ทั้งคู่ทำงานให้เสร็จ การเปิดเผย: ฉันเป็นผู้แต่ง Super Sitemap ปัญหา GitHub สำหรับการสนับสนุนอย่างเป็นทางการ sitemap.xml ใน sveltekit
การดึงข้อมูล	- แบบสอบถาม Tanstack - SSWR - TRPC	- แบบสอบถาม Tanstack - SWR - TRPC	-	ง่ายดึง/iSloading/isrors/caching Sveltekit ให้ความปลอดภัยประเภทอัตโนมัติ (ดูหมายเหตุด้านล่างตัวอย่างรหัส) สำหรับข้อมูลที่ส่งคืนจากฟังก์ชั่นโหลดด้วยโมดูล $types autogenerated โดยไม่มีการทำงานในส่วนของ dev
Tailwind CSS เข้ากันได้	- (หรือผ่าน svelte-add)	-	Nextjs b/c ในตัวทั้งสองเป็นเรื่องง่าย	สำหรับ NextJS เพียงตรวจสอบ Yes สำหรับตัวเลือก TailWindCSS เมื่อสร้างแอป NextJS ของคุณโดยใช้ Create-Next-App Tailwind V4 จะทำให้การตั้งค่าง่ายยิ่งขึ้น
UI Component libs - สไตล์	- Shadcn Svelte (ไม่เป็นทางการ)* - flowbite svelte - Skeleton UI - ส่วนประกอบคาร์บอน svelte	- Shadcn Ui ** - tailwind ui - มูย - การออกแบบมด - mantine ui - จักระ UI - Flowbite React	nextjs	- *สร้างขึ้นบน bitsui (คล้ายกับ radixui) ซึ่งสร้างขึ้นบน meltui - ** สร้างขึ้นบน Radixui
UI Component libs - unstyled	- บิต ui* - ละลาย ui ** - Svelte-Headlessui (ไม่เป็นทางการ; ปัญหาสำหรับการสนับสนุนอย่างเป็นทางการ: 1, 2)	- radix ui - ui ที่ไม่มีหัว - ตอบสนอง Aria	nextjs	ส่วนประกอบ UI แบบ UN-Styled (ดรอปดาวน์ตัวเลื่อนสลับ ฯลฯ ) -*สร้างขึ้นบน Meltui เพื่อให้อินเทอร์เฟซส่วนประกอบที่คุ้นเคยมากขึ้น - ** Melt UI เป็นผู้สืบทอดของ Radix-Svelte
เอกสาร	10/10	10/10	-
ไดเรกทอรีส่วนประกอบ	sveltesociety.dev/components (เพิ่มของคุณ)	-
การเก็บรักษา dev (พร็อกซีเพื่อความเพลิดเพลิน; Svelte vs React)	90%	83%	svelte	*ที่มา: สถานะของ JS 2022 Front-End Frameworks 'การเก็บรักษา'
ปรัชญา	หลักคำสอน	-	N/A	"ผู้คนใช้ svelte เพราะพวกเขาชอบ svelte พวกเขาชอบมันเพราะมันสอดคล้องกับความรู้สึกที่สวยงามของพวกเขาแทนที่จะพยายามที่จะเร็วที่สุดหรือเล็กที่สุดหรืออะไรก็ตามเราตั้งเป้าหมายที่จะเป็นกรอบที่ดีที่สุด -

ลำดับความสำคัญต่ำ

ต่อไปนี้เป็นคุณสมบัติเฟรมเวิร์กที่มีลำดับความสำคัญต่ำเนื่องจากสามารถเปิดใช้งานได้อย่างง่ายดายผ่านผู้ให้บริการโฮสติ้งหรือเครื่องมือทั่วไปอื่น ๆ (เช่นการวิเคราะห์) หรือแนวทางปฏิบัติที่ดีที่สุดอื่น ๆ ได้เกิดขึ้นเช่นการใช้เฟรมเวิร์กสไตล์ที่ใช้ยูทิลิตี้

	ชุด svelte	nextjs	ผู้ชนะ	หมายเหตุ
ในตัว: CSS Scoping	-	-	sveltekit	Svelte เป็นไปโดยอัตโนมัติ NextJS 'คือโมดูล CSS หรือ CSS ใน JSX (ไม่สะอาด) ไม่เกี่ยวข้องถ้าคุณใช้ tailwindcss ย้ายไปที่ "ลำดับความสำคัญต่ำ" B/C ตอนนี้เป็นมาตรฐานในการใช้เฟรมเวิร์กสไตล์ที่ใช้ยูทิลิตี้เช่น tailwindcss หรือ Unocss เพื่อการจัดทำและการแบ่งปันส่วนประกอบ
Prod: http คำแนะนำก่อนการตอบสนองของ JS/CSS **			ไม่ใช่ทั้งสองอย่าง	** ไม่เกี่ยวข้องกับคุณสมบัติเฟรมเวิร์กอีกต่อไปเพราะเปิดใช้งานได้ง่ายผ่านผู้ให้บริการแพลตฟอร์มโฮสติ้งบางราย แทนที่การกดเซิร์ฟเวอร์ HTTP2 ส่งสองคำตอบ: 1. ) สถานะการตอบกลับ 103 กับส่วนหัวที่แสดงรายการทรัพยากรเพื่อโหลดล่วงหน้าและ preconnect; 2. ) สถานะการตอบสนองมาตรฐาน 200 สถานะหรือคล้ายกัน (CloudFlare สามารถทำสิ่งนี้สำหรับเว็บไซต์โดยอัตโนมัติ)
Web Vitals รายงาน **		-	nextjs	** ไม่เกี่ยวข้องกับคุณสมบัติเฟรมเวิร์กอีกต่อไปอีกต่อไปเพราะเพิ่มได้อย่างง่ายดายผ่านตัวอย่างการวิเคราะห์ตอนนี้หรือผ่านผู้ให้บริการแพลตฟอร์มโฮสติ้งบางราย การวิเคราะห์ไซต์ Cloudlfare นำเสนอการติดตามเว็บหลักที่มีการกำหนดค่าเป็นศูนย์ มันเป็นส่วนหนึ่งของตัวอย่าง JS ของพวกเขา Vercel ยังให้บริการหากใช้ NextJS หรือ NUXTJS & มีแดชบอร์ดที่ ยอดเยี่ยม
CSS-only องค์ประกอบ libs (เช่นไม่มี JS) * ไม่แนะนำอย่างเด็ดขาด *	- daisyui - ui ที่ไม่มีหัว**	- daisyui	-	* ไม่ แนะนำให้ใช้ b/c ส่วนประกอบบางส่วน จะ ต้องใช้ JavaScript และการเพิ่ม JS ของคุณเองและการบรรลุการเข้าถึงนั้นยาก วิธีที่ดีกว่าคือการเริ่มต้นด้วย LIB ส่วนประกอบ UI ที่เปิดใช้งาน JS ที่เข้าถึงได้สำหรับกรอบการทำงานของคุณที่มาพร้อมกับสไตล์เริ่มต้นที่ดีและอนุญาตให้จัดแต่งทรงผมตามความชอบของคุณ (เช่น Shadcn) - Daisyui นำเสนอธีมที่สามารถปรับแต่งแบบเดียวกับคลาส tailwindcss หรือเปลี่ยนแปลงโดยใช้คำสั่ง @apply ของ Tailwind ส่วนประกอบ CSS เท่านั้นจำเป็นต้องมี dev เพื่อเพิ่มการโต้ตอบที่เข้าถึงได้กับ JS-งานจำนวนมาก - ** Headless UI เป็นผลิตภัณฑ์ที่มีค่าใช้จ่ายพร้อมการสนับสนุนอย่างเป็นทางการและการสนับสนุน VUE; สามารถใช้เป็น html & css กับ sveltekit แต่ไม่มี js - อัปเดต: จะไม่รักษาแถวนี้อีกต่อไป

เนื่องจากระบบนิเวศที่กว้างของ JS ถัดไปกรอบการทำงานที่สร้างขึ้นบนยอด JS Blitz JS ถัดไปก็เป็นเกียรติเช่นกัน มันมาพร้อมกับคุณสมบัติที่ JS ต่อไปไม่รองรับกลไกการรับรองความถูกต้องและอื่น ๆ เหมาะสำหรับโครงการขนาดกลางหรือขนาดใหญ่ และคุณสามารถใช้ความรู้ JS ต่อไปของคุณในขณะที่ใช้ Blitz JS