Ein frisches create-next-app installiert 311 npm-Pakete und erzeugt einen node_modules-Ordner von 187 MB. Verifiziert im Februar 2026. In der Realität liegt der Median-Bundle bei Next.js-Sites bei über 1 MB ab der fünften Dezile. Extreme von 56 MB JavaScript in einer einzigen SPA wurden dokumentiert.
Vanilla HTML/CSS/JS hat null externe Abhängigkeiten. Was du schreibst ist was der Browser lädt. Kein Hydration-Overhead, kein Webpack-Long-Task, kein Dev-Server der 1.247 MB RAM frisst. Das Vanilla JS Briefing erklärt was der Browser 2026 kostenlos mitbringt.
Die Zahlen im Vergleich
| Metrik | Vanilla HTML/CSS/JS | Next.js (Standard) |
|---|---|---|
| Installierte Pakete | 0 | 311 npm-Pakete |
| node_modules-Grösse | existiert nicht | ~187 MB Baseline |
| Dev-Server RAM | keiner | 1.247 MB |
| Build-Config-Dateien | 0 | 5-8 (next.config, tsconfig, postcss...) |
| Client JS bei Auslieferung | 18 KB (E-Commerce-Test) | 421-497 kB raw |
| First Contentful Paint | 0,6-0,9s | 0,8-1,2s |
| Time to Interactive | 1,0-1,5s | 1,5-2,5s |
| Lighthouse Performance | 95-100 erreichbar | 70-90 ohne Optimierung |
| Deploy auf Vercel | git push → live | Build-Step: First 67s, Prod 5m12s |
| Hydration-Overhead | keiner | React-Hydration auf Client |
| Vibe-Coding-Iteration | Browser Reload (sofort) | Hot Reload (2-5s) |
Die Quellen: catchmetrics.io analysierte 300.000 Next.js-Domains. Ein Hacker-News-Benchmark verglich 10 Frameworks — Next.js lieferte 497,8 kB raw gegenüber Marko mit 12,6 kB: ein 39-facher Unterschied in Rohgrösse, spürbar auf jedem Mobilfunknetz. Blake Crosley dokumentierte den No-Build-Stack mit perfektem Lighthouse-Score. Ein Hacker-News-Benchmark verglich 10 Frameworks — Next.js lieferte 497,8 kB raw gegenüber 12,6 kB bei Marko.
Wann Vanilla gewinnt
Landingpages. Portfolios. MVP-Showcases. Content-Sites. Blogs. Widgets. Alles wo der Content beim Laden komplett steht und sich nicht dynamisch verändert.
Ein konkretes Praxisbeispiel: Eine Website mit 37 Blog-Posts, 20 interaktiven JS-Komponenten und 10 Sprachübersetzungen erzielt 100/100/100/100 auf Lighthouse — ohne einen einzigen Build-Step. Kein Tailwind, kein Bootstrap, nur semantisches HTML und CSS Custom Properties.
Kernerkenntnis
Für Vibe Coders ist Vanilla JS die natürliche Wahl: KI generiert eine HTML-Datei, du öffnest sie im Browser, fertig. Bei React generiert die KI ein Projekt-Scaffold das du erst installieren, konfigurieren und builden musst. Jeder zusätzliche Schritt ist eine Fehlerquelle.
Wann Next.js trotzdem Sinn ergibt
Große Teams mit geteilten Component Libraries. E-Commerce-Plattformen mit Server-Side-Rendering. Apps mit vielen dynamischen Routen. Projekte die API Routes ohne separates Backend brauchen. Wenn du User-Authentication, Echtzeit-State und Datenbankzugriff brauchst, ist ein Framework die richtige Wahl.
Die Faustregel: Wenn du keine Datenbank brauchst, brauchst du kein Framework. Und für alles dazwischen lohnt sich ein Blick auf HTMX oder Alpine.js bevor du die volle React-Maschinerie startest.
Wie du mit Vanilla JS Lighthouse 100 erreichst und was der komplette Vibe-Coding-Workflow ist, steht in den verlinkten Artikeln.
Häufige Fragen
Verliere ich SEO wenn ich kein Framework nutze?
Nein — im Gegenteil. Statisches HTML wird schneller gecrawlt als Client-Side-Rendered React. Google bevorzugt schnelle, schlanke Seiten. Lighthouse 100 ist mit Vanilla einfacher als mit jedem Framework.
Was wenn mein Projekt später wächst?
Vanilla JS skaliert horizontal: mehr HTML-Dateien, gleiche Struktur. Wenn du App-Logik brauchst, migrierst du einzelne Sektionen. Keine Framework-Schulden die dich verlangsamen.
Wie sage ich Claude dass er kein Framework nutzen soll?
"Vanilla HTML/CSS/JS, kein React, kein Next.js, kein Framework, keine npm Dependencies." Dieser Satz am Anfang des Prompts verhindert den Framework-Reflex.
Quellen
Crosley, Blake — "The No-Build Manifesto" (blakecrosley.com, 2025)
dev.to/clevertech88 — "The Hidden Cost of JavaScript Frameworks" (E-Commerce-Benchmark, 2026)
catchmetrics.io — "Next.js Bundle Sizes: Insights from 300,000 Domains"
plavecstudio.com — "Next.js 15 Performance: Real Benchmarks" (FCP/TTI/LCP Ranges)
Hacker News — "I built the same app 10 times" (Framework-Benchmark, 2026)
dev.to/nyloodzz — "Why I Ditched WordPress for Vanilla JS + Edge" (Lighthouse 100)
DistantJob — "VanillaJS vs React: Which Requires Less Code?"
dev.to/clevertech88 — "The Hidden Cost of JavaScript Frameworks" (Build-Zeiten, RAM-Vergleich)
Plavec Studio — "Next.js 15 Performance: Real Benchmarks" (FCP/TTI-Daten)
Weiter lesen: Vanilla JS Checkliste · Next.js Checkliste · Vanilla JS Briefing · Code-Kommentare · Software-Architektur