svelte vs next
1.0.0
مقارنة الميزات الرئيسية في sveltekit vs nextJs.
الأهداف: سريعة ، سهلة ، اتفاقية على التكوين ، والبطاريات المدرجة. الخيارات الساحقة هي سيئة مقابل توفير مسار واضح للأمام.
| Sveltekit | NextJS | الفائز | ملحوظات | |
|---|---|---|---|---|
| واجهة المستخدم | ممشوق | رد فعل (أو millionjs أو preact) | Sveltekit | يوفر Svelte تحديثات DOM أسرع ، وحجم عميل KB أصغر ، وإدارة الحالة عبر المكونات أسهل بكثير ، والقدرة على تجريد الحالة المستجيبة في ملفات خارجية ، وما إلى ذلك. |
| ديف: إعادة تحميل ساخنة | ؟ | ؟ | - | أي إعادة تحميل تلقائي في الملف حفظ. |
| Dev: O (1) إعادة التحميل الساخن | ؟ فيت | ؟ ؟ Turbopack (*لم يتم تمكينه افتراضيًا) | Sveltekit | IE يعالج فقط الملفات التي تم تغييرها. سريع حتى في المشاريع الكبيرة. *تحديث package.json لتمكين Turbopack: "dev": "next dev --turbo" . |
| ديف: "تحديث سريع" | ؟ ؟ (غير ممكّن افتراضيًا) | ؟ | NextJS | IE UI دولة المحفوظة عبر إعادة تحميل. |
| DEV: اكتب JS الحديثة | ؟ | ؟ | - | |
| DEV: تلميحات وحدة التحكم A11Y | ؟ | Sveltekit | ||
| ديف: أجمل | ؟ | ؟ | - | لملفات .svelte أو .jsx ، على التوالي. لـ Sveltekit ، قم بتثبيت Svelte for VSCode . |
| Prod: Bundler | ؟ | ؟ | - | على سبيل المثال الأصول Minify ، إلخ. يتم تمكين كلاهما افتراضيًا. عندما يكون Rolldown (Rust) جاهزًا في عام 2024 ، ستتمكن Svelte من التبديل من Rollup+Esbuild إلى التراجع حتى لبنيات الإنتاج الأسرع. |
| Prod: تقسيم رمز السيارات ، لكل مسار | ؟ | ؟ | - | أي رمز تلقائي تقسيم JS و CSS لكل مسار وحزمة بشكل مناسب. |
| Prod: بناء محولات للمضيفين المختلفين | ؟ | Sveltekit | يوفر Sveltekit قابلية نقل سهلة للعديد من المضيفين. NextJS يعمل بشكل أفضل مع Vercel. | |
| كيلو بايت الحجم: مرحبا العالم | ؟ 46.3 (25.6 GZIP) مع CSR* ؟ 2.9 (3.3 GZIP) بدون CSR (1.8 كيلو بايت من هذا هو المفضل ؛ يظهر أكبر مع GZIP في Chrome) | 336.3 (131.3 GZIP) (يتضمن Favicon 9.7 كيلو بايت؟)* | Sveltekit | - *CSR هو "جهاز التوجيه جانب العميل". - تم تحديث Sveltekit 25 أغسطس 2023 باستخدام Sveltekit 1.23 & Svelte 4. - تم تحديث NextJS 25 أغسطس ، 2023 باستخدام App Router ، NextJS 13.4.19 ، & React 18.2.0. - كلا الاختبارين يعودون html من <p>hello world</p> واستبعاد CSS. |
| كيلو بايت الحجم: تطبيق "العالم الحقيقي" | خارج التاريخ أيضًا | خارج التاريخ أيضًا | - | خارج التاريخ نرحب بالعلاقات العامة. *13 مارس ، 2021 https://realworld.svelte.dev/ ، https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework |
| التقديم: SSR ، لكل طريق | ؟ | ؟ | - | IE Server-Side المقدمة في وقت التشغيل. |
| التقديم: تدفق | ؟ | ؟ | - | يرسل IE Server دفق HTTP كما تم تقديمه على الخادم ، بدلاً من انتظار إكمال العرض الكامل قبل إرسال الاستجابة. |
| التقديم: ثابت ، لكل طريق | ؟ | ؟ | - | أي ثابت HTML الذي تم إنشاؤه في وقت البناء. |
| التقديم: تجديد ثابت ثابت ، لكل طريق | ؟ على vercel غير الحافة | ؟ على vercel غير الحافة | - | ثابت "على الطلب" في الإنتاج - يطلب أولاً ديناميكية ، ثم مؤقتًا. بالنسبة لأوقات التشغيل الأخرى (مثل Edge on Vercel & CloudFlare) ، فكر في تعيين رأس cache-control في مسارك لاستخدام stale-while-revalidate لبعض الفوائد المماثلة. |
| التقديم: "صقل جزئي" | ؟؟* | NextJS | *"تجريبي" ، في NextJS V14 أو الأحدث. يسمح بسباق ثابت للصفحة + المناطق الديناميكية ، مثل أزرار مصادقة المستخدم في رأس ، وحالة عربة التسوق ، إلخ. | |
| الرؤوس: S-Max-age & Max-age ، لكل مسار | ؟ | ؟ | - | |
| الطرق: التوجيه المستند إلى الملفات | ؟ | ؟ | - | للبساطة. يجب تضمين مرافق التوجيه الأخرى. |
| الطرق: "وضع السبا" | ؟ | ؟ | - | SSR لتحميل الصفحة الأولية ، ثم التوجيه من جانب العميل للصفحات اللاحقة. |
| الطرق: ما قبل الإخماد JS/CSS على رابط تحوم | ؟ | ؟ التالي/الرابط | Sveltekit | افتراضيًا في Sveltekit ، يمكن تجاوزه أو إزالته. يقدم Svelte أيضًا preloadCode() و prefetchData() لتحميل جميع الطرق أو بعض الطرق المحددة عبر Regex-القوة! يتطلب NextJS استخدام مكون الارتباط الخاص بهم ؛ انظر المستندات. |
| مدمج: البيانات الوصفية | ؟ | ؟ التالي/الرأس | - | ضع داخل <svelte:head>...</svelte:head> . |
| مدمج: إدارة الدولة | ؟ سفيلت/المتجر | ؟ Usestate | Sveltekit | المثالية هي طريقة سهلة ومدمجة. React لديه useState ، Zustand ، وغيرها.يستخدم Svelte4 vars والمتاجر التفاعلية. يجلب Svelte5 الرونية (الإشارات) لأداء DX أفضل ، وأداء تحديث الحالة بشكل أفضل من React (نظرًا لكونه على أساس الإشارة) ، والقدرة على استخدام التفاعل داخل ملفات القالب (على سبيل المثال .svelte ) والملفات الداعمة (على سبيل .svelte.ts يستمر سفيلت في الفوز في إدارة الدولة. |
| مدمج: الرسوم المتحركة | ؟ سفيلت/تحريك | Sveltekit | توجد خيارات الطرف الثالث للرد ، لكنها ليست سهلة الاستخدام. الإطارات شائعة للتفاعل. Motion One هي مكتبة رائعة أيضًا (صغيرة وسريعة) وتعمل مع أي إطار واجهة المستخدم. | |
| مدمج: تحسينات الصور | ؟ تعزيز: IMG (بيتا) | ؟ التالي/الصورة | - | تحسينات صور وقت البناء (التحويل إلى AVIF أو WebP) ، إنشاء عنصر الصورة مع FRAPPLACK إلى JPEG أو PNG ، تغيير حجمه ، إضافة العرض والارتفاع تلقائيًا ، أضف اسم الملف لتخزين التخزين المؤقت ، إلخ. |
| مدمج: النماذج | ؟ إجراءات النموذج والاستخدام use:enhance (يعمل مع أو بدون JS)أو Formsnap (مبني على الأداء الخارق) أو الأداء الخارق | ؟ NextJS 13 Form and Server Actions (يعمل مع أو بدون JS ، إذا تم تصميمه بشكل صحيح) | - | لدى Svelte دعمًا مدمجًا مع تعزيز تدريجي يعمل حتى بدون JS ؛ إنها نظيفة للغاية لأن قواعد التحقق من الصحة محددة مرة واحدة واستخدامها لكل من جانب العميل والخادم. Formik (للرد) نظيف ولكنه يتطلب JS وازدواج قواعد التحقق من الصحة على جانب الخادم ؛ على غرار Felte (لـ React ، Sveltekit ، & Vue). |
| مصادقة | ؟ Auth.js أو لوسيا | ؟ Auth.js أو لوسيا | - | Auth.js (بشكل صحيح nextauth.js) هو معيار defacto ل nextjs ؛ سهل الاستخدام البريد الإلكتروني ، والاجتماعية ، و/أو نقطة نقرة واحدة. وهو يدعم Sveltekit أيضا. الإعلان الأصلي. ومع ذلك ، فإن لوسيا تحظى بشعبية كبيرة في مجتمع Sveltekit. - قد يكون من المفيد لتعلم كيفية إعداد Auth ، من أجل مؤلف لوسيا) - قد يكون من المفيد معرفة كيفية إعداد Auth ، قد يكون من المفيد لتعيين ACOPERAY قد يكون من المؤكد أن الإختانات |
| توليد صورة OG | ؟ @ethercorps/sveltekit-og* | ؟ @vercel/og | NextJS | يعتمد @ethercorps/sveltekit-og على Satori ، والذي يعتمد أيضًا على @vercel/og .* على @ethercorps/sveltekit-og لأن عدم العمل على بعض المضيفين مثل صفحات CloudFlare. الائتمان ل vercel لإنشاء satori. كلاهما يشمل دعم tailwindcss. فرصة لشخص للمساهمة في OG LIB لـ Sveltekit! |
| خريطة sitemap | ؟ خريطة sitemap السوبر | ؟ SITEMAP التالي | - | يفوز Super Sitemap على سهولة الاستخدام والاتفاقيات المتوقعة المتوقعة لـ Sitemap ، ولكن كلاهما ينجز المهمة. الإفصاح: أنا مؤلف خريطة Super Sitemap. قضية github لدعم sitemap.xml الرسمي في sveltekit. |
| جلب البيانات | ؟ استعلام Tanstack ؟ SSWR ؟ TRPC | ؟ استعلام Tanstack ؟ SWR ؟ TRPC | - | سهلة الجلب/isloading/الأخطاء/التخزين المؤقت. يوفر Sveltekit أمان من النوع التلقائي (انظر الملاحظة أدناه عينة الكود) للبيانات التي يتم إرجاعها من وظائف التحميل بفضل وحدة $types المُنصَّمة التلقائية ، مع عدم وجود عمل على جزء DEV. |
| Tailwind CSS متوافق | ؟ (أو عن طريق سفيلتي) | ؟ | NextJS B/C مدمج في. كلاهما سهل. | بالنسبة لـ NextJS ، ما Yes سوى التحقق من خيار TailwindCSS عند إنشاء تطبيق NextJS الخاص بك باستخدام إنشاء-Next-App.Tailwind V4 سيجعل الإعداد أسهل. |
| LIBS مكون واجهة المستخدم - على غرار | -؟ Shadcn Svelte (غير رسمي)* -؟ FlowBite svelte -؟ الهيكل العظمي واجهة المستخدم -؟ مكونات الكربون svelte | -؟ Shadcn UI ** -؟ واجهة مستخدم Tailwind -؟ موي -؟ تصميم النمل -؟ مانتين واجهة المستخدم -؟ شقرا UI -؟ رد الفعل FlowBite | NextJS | - *مبني على bitsui (على غرار Radixui) ، والتي هي نفسها مبنية على Meltui - ** المبني على Radixui. |
| ui مكون libs - غير معبدة | -؟ بتات ui* -؟ تذوب واجهة المستخدم ** - ؟؟ Svelte-Headlessui (غير رسمي ؛ قضايا الدعم الرسمي: 1 ، 2) | -؟ Radix UI -؟ واجهة مستخدم مقطوعة الرأس -؟ رد فعل أريا | NextJS | مكونات واجهة المستخدم الأمم المتحدة للاتصالات (المنسدلة ، شريط التمرير ، تبديل ، إلخ). -*مبني على Meltui ، لتوفير واجهة مكون أكثر دراية. - ** MELT UI هو خليفة Radix-Svelte. |
| مستندات | 10/10 | 10/10 | - | |
| دليل المكون | sveltesociety.dev/components (أضف لك) | - | ||
| الاحتفاظ Dev (وكيل للاستمتاع ؛ Svelte vs React) | 90 ٪ | 83 ٪ | ممشوق | *المصدر: حالة JS 2022 أطر الأمامية "الاحتفاظ" |
| فلسفة | مبادئ | ؟ | ن/أ | "يستخدم الناس سفلت لأنهم يحبون سفيلتي. إنهم يحبون ذلك لأنها تتوافق مع حساسياتهم الجمالية. بدلاً من السعي إلى أن تكون الأسرع أو الأصغر أو أيا كان ، فإننا نهدف صراحة إلى أن نكون إطار عمل مع أفضل المشاعر ... ... نحن لا نحاول أن نكون أكثر إطارًا شعبية ، ونحن نحاول أن نكون أفضل إطار." ؟ |
فيما يلي ميزات الإطار ذات الأولوية ذات الأولوية المنخفضة لأنه يمكن تمكينها بسهولة من خلال مقدمي الاستضافة أو غيرها من الأدوات المشتركة (على سبيل المثال التحليلات) ، أو ظهرت أفضل الممارسات الأخرى مثل استخدام أطر نمط القائمة على الأداة المساعدة.
| مجموعة سفيلت | NextJS | الفائز | ملحوظات | |
|---|---|---|---|---|
| مدمج: CSS النطاق | ؟ | ؟ | Sveltekit | Svelte's تلقائي. NextJS 'هو عبر وحدات CSS أو CSS في JSX (ليست نظيفة). غير ذي صلة إذا كنت تستخدم tailwindcss. انتقل إلى "الأولوية المنخفضة" B/C ، إنه أمر قياسي الآن لاستخدام إطار نمط قائم على الأداة مثل TailwindCSS أو UNICSS للتكوين ومشاركة المكونات. |
| Prod: HTTP تلميحات مبكرة استجابة JS/CSS ** | لا | ** لم تعد ذات صلة بمثابة ميزة إطار عمل لأنها ممكّنة بسهولة من خلال بعض مزودي منصات الاستضافة. يحل محل خادم HTTP2. إرسال ردود: 1.) حالة استجابة 103 مع رؤوس قائمة الموارد إلى مسبق و preconnect ؛ 2.) حالة استجابة قياسية 200 أو ما شابه. (يمكن لـ CloudFlare القيام بذلك للمواقع تلقائيًا.) | ||
| الإبلاغ عن شبكة الإنترنت ** | ؟ | NextJS | ** لم تعد ذات صلة بسلطة إطار عملًا لأنها تمت إضافتها بسهولة عبر مقتطف التحليلات الآن أو عبر بعض مقدمي خدمات الاستضافة. يوفر CloudLfare Site Analytics تتبعًا أساسيًا على الويب مع تكوين صفر ؛ إنه جزء من مقتطف JS الخاص بهم. تقدم Vercel أيضًا إذا كنت تستخدم NextJS أو NUXTJS ولديها لوحة معلومات رائعة . | |
| LIBs مكون CSS فقط (أي لا JS) * غير موصى به بشكل قاطع * | -؟ ديزيوي -؟ UI بلا رأس* | ؟ ديزيوي | - | * غير موصى به بشكل قاطع b/c سوف تتطلب بعض المكونات javaScript وإضافة JS الخاصة بك وتحقيق إمكانية الوصول أمر صعب ؛ تتمثل النهج الأفضل في البدء بمكون واجهة المستخدم التي يمكن الوصول إليها والتي يمكن الوصول إليها والتي تدعم JS لإطارك الذي يأتي مع أنماط افتراضية لطيفة ويسمح بالتصميم لتفضيلاتك (على سبيل المثال Shadcn). - يقدم Daisyui موضوعات يمكن تخصيصها لمرة واحدة مع فصول Tailwindcss أو تغييرها باستخدام توجيه Tailwind's @apply . تتطلب مكونات CSS فقط dev لإضافة تفاعلات يمكن الوصول إليها مع JS-الكثير من العمل.- ** واجهة المستخدم غير المطلوبة هو منتج مدفوع مع رد الفعل الرسمي ودعم VUE ؛ يمكن استخدام HTML و CSS مع sveltekit ، ولكن لا يوجد JS. - تحديث: لن تحافظ على هذا الصف بعد الآن. |
نظرًا للنظام الإيكولوجي الواسع لـ JS Next ، فإن الإطار الذي تم بناؤه على رأس JS Blitz JS التالي هو أيضًا ذكر مشرف. إنه يأتي مع الميزات التي لا يدعمها JS التالي مثل آلية المصادقة والمزيد. مناسبة للمشاريع المتوسطة أو الكبيرة الحجم. وأيضًا ، يمكنك الاستفادة من معرفة JS التالية أثناء استخدام Blitz JS.
