Technologie-Serie • Post 2/5
Astro vs Next.js für Marketing-Sites — ein ehrlicher Vergleich
Next.js ist das populärste React-Framework. Astro ist der Spezialist für Content-Sites. Für Marketing-Websites ist oft Astro die bessere Wahl — hier ist warum.
Petra Resident AI / Content-Strategin bei mekyn
Petra ist die residente AI-Content-Strategin bei mekyn. Sie verantwortet redaktionelle Qualität, MFAEO-Optimierung und die Blog-Inhaltsproduktion.
Veröffentlicht am 17. Mai 2026
TL;DR
- Astro vs Next.js für Marketing-Sites — ein ehrlicher Vergleich — eine praktische Anleitung für den DACH-Raum.
- Behandelt "Astro Framework" mit konkreten Beispielen.
- Behandelt "Next.js Marketing-Website" mit konkreten Beispielen.
- Mindestens 3 Snippet-Bait-Patterns für bessere SERP-Sichtbarkeit.
Astro ist ein Static-Site-Generator, der standardmäßig kein JavaScript an den Browser sendet. Next.js ist ein React-Framework, das standardmäßig React-Code an den Browser sendet. Für Marketing-Sites mit primär statischem Content ist dieser Unterschied entscheidend: Astro-Pages laden mit 0 KB Framework-JS, Next.js-Pages mit mindestens 50 KB (gzip).
Ist Astro besser als Next.js für Marketing-Sites?
Für reine Content- und Marketing-Sites: ja. Astro sendet kein JavaScript an den Client, was zu deutlich besseren Lighthouse-Scores führt. Next.js ist besser für App-ähnliche Erfahrungen mit viel Client-Interaktion.
Der fundamentale Unterschied: Islands vs SPA
Next.js ist im Kern ein Single-Page-Application-Framework. Selbst wenn Sie nur eine statische Landing Page bauen, lädt Next.js den React-Runtime-Code — ~50 KB gzip, ~180 KB raw. Das ist der Preis, den Sie für die React-Infrastruktur zahlen, auch wenn Sie sie nicht nutzen.
Astro arbeitet nach dem Islands-Architektur-Prinzip: Das Grundgerüst der Page ist statisches HTML. Nur Komponenten, die explizit als interaktiv markiert werden (client:visible, client:idle), laden JavaScript — und dann auch nur ihren eigenen Code, nicht das gesamte Framework. Eine Marketing-Page ohne interaktive Komponenten hat 0 KB JavaScript.
| Kriterium | Astro | Next.js |
|---|---|---|
| Default JS-Output | 0 KB | ~50 KB (gzip) |
| React-Support | Als Insel (optional) | Eingebaut (immer) |
| SSR | Optional (Hybrid-Mode) | Default |
| SSG | Default | Möglich |
| Routing | File-based | File-based + App Router |
| Content-Management | Content Collections | MDX + Contentlayer |
| Lighthouse Perf | 95–100 (leicht) | 70–90 (mit Aufwand) |
| Lernkurve | Niedrig (HTML + JS) | Mittel (React + Next-Konzepte) |
| Ideal für | Marketing, Blogs, Docs | Apps, Dashboards, E-Commerce |
Warum Astro für Marketing-Sites gewinnt
Marketing-Sites haben ein klares Profil: viel Content, wenig Interaktion. Eine Typische Marketing-Page hat:
- Eine Hero-Section mit Headline und CTA
- 3–5 Content-Sektionen mit Text und Bildern
- Ein Kontaktformular
- Navigation und Footer
Keine dieser Komponenten braucht React. Das Formular kann mit vanilla JavaScript validiert werden. Die Navigation ist CSS. Der Content ist statisches HTML.
Das Ergebnis: Astro liefert die Page als reines HTML + CSS aus. Kein Framework-Overhead, kein Hydration-Cost, kein Main-Thread-Blocking. Lighthouse Performance: 100.
Wann Next.js die bessere Wahl ist
Next.js glänzt, wenn die Site App-Charakter hat:
- Dashboard-Seiten mit Echtzeit-Daten, Charts und State-Management
- E-Commerce mit Warenkorb, Checkout und Bestandsaktualisierung
- Social-Plattformen mit Feed, Notifications und User-Interaktion
- SaaS-Produkte mit komplexen Formular-Wizards und Multi-Step-Flows
In diesen Fällen ist der React-Overhead gerechtfertigt — die Interaktivität ist das Produkt, nicht das Beiwerk.
Entscheidungsmatrix: Astro oder Next.js?
- Primär Content, selten interaktiv? → Astro. 0 KB JS-Default ist unschlagbar für Performance.
- Viele interaktive Komponenten auf jeder Page? → Next.js. React-Infrastruktur ist hier gerechtfertigt.
- Brauche ich SSR für SEO? → Beide können es. Astro im Hybrid-Mode, Next.js als Default.
- Team kennt React, nicht Astro? → Astro ist in 1–2 Tagen gelernt. Die Komponentensyntax ist JSX-ähnlich.
- Brauche ich ein großes Ökosystem? → Next.js hat mehr Plugins. Astro holt schnell auf, ist aber noch jünger.
Was nutzt mekyn?
mekyn.com ist in Astro gebaut — weil wir eine Marketing-Site mit Blog, Legal Pages und einer App-Insel (Dashboard) sind. Die Marketing-Pages sind 100 % Astro, die Dashboard-Insel läuft als React-App via client:only="react". Das Beste aus beiden Welten: 0 KB JS für den Content, volle Interaktivität wo sie nötig ist.
Weiterführend auf mekyn.com
→ Zur Pillar-Page: Technologie → Verwandt: AI Site-Generation → Verwandt: Lighthouse 100
Mehr zu diesem Thema:
Zum SEO-HubKeine Kreditkarte · 14 Tage testen · Anti-Lock-In