React, Vue, Svelte, Astro ou Next.js, avec la même app
Comparatif des frameworks frontend
React, Vue, Svelte, Astro ou Next.js : la même app, mesurée | We.Inc
React, Vue, Svelte, Astro et Next.js comparés avec la même todo app dans chacun, des tailles de JavaScript mesurées, un tableau de choix par type de projet, des notes sur la courbe d'apprentissage et un encadré Vite vs webpack.
Choisissez selon le projet, pas selon la popularité. Astro convient aux sites de contenu, car les pages sont envoyées en HTML avec peu ou pas de JavaScript. Next.js, basé sur React, convient aux applications web complètes. Vue est le plus simple à apprendre, et Svelte envoie le moins de code. Nous avons construit la même todo app dans chacun : Svelte a envoyé 13.8 KB gzippés, Vue 25.8 KB et React 68 KB.
En une ligne chacun
Outil
Point fort
React
Les applications, avec le plus grand écosystème
Les applications React complètes avec rendu serveur
Vue
Des applications accessibles avec des templates
Svelte
Des bundles légers, peu de code répétitif
Astro
Les sites de contenu qui envoient peu de JavaScript
Les avis sont faciles à trouver ; les mesures d'une même application, beaucoup moins. Nous avons écrit une petite todo app en React, Vue, Svelte et JavaScript pur, construit chacune avec Vite, testé chacune en cliquant dans un navigateur et mesuré ce qu'elle envoie. Astro et Next.js sont présentés avec le même composant en place.
Trouvez votre type de projet dans le tableau de choix.
Consultez le tableau des tailles si le poids de la page compte, par exemple pour les visiteurs sur mobile.
Lisez la même application dans chaque syntaxe et voyez laquelle vous paraît naturelle.
Pensez à qui la maintiendra et aux bibliothèques dont vous avez besoin.
Pour un site marketing, le framework compte moins que les images, les polices et les scripts tiers.
Le coût du runtime de React se paie une seule fois ; dans une application plus grande, l'écart diminue à mesure que votre propre code grossit.
Préférez le méta-framework officiel (Next.js, Nuxt, SvelteKit) plutôt que de câbler vous-même le routage et le rendu serveur.
Choisissez ce que votre équipe connaît déjà, sauf raison claire de changer.
Questions fréquentes
Next.js, est-ce la même chose que React ?
Non. React est la bibliothèque d'interface ; Next.js est un framework basé sur React qui ajoute le routage, le rendu serveur, les Server Components, le chargement de données et une configuration de build. Vous écrivez des composants React dans Next.js.
Astro ou Next.js pour un site web ?
Pour les sites centrés sur le contenu comme les pages marketing, les blogs et la documentation, Astro envoie généralement moins de JavaScript et reste plus simple. Pour les sites proches d'une application, avec connexions, tableaux de bord et beaucoup d'interaction, Next.js convient mieux.
Vue est-il plus facile que React ?
Beaucoup trouvent qu'il est plus simple pour débuter, car les templates ressemblent à du HTML et la réactivité ne demande pas de mises à jour immuables. React demande d'abord d'apprendre JSX et les règles des hooks, mais offre plus de bibliothèques et d'offres d'emploi.
Pourquoi le bundle de Svelte est-il si petit ?
Svelte compile les composants en code de mise à jour du DOM au moment du build, il envoie donc un petit runtime au lieu d'un moteur de rendu générique.
Faut-il utiliser Vite ou webpack ?
Pour un nouveau projet, Vite : il démarre vite et demande peu de configuration. webpack reste pertinent dans les projets existants qui reposent sur ses plugins.
La courbe d'apprentissage, honnêtement
Vue et Svelte se lisent comme du HTML, du CSS et du JavaScript classiques, les débutants démarrent donc vite. React demande JSX, les hooks et l'habitude des mises à jour immuables. Astro est simple pour le contenu mais demande de comprendre les îles dès que vous ajoutez de l'interaction. Next.js ajoute les frontières serveur et client par-dessus React, c'est la marche la plus haute des cinq.
Hébergement
Le résultat statique d'Astro, des applications Vite ou de l'export statique de Next.js peut aller sur n'importe quel hébergeur statique ou CDN. Le rendu serveur demande un hébergeur compatible Node ou une plateforme avec des fonctions serverless ; vérifiez ce que votre hébergeur prend en charge avant de choisir des fonctionnalités serveur.
Ce que chacun envoie
Construit avec Vite en mode production ; chaque build a été testé dans un navigateur. Astro et Next.js ne faisaient pas partie de cette mesure.
Mesuré : la même todo app, total du JavaScript envoyé
Configuration
Minifié
Gzippé
JavaScript pur
1.4 KB
0.7 KB
Svelte 5
35.2 KB
13.8 KB
Vue 3
66.4 KB
25.8 KB
React 19 (avec react-dom)
220.1 KB
68.0 KB
Lequel choisir
Tableau de choix par type de projet
Projet
Bon choix
Pourquoi
Site marketing, blog, documentation
Astro
Les pages sont envoyées en HTML sans JavaScript, sauf si une partie en a besoin
Application web avec connexions et tableaux de bord
Next.js ou React Router (React)
Grand écosystème, rendu serveur et chargement de données intégrés
Quelques éléments interactifs sur un site existant
JavaScript pur ou une petite île
Aucun coût de framework
Recruter beaucoup de développeurs rapidement
React
Le plus grand vivier de personnes et de bibliothèques
Comment ils se comparent
En un coup d'œil
React
Vue
Svelte
Astro
Ce que c'est
Bibliothèque d'interface
Framework d'interface
Compilateur + framework
Framework pour sites de contenu
Framework React
Composants écrits en
Fonctions JSX
.vue monofichier
.svelte monofichier
.astro + n'importe quelle bibliothèque d'interface
React (JSX)
Réactivité
State + nouveau rendu
Proxies (ref, reactive)
Runes compilées ($state)
Par île
React
Rendu serveur
Via un framework
Via Nuxt
Via SvelteKit
Intégré (statique ou serveur)
Intégré
Licence
MIT
MIT
MIT
MIT
MIT
La même application, de cinq façons
React
Le state vit dans les hooks ; chaque changement relance le composant et React applique les différences au DOM. Les mises à jour doivent créer de nouveaux tableaux et objets.
Vue
Script, template et (en option) styles dans un seul fichier. v-model lie les champs dans les deux sens et les refs sont réactives, il suffit donc d'ajouter un élément au tableau.
Svelte 5
Les runes ($state, $derived) marquent les valeurs réactives, et le compilateur transforme le composant en mises à jour directes du DOM, d'où un runtime léger.
JavaScript pur
La référence. Convient pour un petit widget, mais vous écrivez vous-même les mises à jour du DOM et les gardez synchronisées avec les données à la main.
Astro : la même application en île
Astro rend la page en HTML et n'hydrate que les composants dotés d'une directive client. Ici, la todo app Svelte charge son JavaScript quand elle arrive à l'écran ; le reste de la page n'en envoie aucun.
Next.js : où va le même composant
Dans l'App Router, la page est un Server Component, la todo list interactive va donc dans son propre fichier marqué "use client". La page qui l'entoure n'envoie aucun JavaScript de composant.
Encadré : Vite vs webpack
Vite vs webpack
Vite
Serveur de développement
Sert le code source en modules ES natifs ; démarre vite quelle que soit la taille de l'application
Crée le bundle avant de servir ; le démarrage s'allonge avec l'application
Build de production
Bundle avec son propre bundler (Rolldown dans Vite 8)
Son propre bundler, très configurable
Configuration
Configuration courte, valeurs par défaut sensées
Puissant, plus de choses à écrire
Où vous le rencontrez
Vue, Svelte, Astro, React Router et beaucoup d'applications React
Applications React plus anciennes, Next.js (aux côtés de Turbopack)