svelte vs next
1.0.0
Vergleich der wichtigsten Merkmale in Seltekit vs NextJs.
Ziele: Schnell, einfach, Übereinkommen über Konfiguration und Batterien enthalten. Überwältigende Entscheidungen sind schlecht und bieten einen klaren Weg nach vorne.
| Sveltekit | NEXTJS | Gewinner | Notizen | |
|---|---|---|---|---|
| Ui lib | Sufle | Reagieren (oder millionenjs oder vorwirken) | Sveltekit | SVELTE bietet schnellere DOM-Updates, kleinere KB-Clientgröße, viel einfacheres Cross-Component-Zustandsmanagement, Fähigkeit, reaktionsschnell status in externe Dateien abstrahieren usw. |
| Dev: Heißes Reload | ? | ? | - | Dh automatisch neu laden im Datei Speichern. |
| Dev: O (1) heißes Reload | ? Vite | ? ? Turbopack (*standardmäßig nicht aktiviert) | Sveltekit | IE verarbeitet nur die geänderten Dateien. Schnell sogar in großen Projekten. *Update package.json , um Turbopack zu aktivieren: "dev": "next dev --turbo" . |
| Dev: "schnelle Aktualisierung" | ? ? (standardmäßig nicht aktiviert) | ? | NEXTJS | IE UI -Staat über Nachladen erhalten. |
| Dev: Schreiben Sie moderne JS | ? | ? | - | |
| Dev: A11Y -Konsole Hinweise | ? | Sveltekit | ||
| Dev: Schöner | ? | ? | - | Für .svelte oder .jsx -Dateien. Installieren Sie Svelte for VSCode -Erweiterung. |
| Prod: Bundler | ? | ? | - | ZB minify assets usw. beide sind standardmäßig aktiviert. Wenn Rolldown (Rust) im Jahr 2024 fertig ist, kann Svelte für eine noch schnellere Produktion von Rollup+Esbuild nach Rolldown wechseln. |
| Prod: Autocode -Spaltung pro Route | ? | ? | - | IE Auto Code Split JS & CSS pro Route und entsprechend. |
| Prod: Bauadapter für verschiedene Gastgeber erstellen | ? | Sveltekit | Sufeltkit bietet vielen Hosts eine einfache Portabilität. NextJs funktioniert am besten mit Vercel. | |
| KB -Größe: Hallo Welt | ? 46,3 (25,6 Gzip) mit CSR* ? 2,9 (3,3 GZIP) ohne CSR (1,8 KB davon ist das Favicon; zeigt so größer wie Gzip in Chrom). | 336.3 (131,3 Gzip) (enthält einen 9,7 KB Favicon?)* | Sveltekit | - *CSR ist "Client Side Router". . - NEXTJS Aktualisiert 25. August 2023 mit App Router, NextJS 13.4.19 & React 18.2.0. - Beide Tests geben HTML von <p>hello world</p> zurück und schließen CSS aus. |
| KB -Größe: "Real World" App | zu veraltet | zu veraltet | - | Veraltet; PR Willkommen. *13. März 2021 https://realworld.svelte.dev/, https://svelte.dev/blog/sapper-towards-the-ideal-web-app-appramework |
| Rendering: SSR pro Route | ? | ? | - | IE serverseitig zur Laufzeit gerendert. |
| Rendering: Streaming | ? | ? | - | Der IE -Server sendet den HTTP -Stream, der auf dem Server gerendert wird, anstatt auf das vollständige Rendering zu warten, bevor er die Antwort sendet. |
| Rendering: statisch pro Route | ? | ? | - | Dh statische HTML erzeugt zur Bauzeit. |
| Rendering: Inkrementelle statische Regeneration pro Route | ? auf nicht bevölkernem Vercel | ? auf nicht bevölkernem Vercel | - | Statisch "On Demand" in der Produktion - die erste Anfrage dynamisch, dann als statisch abgeschnitten. Für andere Laufzeiten (wie Edge auf Vercel & CloudFlare) sollten Sie cache-control Header Ihrer Route so einstellen, dass Sie stale-while-revalidate . |
| Rendering: "Partielle Vorranger" | ?** | NEXTJS | *"Experimental", in NextJS v14 oder neuer. Ermöglicht statische Prerendring einer Seite + dynamische Bereiche wie Benutzerauth -Schaltflächen in einem Header, Einkaufswagenstatus usw. | |
| Header: S-MAX-Alter & maximales Alter pro Route | ? | ? | - | |
| Routen: Dateibasierte Routing | ? | ? | - | Als Einfachheit. Andere Routing -Dienstprogramme sollten enthalten sein. |
| Routen: "Spa -Modus" | ? | ? | - | SSR für das Laden von Anfangsseiten, dann clientseitige Routing für nachfolgende Seiten. |
| Routen: JS/CSS auf Link-Hover voraberhalten | ? | ? Weiter/Link | Sveltekit | Standardmäßig kann in Seltekit überschrieben oder entfernt werden. Svelte bietet außerdem einen preloadCode() und prefetchData() an, um alle über Regex angegebenen Routen vorzuladen-mächtig! NextJS erfordert die Verwendung ihrer Linkkomponente. Siehe Dokumente. |
| Eingebaut: Metadaten | ? | ? Weiter/Kopf | - | Platz in <svelte:head>...</svelte:head> . |
| Eingebaut: Staatsmanagement | ? Sufle/Store | ? ussten | Sveltekit | Ideal ist ein einfacher, eingebauter Weg. React hat useState , zustand und andere.SELTE4 verwendet reaktive Vars und Geschäfte. SELTE5 bringt Runen (Signale) für einen noch besseren DX, eine bessere Statusaktualisierungsleistung als React (aufgrund von Signalbasis) und die Möglichkeit, Reaktivität in Vorlagendateien (z. B. .svelte ) zu verwenden und Dateien zu unterstützen (z. .svelte.ts ), wodurch neue Wege zur Wiederaufnahme und Abstrakten Ihres Codes ermöglicht werden kann. Sufelte gewinnt weiterhin für das staatliche Management. |
| Integriert: Animationen | ? Sufle/Animate | Sveltekit | Für React gibt es dritte Optionen, aber sie sind nicht so einfach zu bedienen. FrameMotion ist für React beliebt. Motion One ist auch eine großartige Bibliothek (klein und schnell) und arbeitet mit jedem UI -Framework. | |
| Integriert: Bildoptimierungen | ? Verbessert: IMG (Beta) | ? Weiter/Bild | - | Erstellungszeit-Bildoptimierungen (Konvertierung zu AVIF oder WebP), Erstellung des Bildelements mit Fallback an JPEG oder PNG, Größe, das Hinzufügen von Breite und Höhe automatisch, fügen Sie den Dateinamen Hash zum Zwischenspeichern usw. hinzu. |
| Eingebaut: Formen | ? Formationen und use:enhance (funktioniert mit oder ohne JS)oder Formsnap (basiert auf Superforms) oder Superformationen | ? NEXTJS 13 Form- und Serveraktionen (funktioniert mit oder ohne JS, falls sie ordnungsgemäß erstellt wurden) | - | Sveltle hat eine integrierte Form mit einer progressiven Verbesserung integriert, die auch ohne JS funktioniert. Sie sind sehr sauber, da die Validierungsregeln einmal definiert und sowohl für die Client- als auch für die Serverseite verwendet werden. Formik (für React) ist sauber, erfordert jedoch JS und die Duplizierung von Validierungsregeln auf der Serverseite. Ähnlich wie bei Felte (für React, Sveltekit & Vue). |
| Auth | ? Auth.js oder Lucia | ? Auth.js oder Lucia | - | Auth.js (formely NextAuth.js) ist defacto Standard für NextJs; einfach zu bedienen; E-Mail, soziale und/oder ein Klick-Link. Es unterstützt auch Seltekit. Ursprüngliche Ankündigung. Lucia ist jedoch in der Sveltkit -Community sehr beliebt. - TheCopenhagenbook.com (kostenlos vom Autor von Lucia) kann hilfreich sein, um zu erfahren, wie man Auth einrichtet, für beide Framework. |
| OG Bildgenerierung | ? @EtherCorps/Sufeltekit-og* | ? @Vercel/og | NEXTJS | @ethercorps/sveltekit-og basiert auf Satori, auf dem auch @vercel/og basiert.* Auf @ethercorps/sveltekit-og , weil nicht auf bestimmten Hosts wie Cloudflare-Seiten funktioniert. Gutschrift an Vercel zum Erstellen von Satori. Beide umfassen die Unterstützung von Tailwindcss. Gelegenheit für jemanden, einen OG Lib für Sveltekit beizutragen! |
| Sitemap | ? Super Sitemap | ? Nächstes-Sitemap | - | Super Sitemap gewinnt die Benutzerfreundlichkeit und die auf dem neuesten Stand zu stehenden erwarteten Konventionen für Sitemap, aber beide erledigen die Arbeit. Offenlegung: Ich bin der Autor von Super Sitemap. Github -Ausgabe für offizielle Unterstützung von Sitemap.xml in SufleKit. |
| Daten abrufen | ? Tanstack -Abfrage ? SSWR ? TRPC | ? Tanstack -Abfrage ? Swr ? TRPC | - | Einfaches Fetch/Isloading/Fehler/Caching. SVELTEKIT bietet automatische Sicherheitstypsicherheit (siehe Hinweis unten in der Code -Probe) für Daten, die dank des autogenerierten $types -Moduls aus Lastfunktionen zurückgegeben wurden und keine Arbeiten des Entwicklers haben. |
| Rückenwind CSS kompatibel | ? (oder über Sufle-Add) | ? | NEXTJS B/C IN. Beide sind einfach. | Bei NextJS Yes Sie einfach die Option TailwindCSS beim Erstellen Ihrer NextJS-App mithilfe von Create-Next-App.Rückenwind V4 wird noch einfacher sein. |
| UI -Komponente libs - gestaltet | -? Shadcn Svelte (inoffiziell)* -? Flowbite Sufle -? Skelett UI -? Kohlenstoffkomponenten Sufle | -? Shadcn Ui ** -? Rückenwind UI -? Mui -? Ameisendesign -? Mantinen UI -? Chakra ui -? Flowbite React | NEXTJS | - *Auf Bitsui (ähnlich wie Radixui) gebaut, das selbst auf Meltui gebaut ist - ** auf Radixui gebaut. |
| UI -Komponente libs - nicht styled | -? Bit ui* -? Ui ** schmelzen - ?? Sufle-Headlessui (inoffiziell; Ausgaben zur offiziellen Unterstützung: 1, 2) | -? Radix UI -? Kopfloses UI -? Reagieren Arie | NEXTJS | UI-Komponenten nicht gestylt (Dropdown, Slider, Toggle usw.). -*Aufbauend auf Meltui, um eine vertrautere Komponentenschnittstelle bereitzustellen. - ** Melt UI ist der Nachfolger von Radix-Sufle. |
| Dokumente | 10/10 | 10/10 | - | |
| Komponentenverzeichnis | sveltesociety.dev/components (fügen Sie Ihre hinzu) | - | ||
| Dev -Retention (Stellvertreter zum Vergnügen; Svelte gegen React) | 90% | 83% | Sufle | *Quelle: Bundesstaat JS 2022 Front-End-Frameworks 'Retention' |
| Philosophie | Grundsätze | ? | n / A | "Die Leute benutzen Sufle, weil sie Svelte mögen. Sie mögen es, weil es sich mit ihren ästhetischen Empfindlichkeiten übereinstimmt. Anstatt sich zu bemühen, der schnellste oder kleinste oder was auch immer zu sein, streben wir ausdrücklich darauf ab, mit den besten Schwingungen der Rahmen zu sein. ? |
Die folgenden Funktionen mit niedriger Prioritätsrahmen, da sie durch Hosting-Anbieter oder andere gemeinsame Tools (z. B. Analytics) einfach aktiviert werden können oder andere Best Practices wie die Verwendung von stilebasierten Stilrahmen für Dienstprogramme hervorgebracht wurden.
| Sufle Kit | NEXTJS | Gewinner | Notizen | |
|---|---|---|---|---|
| Eingebaut: CSS Scoping | ? | ? | Sveltekit | Svelte ist automatisch. NextJS 'ist über CSS -Module oder CSS in JSX (nicht so sauber). Irrelevant, wenn Sie Rückenwinds verwenden. Wechseln Sie zu "niedriger Priorität". |
| Prod: http frühe Hinweise Antwort von JS/CSS ** | Weder | ** Nicht super relevant als Framework -Funktion, da sie leicht über einige Hosting -Plattformanbieter aktiviert werden können. Ersetzt HTTP2 Server Push. Senden Sie zwei Antworten: 1.) Ein 103 Antwortstatus mit Header, die Ressourcen auflisten, um vorzuladen und zu preconnect; 2.) Ein Standard -200 -Antwortstatus oder ähnliches. (CloudFlare kann dies automatisch für Websites tun.) | ||
| Web -Vitals berichten ** | ? | NEXTJS | ** Nicht super relevant als Framework -Funktion, da sie jetzt oder über einige Hosting -Plattformanbieter einfach über Analyse -Snippet hinzugefügt werden. CloudLfare Site Analytics bietet eine Kern -Web -Vitals mit Nullkonfiguration. Es ist Teil ihres JS -Snippets. Vercel bietet es auch an, wenn Sie NextJs oder NuxtJs verwenden und ein hervorragendes Dashboard haben. | |
| CSS-Nur-Komponenten LIBS (dh kein JS) * kategorisch nicht empfohlen * | -? Daisyui -? Kopfloser UI* | ? Daisyui | - | *Kategorisch nicht empfohlen, b/c Einige Komponenten erfordern JavaScript, und das Hinzufügen Ihrer eigenen JS und das Erreichen der Zugänglichkeit ist schwierig. Der bessere Ansatz ist es, mit einer zugänglichen, JS-fähigen UI-Komponente LIB für Ihr Framework zu beginnen, die mit schönen Standardstilen ausgestattet ist und Ihre Präferenz zum Styling ermöglicht (z. B. Shadcn). - Daisyui bietet Themen an, die mit Tailwindcss-Klassen einmal angepasst werden oder mit @apply Richtlinie von Tailwind geändert werden können. CSS-Nur-Komponenten erfordern, dass der Entwickler zugängliche Interaktionen mit JS hinzufügt-eine Menge Arbeit.- ** Headless UI ist ein kostenpflichtiges Produkt mit offizieller Reaktions- und Vue -Unterstützung; kann als HTML & CSS mit SVELTEKIT verwenden, aber keine JS. - Update: Verwalten Sie diese Zeile nicht mehr. |
Aufgrund des breiten Ökosystems von Next JS ist auch ein Rahmen, das auf dem nächsten JS Blitz JS aufgebaut ist, eine lobende Erwähnung. Es wird mit Funktionen geliefert, die das nächste JS nicht wie der Auth -Mechanismus und mehr unterstützt. Geeignet für mittelgroße oder große Projekte. Außerdem können Sie Ihr nächstes JS -Wissen nutzen, während Sie Blitz JS verwenden.
