Astro

Was ist Astro?

Astro ist ein quelloffenes Web-Framework für inhaltsgetriebene Websites wie Blogs, Dokumentationen, Marketingseiten und Shops. Es rendert Seiten standardmäßig beim Build zu statischem HTML und schickt nur für die interaktiven Teile, die Sie auswählen, JavaScript an den Browser. Diese Teile heißen Islands (Inseln). Seiten schreiben Sie als Komponenten und können darin React und andere UI-Frameworks einsetzen.

In der Astro-Dokumentation ist aktuell Version 7 als neueste Hauptversion aufgeführt (Stand Oktober 2026).

So funktioniert Astro

Erst statisch, bei Bedarf dynamisch

Der Standardmodus ist statisch: Seiten und Endpunkte werden beim Build zu HTML vorgerendert, wie bei der statischen Seitengenerierung. Um eine Route bei jeder Anfrage zu rendern, fügen Sie einen Server-Adapter hinzu (Node, Netlify, Cloudflare, Vercel und weitere) und setzen auf der Seite export const prerender = false. Mit output: 'server' kehren Sie den Standard um, sodass jede Seite bei Bedarf gerendert wird, wie beim serverseitigen Rendering.

Islands und standardmäßig kein JavaScript

Astro entfernt clientseitiges JavaScript aus UI-Komponenten, solange Sie es nicht aktivieren. Eine client:*-Direktive macht eine Komponente zu einer interaktiven Island, die für sich allein hydriert wird: client:load sofort, client:idle, wenn der Browser untätig ist, und client:visible, sobald die Komponente im sichtbaren Bereich erscheint. Alles rund um die Island bleibt reines HTML. Details stehen in der Astro-Dokumentation zu Islands. Server Islands (server:defer) funktionieren umgekehrt: Ein dynamischer Teil wird separat auf dem Server gerendert, während der Rest der Seite einen Platzhalter zeigt.

Content Collections

Content Collections verwalten Gruppen ähnlicher Inhalte wie Blogbeiträge. Sie definieren sie in src/content.config.ts mit einem Loader (glob() liest Markdown-, MDX-, JSON- und YAML-Dateien, file() liest eine einzelne Datei) und einem optionalen Zod-Schema, das das Front Matter prüft und TypeScript-Typen erzeugt. Eine Datei, die das Schema verletzt, lässt den Build scheitern, statt in Produktion zu landen.

Beispiel

Auf einer Produktseite sind Kopfzeile, Beschreibung und Bilder statisches HTML. Der Button "In den Warenkorb" ist eine React-Komponente mit client:visible, sein JavaScript wird also erst geladen, wenn der Besucher dorthin scrollt. Ein nutzerabhängiger Streifen "Zuletzt angesehen" kann eine Server Island mit Platzhalter sein. Der Rest der Website bleibt auf einem CDN cachebar.

Häufige Fehler

• client:load an jeder Komponente. Das sendet dasselbe JavaScript wie eine Single-Page-App und nimmt den Hauptvorteil weg.
• Astro für ein app-artiges Dashboard mit viel gemeinsamem Client-Zustand. Ein Framework rund um Single-Page-Apps wie Next.js passt dort womöglich besser.
• Den Adapter vergessen. Ohne ihn kann eine Seite nicht bei Bedarf gerendert werden.
• Zu glauben, statisch heiße nicht testbar. Formulare, API-Endpunkte, On-Demand-Routen und Server Islands laufen weiterhin auf einem Server und können unter Last langsamer werden.

Astro, Performance-Tests und Monitoring

Ein statischer Astro-Build von einem CDN hat meist eine niedrige Time to First Byte, doch das sollten Sie messen, nicht annehmen. Verfolgen Sie Lighthouse-Werte und Core Web Vitals über die Zeit mit dem Page-Speed-Monitoring und prüfen Sie stichprobenartig mit dem Core-Web-Vitals-Checker. Wie Sie aus den Zahlen Grenzwerte machen, die einen Build scheitern lassen, lesen Sie in Performance-Budgets für Web-Apps festlegen. Wenn Sie Routen bei Bedarf rendern, zeigt Ihnen ein Lasttest, wie sich diese Routen bei gleichzeitigem Traffic verhalten. Als andere Generatoren lohnt der Vergleich mit Eleventy. Allgemein zum Thema Ladezeit hilft die Anleitung zum Überwachen der Core Web Vitals mit Alarmen.

Häufige Fragen (FAQ)

Ist Astro ein Static Site Generator?

Größtenteils ja. Die Standardausgabe ist statisches HTML, das vorab gebaut wird. Mit einem Server-Adapter kann Astro Seiten auch bei Bedarf rendern und deckt damit statische und serverseitig gerenderte Websites ab.

Ist Astro gut für SEO?

Seiten kommen als fertiges HTML an, Suchmaschinen können den Inhalt also ohne JavaScript lesen, und weniger JavaScript hilft bei den Ladewerten. Das Ranking hängt trotzdem von der Qualität der Inhalte und der übrigen Website ab.

Kann ich React, Vue oder Svelte mit Astro nutzen?

Ja. Astro bietet Integrationen für UI-Frameworks wie React; mit einer Integration verwenden Sie deren Komponenten als Islands. Den Großteil der Seite können Sie in Astro-Komponenten halten und nur hydrieren, was Interaktion braucht.

Was sind Astro Islands?

Eine Island ist eine interaktive UI-Komponente auf einer sonst statischen Seite. Sie wird getrennt vom Rest der Seite hydriert, sodass nur das JavaScript geladen wird, das sie braucht.