← Zurück zum Blog

Astro vs. Next.js — Wann welches Framework die bessere Wahl ist

Astro vs. Next.js — Wann welches Framework die bessere Wahl ist

Ich nutze beide Frameworks produktiv — diese Website läuft auf Astro, andere Kundenprojekte auf Next.js. Beide sind exzellent, aber für fundamental verschiedene Anforderungen optimiert. Und mit Astro 6.0 verschwimmt die Grenze zunehmend: Astro ist längst kein reiner Static Site Generator mehr.

Die Kernphilosophie

Astro verfolgt den Ansatz Ship less JavaScript. Standardmäßig wird kein einziges Byte JavaScript an den Browser gesendet. Interaktive Komponenten werden als Islands explizit markiert und nur bei Bedarf hydrated. Das Ergebnis: extrem schnelle Websites mit perfekten Core Web Vitals.

Next.js ist ein Full-Stack React Framework. Mit Server Components, API Routes, Middleware und Edge Runtime kannst du alles bauen — von der Landing Page bis zur komplexen SaaS-App. Mehr Flexibilität, aber auch mehr Komplexität und JavaScript im Bundle.

Performance und Core Web Vitals

Astro gewinnt hier haushoch. Eine typische Astro-Seite liefert 0 KB JavaScript aus (wenn du keine interaktiven Islands brauchst). Das bedeutet: perfekte Lighthouse-Scores, sofortiges LCP, kein Layout Shift, kein Hydration-Delay. Für SEO-kritische Content-Seiten ist das ein massiver Vorteil.

Next.js hat mit Server Components großen Fortschritt gemacht, aber du zahlst immer einen Baseline-Preis für das React Runtime. Bei gut optimierten Next.js-Seiten reden wir über ~80-120 KB JavaScript (gzipped). Nicht viel, aber im Vergleich zu Astros 0 KB spürbar — besonders auf mobilen Geräten mit schlechter Verbindung.

Astro kann mehr als Static — SSR, Actions und Server Islands

Ein häufiges Missverständnis: Astro ist nur für statische Seiten. Das stimmt schon lange nicht mehr. Mit einem Server-Adapter (Vercel, Cloudflare, Node, Netlify) kann Astro Seiten on-demand rendern, genau wie Next.js. Du hast drei Modi:

  • Static (alles vorgerendert)
  • Hybrid (statisch per Default, einzelne Seiten on-demand)
  • Server (alles on-demand, einzelne Seiten optional statisch)

Server Islands sind Astros eleganteste Innovation: Du markierst eine Komponente mit server:defer, und sie wird separat vom Server nachgeladen — während der Rest der Seite sofort aus dem Cache kommt. Perfekt für personalisierte Widgets (Warenkorb, Avatar, Empfehlungen) auf ansonsten statischen Seiten. Jede Island lädt unabhängig, langsame Islands blockieren nichts.

Dazu kommen Astro Actions — type-safe Server-Funktionen mit automatischer Zod-Validierung, ähnlich wie Next.js Server Actions. Du definierst sie in src/actions, sie akzeptieren FormData oder JSON, und du kannst sie direkt aus HTML-Formularen oder Client-Code aufrufen. Middleware für Auth, Redirects und Request-Handling funktioniert genauso wie in Next.js. Und vollwertige API-Routes mit GET, POST, PUT, DELETE sind auch da.

Astro ist damit kein reiner Static Site Generator mehr — es ist ein Content-first Framework mit ernsthaften Server-Capabilities. Der Unterschied zu Next.js liegt nicht mehr in der Fähigkeit, sondern im Default: Astro ist statisch-first und du schaltest Server-Features gezielt zu. Next.js ist server-first und du optimierst nach.

Content vs. Application

Content-fokussiert (Portfolio, Blog, Docs, Marketing, Landing Pages): Astro. Kein Framework ist besser darin, Content-Seiten zu bauen. Markdown/MDX out of the box, Content Collections, automatische Sitemap, und du kannst React-, Vue- oder Svelte-Komponenten mixen. Für dynamische Teile nutzt du Server Islands und Actions.

App-fokussiert (Dashboards, SaaS, E-Commerce, Social): Next.js. Sobald deine App primär interaktiv ist — mit komplexem Client-State, Echtzeit-Updates, tiefer React-Integration — ist Next.js das reifere Ökosystem. Server Components, Server Actions und das React-Ecosystem sind schwer zu schlagen.

Die Grauzone dazwischen wird größer. Eine Marketing-Website mit Benutzer-Login, personalisierten Inhalten und einem Kontaktformular? Das kann Astro mit Server Islands, Actions und Middleware jetzt genauso gut. Erst wenn die App-Logik den Content überwiegt, wird Next.js die bessere Wahl.

SEO

Beide Frameworks sind SEO-freundlich, da sie HTML serverseitig rendern. Aber Astro hat einen strukturellen Vorteil: weniger JavaScript bedeutet schnellere Ladezeiten, und Ladezeit ist ein Ranking-Faktor. Next.js braucht mehr Tuning für perfekte Scores — Image Optimization, Dynamic Imports, Bundle Analysis. Machbar, aber nicht automatisch.

Developer Experience

Astro fühlt sich an wie eine Rückkehr zur Einfachheit. .astro-Dateien sind HTML mit Superpowers — Frontmatter für Logik, JSX-ähnliche Expressions im Template, scoped CSS by default. Erfrischend unkompliziert.

Next.js ist mächtiger, aber auch komplexer. App Router vs. Pages Router, Server Components vs. Client Components, Server Actions — die Lernkurve ist steiler. Dafür bekommst du ein Framework, das mit deinen Anforderungen wachsen kann.

Was Astro 6.0 bringt

Astro 6.0 ist ein großes Release — getrieben durch die Übernahme von Astro durch Cloudflare Anfang 2026. Der Dev-Server wurde komplett neu gebaut auf Basis der Vite Environment API: astro dev läuft jetzt in der exakt gleichen Runtime wie Production. Keine Simulation, keine Polyfills — das eliminiert das klassische works in dev, breaks in prod Problem, besonders auf Cloudflare Workers.

Dazu kommen:

  • eine Built-in Fonts API für automatisches Font-Hosting und Fallback-Optimierung
  • eine Content Security Policy API für sichere Inline-Scripts
  • Live Content Collections für type-safe externe Inhalte (CMS, APIs, Datenbanken)
  • ein experimenteller Rust-Compiler der den bisherigen Go-Compiler ersetzt

Unter der Haube steigen Vite 7.0 und Shiki v4.0 ein. Breaking Changes: Node.js 22.12+ ist Pflicht, Legacy Content Collections und Astro.glob() sind entfernt, ViewTransitions heißt jetzt ClientRouter.

Mein Ansatz

Ich nutze beide — und empfehle Kunden gezielt das richtige Tool. Portfolio, Blog, Unternehmens-Website? Astro, ohne nachzudenken. Web-App mit Auth, Echtzeit-Features, komplexer Business-Logik? Next.js. Marketing-Website mit Personalisierung und Formularen? Mittlerweile auch Astro — Server Islands und Actions machen es möglich.

Fazit

Astro und Next.js konkurrieren mehr, als man vor zwei Jahren gedacht hätte. Astro ist vom Static Site Generator zum Content-first Full-Stack Framework gewachsen — mit SSR, Server Islands, Actions, Middleware und API Routes. Der Unterschied liegt im Default: Astro shipped weniger JavaScript und ist schneller, wenn Content im Vordergrund steht. Next.js ist flexibler, wenn App-Logik dominiert. Wenn du dir unsicher bist: Beginne mit Astro. Wenn du merkst, dass du mehr Client-Interaktivität brauchst als Islands hergeben, wechsle zu Next.js.

Noch mehr lesen?

Alle Beiträge →