svelte vs next
1.0.0
Comparaison des principales fonctionnalités de Sveltekit vs NextJS.
Objectifs: Fast, Facile, Convention sur la configuration et les batteries incluses. Les choix accablants sont mauvais par rapport à la fourniture d'un chemin clair.
| Sveltekit | NextJS | Gagnant | Notes | |
|---|---|---|---|---|
| Ui lib | Svelte | Réagir (ou MillionJS ou Preact) | Sveltekit | Svelte propose des mises à jour DOM plus rapides, une taille de client KB plus petite, une gestion de l'état inter-composantes beaucoup plus facile, la capacité de résumer l'état réactif dans des fichiers externes, etc. Svelte5 a des runes (signaux)?, React n'a pas encore d'équivalent. |
| Dev: Rechargement chaud | ? | ? | - | IE Rechargement automatique sur le fichier Enregistrer. |
| Dev: O (1) Rechargement chaud | ? Vite | ? ? Turbopack (* non activé par défaut) | Sveltekit | IE ne traite que les fichiers modifiés. Rapide même dans les grands projets. * Mettre à jour package.json pour activer Turbopack: "dev": "next dev --turbo" . |
| DEV: "Rafraîchissement rapide" | ? ? (non activé par défaut) | ? | NextJS | C'est-à-dire l'état d'interface utilisateur conservé à travers les recharges. |
| Dev: Écrivez JS moderne | ? | ? | - | |
| Dev: A11y Console Insignes | ? | Sveltekit | ||
| Dev: plus joli | ? | ? | - | Pour les fichiers .svelte ou .jsx , respectivement. Pour Sveltekit, installez Svelte for VSCode . |
| Prod: Bundler | ? | ? | - | Par exemple, les actifs minifés, etc. Les deux sont activés par défaut. Lorsque la roulement (Rust) est prêt en 2024, Svelte pourra passer de Rollup + Esbuild à la roulement pour des constructions de production encore plus rapides. |
| Prod: division du code automatique, par itinéraire | ? | ? | - | IE Code Auto Split JS & CSS par route et bundle de manière appropriée. |
| Prod: construire des adaptateurs pour différents hôtes | ? | Sveltekit | Sveltekit offre une portabilité facile à de nombreux hôtes. NextJS fonctionne mieux avec Vercel. | |
| KB Taille: Hello World | ? 46.3 (25,6 gzip) avec CSR * ? 2.9 (3,3 gzip) sans CSR (1,8 Ko de ceci est le favicon; montre comme plus grand avec gzip en chrome) | 336.3 (131,3 GZIP) (comprend un favicon de 9,7KB?) * | Sveltekit | - * CSR est "Routeur côté client". - Sveltekit mis à jour le 25 août 2023 à l'aide de Sveltekit 1.23 & Svelte 4. - NextJS mis à jour le 25 août 2023 à l'aide du routeur d'application, NextJS 13.4.19, et réagit 18.2.0. - Les deux tests renvoient HTML de <p>hello world</p> et excluent CSS. |
| KB Taille: application "Real World" | Trop obsolète | Trop obsolète | - | Obsolète; PR bienvenue. * 13 mars 2021 https://realworld.svelte.dev/, https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework |
| Rendu: SSR, par route | ? | ? | - | IE côté serveur rendu au moment de l'exécution. |
| Rendu: streaming | ? | ? | - | IE Server envoie un flux HTTP au fur et à mesure qu'il est rendu sur le serveur, plutôt que d'attendre que le rendu complet se termine avant d'envoyer la réponse. |
| Rendu: statique, par route | ? | ? | - | C'est-à-dire HTML statique généré au moment de la construction. |
| Rendu: régénération statique incrémentale, par route | ? sur Vercel non bord | ? sur Vercel non bord | - | «À la demande» statique dans la production - IE de la dynamique de la demande, puis mise en cache comme statique. Pour d'autres temps d'exécution (comme Edge sur Vercel & CloudFlare), pensez à définir l'en-tête cache-control de votre itinéraire pour utiliser stale-while-revalidate pour certains avantages similaires. |
| Rendu: "Prérenfication partielle" | ?? * | NextJS | * "Experimental", dans NextJS v14 ou plus récent. Permet la prétention statique d'une page + des zones dynamiques de streaming, comme les boutons d'authentification utilisateur dans un en-tête, le statut de panier, etc. | |
| En-têtes: S-Max-Age et max-âge, par itinéraire | ? | ? | - | |
| Routes: routage basé sur les fichiers | ? | ? | - | Pour simplicité. D'autres services publics de routage doivent être inclus. |
| Routes: "mode spa" | ? | ? | - | SSR pour le chargement de la page initial, puis le routage côté client pour les pages suivantes. |
| Routes: pré-fouetter JS / CSS sur le lien de volant | ? | ? suivant / lien | Sveltekit | Par défaut dans Sveltekit, peut être remplacé ou supprimé. Svelte propose également un preloadCode() et prefetchData() pour précharger tous ou certains itinéraires spécifiés via Regex - Perserful! NextJS nécessite l'utilisation de leur composant de liaison; Voir les documents. |
| Intégré: métadonnées | ? | ? Suivant / tête | - | Placer dans <svelte:head>...</svelte:head> . |
| Intégré: gestion de l'État | ? svelte / magasin | ? usestate | Sveltekit | L'idéal est une manière facile et intégrée. React a useState , Zustand et d'autres.Svelte4 utilise des Vars et des magasins réactifs. Svelte5 apporte des runes (signaux) pour un DX encore meilleur, une meilleure mise à jour des performances de mise à jour que React (en raison de la base du signal), et la possibilité d'utiliser la réactivité dans les fichiers de modèle (par .svelte.ts .svelte ) et de supporter les fichiers (par exemple. Svelte continue de gagner sur la direction de l'État. |
| Intégré: animations | ? svelte / animate | Sveltekit | Des options tierces existent pour React, mais elles ne sont pas aussi faciles à utiliser. Le Framerotion est populaire pour React. Motion One est également une grande bibliothèque (petite et rapide) et fonctionne avec n'importe quel cadre d'interface utilisateur. | |
| Intégré: optimisations d'image | ? Enhanced: IMG (Beta) | ? Suivant / Image | - | Optimisations d'images de build-time (conversion en avif ou webp), création d'élément d'image avec une secours en jpeg ou png, redimensionner, ajoutant automatiquement la largeur et la hauteur, ajoutez le hachage du nom de fichier pour la mise en cache, etc. Les services hébergés existent également si vous préférez le faire à l'exécution (CloudFlare Images, Gumlet, etc.) |
| Intégré: formulaires | ? Formulaire actions et use:enhance (fonctionne avec ou sans js)ou FormSnap (construit sur des superforms) ou Superformations | ? NextJS 13 Formulaire et actions du serveur (fonctionne avec ou sans js, si elles sont construites correctement) | - | Svelte a un support de forme intégré avec une amélioration progressive qui fonctionne même sans JS; Ils sont très propres car les règles de validation sont définies une fois et utilisées à la fois pour le client et le côté serveur. FormIK (pour React) est propre mais nécessite JS et la duplication des règles de validation du côté du serveur; Similaire à Felte (pour React, Sveltekit et Vue). |
| Authentification | ? Auth.js ou lucia | ? Auth.js ou lucia | - | Auth.js (Formly NextAuth.js) est la norme DeFacto pour NextJS; facile à utiliser; Email, Social et / ou un lien en un clic. Il prend également en charge Sveltekit. Annonce originale. Cependant, Lucia est très populaire dans la communauté de Sveltekit. - thecopenhagenbook.com (gratuit par l'auteur de Lucia) peut être utile pour apprendre à configurer l'auth, pour l'un ou l'autre framework. |
| Génération d'images OG | ? @ EtherCorps / sveltekit-og * | ? @ vercel / og | NextJS | @ethercorps/sveltekit-og est basé sur Satori, sur lequel @vercel/og est également basé.* Sur @ethercorps/sveltekit-og parce que ne fonctionne pas sur certains hôtes comme les pages CloudFlare. Crédit à Vercel pour la création de Satori. Les deux incluent le support TailwindCSS. Opportunité pour quelqu'un de contribuer une lib OG pour Sveltekit! |
| Sitemap | ? Super Sitemap | ? sitemap suivant | - | Super Sitemap gagne sur la facilité d'utilisation et le fait d'être à jour les conventions attendues pour le site, mais les deux font le travail. Divulgation: Je suis l'auteur de Super Sitemap. Problème de GitHub pour le support officiel du site de site.xml dans Sveltekit. |
| Données récupérant | ? Requête en tan ? SSWR ? trpc | ? Requête en tan ? SWR ? trpc | - | Facile / Isloading / Erreurs / Cache. Sveltekit fournit une sécurité de type automatique (voir la note ci-dessous l'échantillon de code) pour les données renvoyées des fonctions de chargement grâce à son module $types automatique, sans travail sur la partie du développement. |
| CSS à vent arrière compatible | ? (ou via Svelte-ADD) | ? | NextJS b / c intégré. Les deux sont faciles. | Pour NextJS, vérifiez simplement Yes pour l'option TailwindCSS lors de la création de votre application NextJS à l'aide de Create-Next-App.Tailwind V4 facilitera la configuration. |
| LIBS COMPOSANT UI - Styled | -? Shadcn svelte (non officiel) * -? FlowBite Svelte -? Ui squelette -? Composants en carbone svelte | -? Shadcn ui ** -? Ui de vent arrière -? Musi -? Conception de fourmi -? Ui mante -? Chakra ui -? Réagir | NextJS | - * Construit sur Bitsui (similaire à Radixui), qui est lui-même construit sur Meltui - ** Construit sur Radixui. |
| LIBS COMPOSANT UI - NON STYLED | -? Bits ui * -? Faire fondre l'interface utilisateur ** - ?? svelte-headlessui (non officiel; problèmes de soutien officiel: 1, 2) | -? Radix UI -? Ui sans tête -? Réagir aria | NextJS | Composants d'interface utilisateur de style non de style (liste déroulante, curseur, bascule, etc.). - * Construit sur Meltui, pour fournir une interface de composants plus familière. - ** L'interface utilisateur de fonte est le successeur de Radix-Svelte. |
| Docs | 10/10 | 10/10 | - | |
| Répertoire des composants | svelsociety.dev/components (ajouter le vôtre) | - | ||
| Dev Retention (proxy pour le plaisir; svelte vs react) | 90% | 83% | Svelte | * Source: État de la «rétention» des cadres frontaux JS 2022 |
| Philosophie | Principes | ? | n / A | "Les gens utilisent Svelte parce qu'ils aiment Svelte. Ils l'aiment parce qu'il s'aligne avec leurs sensibilités esthétiques. Au lieu de nous efforcer d'être les plus rapides ou les plus petits ou les plus, nous visons explicitement à être le cadre avec les meilleures vibrations. ... Nous n'essayons pas d'être le cadre le plus populaire, nous essayons d'être le meilleur cadre." ? |
Voici les fonctionnalités de framework à faible priorité car ils peuvent être facilement activés via des fournisseurs d'hébergement ou d'autres outils courants (par exemple analytique), ou d'autres meilleures pratiques ont émergé comme l'utilisation de frameworks de style basés sur l'utilité.
| Kit svelte | NextJS | Gagnant | Notes | |
|---|---|---|---|---|
| Intégré: CSS SCOPING | ? | ? | Sveltekit | Svelte est automatique. NextJS est via des modules CSS ou CSS dans JSX (pas aussi propre). Non pertinent si vous utilisez TailwindCSS. Passez à la "faible priorité" b / c Il est désormais standard d'utiliser un cadre de style basé sur l'utilité comme TailWindCSS ou UNOCSS pour la composabilité et le partage des composants. |
| Prod: HTTP Astuce précoce Réponse de JS / CSS ** | Ni l'un ni l'autre | ** Pas super pertinent en tant que fonctionnalité Framework car il est facilement activé via certains fournisseurs de plate-forme d'hébergement. Remplace le serveur http2 push. Envoyez deux réponses: 1.) Un statut de réponse 103 avec des en-têtes répertoriant les ressources pour précharger et préconnecter; 2.) Un statut de réponse standard 200 ou similaire. (CloudFlare peut le faire automatiquement pour les sites.) | ||
| Web Vitals Reporting ** | ? | NextJS | ** Pas super pertinent en tant que fonctionnalité Framework car il est facilement ajouté via un extrait d'analyse maintenant ou via certains fournisseurs de plate-forme d'hébergement. CloudLfare Site Analytics offre un suivi des vitaux Web de base avec une configuration nulle; Cela fait partie de leur extrait JS. Vercel l'offre également si vous utilisez NextJS ou NuxtJS et dispose d'un superbe tableau de bord. | |
| LIBS CSS uniquement CSS (c'est-à-dire no js) * catégoriquement pas recommandé * | -? Marguerite -? Ui sans tête * | ? Marguerite | - | * Catégoriquement non recommandé b / c Certains composants nécessiteront JavaScript et l'ajout de votre propre JS et la réalisation de l'accessibilité est difficile; La meilleure approche consiste à commencer par une lib de composant d'interface utilisateur accessible et compatible JS pour votre framework qui est livré avec de beaux styles par défaut et permet au style de votre préférence (par exemple Shadcn). - Daisyui propose des thèmes qui peuvent être uniquement personnalisés avec les classes TailwindCSS ou modifiés à l'aide de la directive @apply de Tailwind. Les composants CSS uniquement nécessitent que le développement ajoute des interactions accessibles avec JS - beaucoup de travail.- ** UI sans tête est un produit payant avec le soutien officiel React et Vue; Peut utiliser comme HTML & CSS avec Sveltekit, mais pas JS. - Mise à jour: ne maintiendra plus cette ligne. |
En raison du large écosystème de JS suivant, un cadre construit au-dessus du prochain JS Blitz JS est également une mention honorable. Il est livré avec des fonctionnalités que le prochain JS ne prend pas en charge nativement comme le mécanisme d'authentification et plus encore. Convient aux projets de taille moyenne ou de grande taille. Et aussi, vous pouvez utiliser vos prochaines connaissances JS tout en utilisant Blitz JS.
