Headless & Infrastruktur
Astro – Das moderne Web-Framework
Astro ist ein modernes Web-Framework, das für content-fokussierte Websites entwickelt wurde — Blogs, Marketing-Seiten, Dokumentationen, Portfolio-Seiten. Das Besondere: Astro liefert standardmäßig kein JavaScript an den Browser aus. Was auf dem Server gerendert werden kann, wird dort gerendert. Das Ergebnis sind Websites die extrem schnell laden, wenig Bandbreite verbrauchen und bei Core Web Vitals regelmäßig Top-Werte erzielen.
Was Astro von anderen Frameworks unterscheidet
React, Vue und Angular sind component-first — jede Seite ist eine JavaScript-Anwendung. Astro ist content-first — Seiten sind HTML-Dokumente, JavaScript ist die Ausnahme, nicht die Regel. Dieser Paradigmenwechsel hat konkrete Auswirkungen auf Performance: Eine typische Astro-Seite liefert 0 KB JavaScript an den Browser — es sei denn, ein interaktives Element erfordert es explizit.
Zero JS by default
Astro rendert Komponenten server-seitig zu statischem HTML. JavaScript wird nur dann an den Browser geschickt, wenn eine Komponente mit einer client:*-Direktive als interaktiv markiert wird. Das ist das Gegenteil von SPAs, die immer das gesamte Framework laden.
Islands Architecture
Das Kernkonzept von Astro heißt Islands Architecture: Eine Seite besteht aus statischem HTML (dem ‘Ozean’) und einzelnen interaktiven Komponenten (den ‘Inseln’). Jede Insel wird unabhängig hydratisiert — nur die Komponenten die Interaktivität brauchen, laden JavaScript. Das Ergebnis: selbst komplexe Seiten mit mehreren interaktiven Elementen laden nur das JavaScript, das wirklich gebraucht wird — nicht das gesamte Framework.
client:load — sofortige Hydratisierung
Die Komponente wird sofort beim Laden der Seite hydratisiert. Für kritische UI-Elemente die sofort interaktiv sein müssen — Theme-Toggle, Login-Formular.
client:idle — niedrige Priorität
Hydratisierung wenn der Browser idle ist (requestIdleCallback). Für nicht-kritische Interaktivität — Newsletter-Formular, Chat-Widget.
client:visible — nur wenn sichtbar
Hydratisierung wenn die Komponente im Viewport erscheint (IntersectionObserver). Ideal für Komponenten below the fold — Kommentar-Sektion, schwere Diagramme.
client:only — rein client-seitig
Keine Server-seitige Renderung — die Komponente existiert nur im Browser. Für Komponenten die auf Browser-APIs angewiesen sind.
Rendering-Modi in Astro
Astro unterstützt drei Rendering-Modi die sich beliebig kombinieren lassen — das macht Hybrid-Architectures möglich.
Static (SSG)
Seite wird beim Build zu HTML — Einsatz: Content-Seiten, Blog, Docs
Server (SSR)
Seite wird pro Request gerendert — Einsatz: Auth, Datenbank, personalisiert
Hybrid
Mix aus Static und SSR — Einsatz: meiste reale Websites
output: server mit prerender = true
Mit output: ‘server’ und export const prerender = true pro Route bekommt man das Beste aus beiden Welten: öffentliche Content-Seiten werden statisch vorgerendert, Auth- und App-Routen bleiben SSR. Das ist das performanteste Setup für Content-Websites mit Auth-Bereich.
Astro-Komponenten — .astro-Dateien
Astro hat ein eigenes Komponenten-Format: .astro-Dateien. Sie bestehen aus einem Frontmatter-Block (JavaScript/TypeScript, läuft nur auf dem Server) und einem HTML-Template. Das Besondere: kein useState, kein useEffect, keine Hydratisierung — Astro-Komponenten sind pure server-side Templates. Für Interaktivität kommen React, Vue oder andere Frameworks als Islands hinzu.
Content Collections — typsichere Inhalte
Astro Content Collections sind ein built-in System für strukturierte Inhalte (Markdown, MDX, JSON). Mit einem Zod-Schema werden Frontmatter-Felder typsicher — falsche Felder brechen den Build, statt stillschweigend zu verschwinden. Das macht Content Collections zum idealen System für Blogs, Dokumentationen und jede Website mit vielen strukturierten Inhalten.
Warum Astro 2026 die richtige Wahl ist
Performance ohne Aufwand
Zero-JS-by-default bedeutet exzellente Core Web Vitals ohne manuelle Optimierung. Lighthouse-Scores von 95–100 sind mit Astro der Normalfall, nicht die Ausnahme.
Framework-Agnostisch
React, Vue, Svelte, Solid — Astro unterstuetzt alle gaengigen UI-Frameworks als Islands. Kein Lock-in, keine Neuschreibung beim Framework-Wechsel.
Developer Experience
TypeScript-first, hot module replacement, built-in Bild-Optimierung, automatische Sitemap, MDX-Support — alles out of the box ohne Konfigurationsaufwand.
Skalierbarkeit
Von der einfachen Landing Page bis zur komplexen Multi-Language-Website mit Auth-Bereich und Datenbank-Anbindung — Astro skaliert mit den Anforderungen.
DSGVO-konform hostbar
Astro laeuft mit dem Node-Adapter auf jedem VPS — kein Vendor Lock-in, keine US-Cloud-Pflicht. Hosting auf IONOS, Hetzner oder eigenem Server ist problemlos moeglich.
Häufig gestellte Fragen zum Thema Astro Grundlagen
Astro ist ideal für content-fokussierte Websites: Blogs, Marketing-Seiten, Dokumentationen, Portfolio-Seiten, News-Seiten und alle Websites bei denen Performance wichtig ist. Für hochdynamische Anwendungen (Real-time, komplexes State-Management) sind React-basierte Frameworks wie Next.js besser geeignet.
Ja — mit @astrojs/react können React-Komponenten als Islands eingebunden werden. Der Vorteil: nur die React-Komponenten die Interaktivität brauchen laden React, der Rest der Seite bleibt JavaScript-frei.
Astro ist deutlich mächtiger: TypeScript-Support, moderne Komponenten-Architektur, Islands für Interaktivität, built-in Bild-Optimierung und die Möglichkeit, SSR und statisches Rendering zu mischen. Jekyll ist einfacher, aber deutlich limitierter.
Ja — Astro skaliert auch für Websites mit tausenden von Seiten. Content Collections mit Zod-Schema, automatische Sitemap-Generierung und der Build-Prozess sind für große Content-Mengen optimiert. Build-Zeiten bleiben auch bei großen Projekten im Minuten-Bereich.
Nein — Astro unterstützt JavaScript und TypeScript. TypeScript ist empfohlen wegen der Typsicherheit in Content Collections und Komponenten-Props, aber nicht erforderlich. Der Einstieg mit JavaScript ist problemlos möglich.