React vs Vue vs Svelte vs Astro vs Next.js, mit derselben App
Frontend-Frameworks im Vergleich
React vs Vue vs Svelte vs Astro vs Next.js: dieselbe App, gemessen | We.Inc
React, Vue, Svelte, Astro und Next.js im Vergleich, mit derselben Todo-App in jedem, gemessenen JavaScript-Größen, einer Entscheidungstabelle nach Projekttyp, Hinweisen zur Lernkurve und einem Exkurs zu Vite vs webpack.
Wähle nach Projekt, nicht nach Beliebtheit. Astro passt zu Content-Websites, weil Seiten als HTML mit wenig oder gar keinem JavaScript ausgeliefert werden. Next.js, das auf React aufbaut, passt zu vollwertigen Web-Apps. Vue ist am leichtesten zu lernen, und Svelte liefert am wenigsten Code aus. Wir haben in jedem dieselbe Todo-App gebaut: Svelte lieferte 13.8 KB gzipped, Vue 25.8 KB und React 68 KB.
In je einer Zeile
Tool
Am stärksten bei
React
Apps, mit dem größten Ökosystem
Vollständige React-Apps mit Server-Rendering
Vue
Zugängliche Apps mit Templates
Svelte
Kleine Bundles, wenig Boilerplate
Astro
Content-Websites, die wenig JavaScript ausliefern
Meinungen findet man leicht, Messungen derselben App nicht. Wir haben eine kleine Todo-App in React, Vue, Svelte und reinem JavaScript geschrieben, jede mit Vite gebaut, im Browser durchgeklickt und gemessen, was sie ausliefert. Astro und Next.js zeigen wir mit derselben Komponente an ihrem Platz.
Finde deinen Projekttyp in der Entscheidungstabelle.
Sieh dir die Größentabelle an, wenn das Seitengewicht wichtig ist, etwa für mobile Besucher.
Lies dieselbe App in jeder Syntax und schau, welche sich für dich natürlich anfühlt.
Überlege, wer sie pflegen wird und welche Bibliotheken du brauchst.
Bei einer Marketing-Website zählt das Framework weniger als Bilder, Schriften und Skripte von Drittanbietern.
Die Laufzeitkosten von React zahlst du einmal; in einer größeren App schrumpft der Unterschied, je mehr eigener Code hinzukommt.
Nutze lieber das offizielle Meta-Framework (Next.js, Nuxt, SvelteKit), statt Routing und Server-Rendering selbst zu verdrahten.
Nimm, was dein Team schon kennt, es sei denn, es gibt einen klaren Grund für einen Wechsel.
Häufige Fragen
Ist Next.js dasselbe wie React?
Nein. React ist die UI-Bibliothek; Next.js ist ein auf React aufbauendes Framework, das Routing, Server-Rendering, Server Components, Datenladen und ein Build-Setup ergänzt. Innerhalb von Next.js schreibst du React-Komponenten.
Astro oder Next.js für eine Website?
Für inhaltsgetriebene Websites wie Marketingseiten, Blogs und Dokumentation liefert Astro meist weniger JavaScript aus und ist einfacher. Für app-artige Websites mit Logins, Dashboards und viel Interaktion passt Next.js besser.
Ist Vue einfacher als React?
Vielen fällt der Einstieg leichter, weil Templates wie HTML aussehen und die Reaktivität keine unveränderlichen Updates braucht. React verlangt, dass du zuerst JSX und die Regeln für Hooks lernst, bietet aber mehr Bibliotheken und Jobs.
Warum ist das Bundle von Svelte so klein?
Svelte kompiliert Komponenten beim Build in einfachen Code für DOM-Updates und liefert daher eine kleine Laufzeit statt einer allgemeinen Rendering-Engine aus.
Sollte ich Vite oder webpack verwenden?
Für ein neues Projekt Vite: Es startet schnell und braucht wenig Konfiguration. webpack ist in bestehenden Projekten weiterhin sinnvoll, die auf seine Plugins angewiesen sind.
Die Lernkurve, ehrlich betrachtet
Vue und Svelte lesen sich am ehesten wie reines HTML, CSS und JavaScript, daher kommen Einsteiger schnell voran. React braucht JSX, Hooks und die Gewohnheit unveränderlicher Updates. Astro ist für Inhalte einfach, verlangt aber, dass du Islands verstehst, sobald du Interaktion hinzufügst. Next.js setzt auf React noch Grenzen zwischen Server und Client obendrauf, das ist der steilste Schritt der fünf.
Hosting
Statische Ausgabe von Astro, Vite-Apps oder dem statischen Export von Next.js kann auf jedem statischen Host oder CDN liegen. Server-Rendering braucht einen Host mit Node-Unterstützung oder eine Plattform mit Serverless Functions; prüfe, was dein Host unterstützt, bevor du dich für Serverfunktionen entscheidest.
Was jedes davon ausliefert
Mit Vite im Produktionsmodus gebaut; jeder Build wurde im Browser getestet. Astro und Next.js waren nicht Teil dieser Messung.
Gemessen: dieselbe Todo-App, insgesamt ausgeliefertes JavaScript
Setup
Minifiziert
Gzipped
Reines JavaScript
1.4 KB
0.7 KB
Svelte 5
35.2 KB
13.8 KB
Vue 3
66.4 KB
25.8 KB
React 19 (mit react-dom)
220.1 KB
68.0 KB
Welches du wählen solltest
Entscheidungstabelle nach Projekttyp
Projekt
Gute Wahl
Warum
Marketing-Website, Blog, Doku
Astro
Seiten werden als HTML ohne JavaScript ausgeliefert, außer ein Teil braucht es
Web-App mit Logins und Dashboards
Next.js oder React Router (React)
Großes Ökosystem, Server-Rendering und Datenladen eingebaut
App, bei der das Team Templates bevorzugt
Vue mit Nuxt
Sanfte Lernkurve, Single-File-Komponenten
Kleine, schnelle Widgets oder eine schlanke App
Svelte mit SvelteKit
Die Compiler-Ausgabe ist klein; wenig Boilerplate
Ein paar interaktive Elemente auf einer bestehenden Website
Reines JavaScript oder eine kleine Island
Überhaupt keine Framework-Kosten
Schnell viele Entwickler einstellen
React
Der größte Pool an Leuten und Bibliotheken
Wie sie sich unterscheiden
Auf einen Blick
React
Vue
Svelte
Astro
Was es ist
UI-Bibliothek
UI-Framework
Compiler + Framework
Framework für Content-Websites
React-Framework
Komponenten geschrieben als
JSX-Funktionen
Single-File .vue
Single-File .svelte
.astro + beliebige UI-Bibliothek
React (JSX)
Reaktivität
State + Re-Render
Proxies (ref, reactive)
Kompilierte Runes ($state)
Pro Island
React
Server-Rendering
Über ein Framework
Über Nuxt
Über SvelteKit
Eingebaut (statisch oder Server)
Eingebaut
Lizenz
MIT
MIT
MIT
MIT
MIT
Dieselbe App, fünf Wege
React
Der State liegt in Hooks; jede Änderung führt die Komponente erneut aus, und React aktualisiert die Unterschiede im DOM. Updates müssen neue Arrays und Objekte erzeugen.
Vue
Script, Template und (optional) Styles in einer Datei. v-model bindet Eingaben in beide Richtungen, und refs sind reaktiv, daher genügt ein Push in das Array.
Svelte 5
Runes ($state, $derived) markieren reaktive Werte, und der Compiler macht aus der Komponente direkte DOM-Updates, deshalb ist die Laufzeit so klein.
Reines JavaScript
Die Basislinie. Gut für ein kleines Widget, aber du schreibst die DOM-Updates selbst und hältst sie von Hand mit den Daten synchron.
Astro: dieselbe App als Island
Astro rendert die Seite zu HTML und hydriert nur Komponenten mit einer client-Direktive. Hier lädt die Svelte-Todo-App ihr JavaScript, sobald sie in den sichtbaren Bereich scrollt; der Rest der Seite liefert keins aus.
Next.js: wohin dieselbe Komponente kommt
Im App Router ist die Seite eine Server Component, daher kommt die interaktive Todo-Liste in eine eigene Datei mit "use client". Die umgebende Seite sendet selbst kein Komponenten-JavaScript.
Exkurs: Vite vs webpack
Vite vs webpack
Vite
Dev-Server
Liefert den Quellcode als native ES-Module aus; startet unabhängig von der App-Größe schnell
Bündelt vor dem Ausliefern; die Startzeit wächst mit der App
Produktions-Build
Bündelt mit einem eigenen Bundler (Rolldown in Vite 8)
Eigener Bundler, sehr flexibel konfigurierbar
Konfiguration
Kleine Konfiguration, sinnvolle Standardwerte
Mächtig, mehr zu schreiben
Wo du ihm begegnest
Vue, Svelte, Astro, React Router und viele React-Apps