# Astro Framework erklärt: Islands, Vorteile und Grenzen

Das Astro Framework im Überblick: Islands, statischer Output und SSR, Content Collections, Vergleich mit Next.js und WordPress und wann Astro passt oder nicht.

**Astro ist ein quelloffenes Web-Framework für inhaltsgetriebene Websites. Es rendert Seiten standardmäßig beim Build zu fertigem HTML und lädt JavaScript nur für einzelne interaktive Komponenten, die sogenannten Islands. Nach aktuellem Stand (Oktober 2026) ist Astro 7 die aktuelle Hauptversion, weiterhin unter MIT-Lizenz.**

Dieser Artikel erklärt, wie Astro technisch aufgebaut ist, wie es sich von Next.js und WordPress unterscheidet und für welche Vorhaben es passt. Warum wir Astro in vielen Projekten einsetzen, haben wir bereits im Beitrag [Astro für superschnelle Websites](/astro-fuer-superschnelle-websites) beschrieben. Hier geht es um die Mechanik dahinter und um die Entscheidung, ob Astro für Ihr Projekt das richtige Werkzeug ist.

## Was Astro ist und wer dahintersteht

Astro ist ein Framework, mit dem Entwickler Websites aus Komponenten und Inhalten zusammensetzen. Heraus kommen HTML- und CSS-Dateien, ergänzt um so wenig JavaScript wie nötig. Besucher brauchen dafür weder Plugin noch besonderen Browser.

Zum aktuellen Stand, jeweils laut dem offiziellen Astro-Blog (Oktober 2026):

- **Astro 7.0** erschien am 22. Juni 2026. Laut Astro-Team sind Builds in dessen eigenen Benchmarks 15 bis 61 % schneller als zuvor, unter anderem durch Vite 8, einen in Rust neu geschriebenen Compiler für `.astro`-Komponenten und eine neue Markdown-Verarbeitung.
- **Astro 7.3** vom 3. September 2026 ist die jüngste Nebenversion.
- **Astro 6.0** erschien am 10. März 2026 und brachte unter anderem eine Fonts-API, eine API für Content Security Policy und Live Content Collections.
- **Cloudflare** hat am 16. Januar 2026 bekannt gegeben, dass das Team der Astro Technology Company zu Cloudflare wechselt. Laut Ankündigung bleibt Astro Open Source unter MIT-Lizenz und soll weiterhin nicht an einen bestimmten Hosting-Anbieter gebunden sein.

Für Unternehmen ist vor allem der letzte Punkt relevant: Eine Astro-Website lässt sich nach aktuellem Stand weiterhin bei jedem Anbieter betreiben, der statische Dateien oder Node.js ausliefert.

## Die Bausteine von Astro

### Islands-Architektur

Das zentrale Konzept von Astro heißt Islands. Laut der Astro-Dokumentation wird der Großteil einer Website zu statischem HTML, und JavaScript wird nur für die einzelnen Komponenten geladen, die es brauchen. Eine Produktseite besteht dann zum Beispiel aus statischem Text, Bildern und Tabellen, während nur der Konfigurator oder das Kontaktformular als interaktive Insel läuft.

Wann eine Insel aktiv wird, steuern sogenannte Client-Direktiven:

| Direktive | Wann die Komponente geladen wird |
|---|---|
| `client:load` | sofort beim Seitenaufruf |
| `client:idle` | sobald der Browser nichts anderes zu tun hat |
| `client:visible` | erst wenn der Besucher bis zur Komponente scrollt |
| `client:media` | wenn eine bestimmte Bildschirmbedingung erfüllt ist |
| `client:only` | nur im Browser, ohne Vorab-Rendering auf dem Server |

Komponenten ohne Direktive werden nur als HTML ausgeliefert. Ein aufwendiger Footer oder eine Navigation erzeugt also keinen JavaScript-Ballast, solange sie nicht interaktiv sein muss.

Daneben gibt es Server Islands mit der Direktive `server:defer`. Laut Dokumentation werden diese Teile getrennt vom Rest der Seite auf dem Server gerendert. Die Seite erscheint sofort mit einem Platzhalter, der personalisierte oder häufig wechselnde Teil wird nachgeladen.

### UI-Frameworks nach Wahl

Interaktive Inseln können laut Astro-Dokumentation mit React, Preact, Svelte, Vue oder SolidJS gebaut werden, und mehrere davon lassen sich auf einer Seite mischen. In der Praxis legt man sich meist auf eines fest. Der Vorteil liegt woanders: Bestehende Komponenten aus einem React-Projekt lassen sich in Astro weiterverwenden.

### Statischer Output und Rendering auf Anfrage

Laut Dokumentation rendert Astro standardmäßig die gesamte Website vorab, also beim Build. Das Ergebnis ist ein Ordner mit HTML-, CSS- und JavaScript-Dateien, der auf jedem Webserver läuft.

Sollen einzelne Seiten bei jedem Aufruf frisch erzeugt werden, etwa für ein Kundenkonto oder eine Suche, braucht Astro einen Adapter für die jeweilige Laufzeitumgebung. Offizielle Adapter gibt es nach aktuellem Stand für Node.js, Netlify, Vercel und Cloudflare. Dann lässt sich pro Seite festlegen, ob sie vorab gebaut oder auf Anfrage gerendert wird. Die Dokumentation empfiehlt, mit statischem Output zu beginnen und erst umzustellen, wenn die meisten Seiten dynamisch sein müssen.

### Content Collections

Für Inhalte wie Blogartikel, Referenzen oder Produktdaten bietet Astro Content Collections. Laut Dokumentation laden mitgelieferte Loader Markdown-, MDX-, JSON-, YAML- oder TOML-Dateien aus Ordnern oder einzelnen Dateien. Ein Schema prüft beim Build, ob jeder Eintrag die erwarteten Felder hat. Fehlt bei einem Artikel das Datum oder ist ein Preis kein gültiger Wert, bricht der Build mit einer Fehlermeldung ab, und die fehlerhafte Seite geht gar nicht erst online.

Über eigene Loader lassen sich auch Inhalte aus einem Headless-CMS, einer Datenbank oder einer Schnittstelle einbinden. Live Content Collections holen Daten laut Dokumentation erst zur Laufzeit, für Quellen, die sich häufig ändern.

### Integrationen

Astro erweitert sich über Integrationen, etwa für Sitemaps, MDX oder die genannten UI-Frameworks. Viele davon werden mit einem einzigen Befehl eingerichtet. Die Zahl der benötigten Erweiterungen bleibt bei typischen Unternehmensseiten klein, weil Astro vieles schon mitbringt.

## Astro, Next.js und WordPress im Vergleich

Die drei Systeme werden oft gegeneinander abgewogen, lösen aber unterschiedliche Aufgaben. Next.js beschreibt sich laut eigener Dokumentation als React-Framework für Full-Stack-Webanwendungen. WordPress ist ein Content-Management-System auf PHP-Basis, laut wordpress.org mit PHP 8.3 oder neuer und MySQL 8.0 oder MariaDB 10.11 als empfohlener Grundlage.

| Kriterium | Astro | Next.js | WordPress |
|---|---|---|---|
| Grundidee | Website aus Inhalten und Komponenten, vorab gebaut | Web-Anwendung mit React | CMS mit Editor, Themes und Plugins |
| Standard-Auslieferung | statisches HTML, JavaScript nur für Islands | React im Browser, Server Components, mehrere Rendering-Arten | PHP rendert Seiten bei jedem Aufruf, oft mit Cache |
| Inhalte pflegen | Dateien im Repository, Headless-CMS oder eigener Editor | meist Headless-CMS | integrierter Editor |
| Stärken | Ladezeit, Sicherheit, wenig Wartung bei Inhaltsseiten | Logins, Dashboards, viel Zustand im Browser | große Auswahl an Plugins, vertrauter Editor |
| Typischer Aufwand im Betrieb | gering, statische Dateien | mittel, Node.js-Server oder Plattform | regelmäßige Updates für Core, Themes und Plugins |
| Hosting | jeder Webserver, bei SSR mit Adapter | Node.js-Server oder spezialisierte Plattform | PHP-Hosting mit Datenbank |

**Astro gegen React.** Diese Gegenüberstellung führt oft in die Irre. React ist eine Bibliothek für Benutzeroberflächen, Astro ein Framework für ganze Websites. In Astro-Projekten wird React häufig für die interaktiven Inseln eingesetzt. Die eigentliche Frage lautet, ob die ganze Seite als React-Anwendung laufen muss oder nur einzelne Teile.

**Astro gegen Next.js.** Wer vor allem Inhalte ausliefert, also Leistungsseiten, Kataloge, Ratgeber und Landingpages, kommt mit Astro meist mit weniger JavaScript und weniger Betriebsaufwand aus. Wer eine Anwendung mit Login, vielen Formularen und Zustand im Browser baut, ist mit Next.js besser bedient.

**Astro gegen WordPress.** Hier geht es weniger um Technik als um die Frage, wer Inhalte pflegt. Wenn viele Mitarbeitende ohne Entwickler Seiten anlegen und gestalten sollen, bleibt WordPress oft die pragmatische Wahl. Wie ein Umstieg abläuft, beschreibt unser Beitrag [Von WordPress zu Astro](/wordpress-zu-astro-website-relaunch).

## Wann Astro passt und wann nicht

**Astro passt gut, wenn:**

- die Website vor allem Inhalte zeigt und wenige, klar abgegrenzte interaktive Teile hat
- Inhalte strukturiert vorliegen, etwa als Produkttabelle, Datenblatt oder Glossar
- Ladezeit und geringer Wartungsaufwand wichtiger sind als ein frei gestaltbarer Editor
- Marketing-Seiten getrennt von einem Shopsystem oder einer Anwendung laufen sollen
- ein Entwicklerteam Änderungen über Git verwalten kann oder ein Headless-CMS vorgesehen ist

**Astro passt weniger, wenn:**

- ein großes Redaktionsteam täglich neue Layouts ohne Entwickler zusammenstellen will
- der Kern des Projekts eine Anwendung mit Login, Rechten und viel Zustand ist
- ein Standardshop schnell starten soll und keine eigene Storefront gebraucht wird
- das Team fest in einem anderen System arbeitet und ein Wechsel keinen messbaren Vorteil bringt

## Hosting und Kosten

Astro selbst kostet nichts. Kosten entstehen durch Entwicklung, Hosting und gegebenenfalls ein CMS.

Eine statisch gebaute Astro-Website besteht aus Dateien, die jeder Webserver ausliefern kann. Eine Datenbank, eine PHP-Umgebung oder ein dauerhaft laufender Server sind dafür nicht nötig. Das hält das Hosting einfach und die Angriffsfläche klein. Erst wenn Seiten auf Anfrage gerendert werden, braucht es eine Laufzeitumgebung wie Node.js oder eine Plattform mit passendem Adapter.

Den größeren Kostenblock bildet die Entwicklung. Weil Inhalte und Komponenten typischerweise im Code angelegt werden, ist die Einrichtung bei Astro meist etwas aufwendiger als bei einem fertigen WordPress-Theme. Dafür fallen später weniger Updates und Plugin-Konflikte an. Wer Inhalte in einem Editor pflegen will, rechnet die Kosten für ein Headless-CMS hinzu.

## Woran Sie eine gute Astro-Agentur erkennen

Astro ist vergleichsweise jung, und nicht jede Webagentur hat damit Erfahrung. Diese Fragen helfen bei der Auswahl:

1. **Gibt es laufende Astro-Projekte als Beispiel?** Lassen Sie sich Websites zeigen und prüfen Sie Ladezeit und Aufbau selbst.
2. **Wie werden Inhalte gepflegt?** Eine gute Agentur erklärt, ob Sie über Git, ein Headless-CMS oder einen Editor arbeiten, und was das für Ihren Alltag bedeutet.
3. **Wem gehört der Code?** Klären Sie schriftlich, ob Sie den Quellcode erhalten, wenn die Zusammenarbeit endet.
4. **Wie wird gehostet und aktualisiert?** Fragen Sie, wie neue Astro-Versionen eingespielt werden und wer das übernimmt.
5. **Rät die Agentur auch ab?** Wer Astro für jedes Projekt empfiehlt, prüft Ihre Anforderungen vermutlich nicht genau.
6. **Wie werden Umzüge geplant?** Bei einer bestehenden Website gehören Weiterleitungen und eine Prüfung in der Search Console zu einer sauberen Umstellung.

## So arbeiten wir

Bei e-companion setzen wir Astro für Firmenwebsites, Kataloge, Portale und Storefronts ein. Einige Beispiele aus unseren Referenzen:

- **rechnerportal.net:** 45 interaktive Online-Rechner, jeder eine React-Island (`client:load` bzw. `client:visible`), in einem statisch ausgelieferten Astro-5-Frontend.
- **wattmeister.de:** Produktseiten für industrielle Batteriespeicher, statisch gebaut mit Astro 6, deren Inhalte typsicher in Datendateien liegen und per Git-Commit gepflegt werden.
- **reetro.com:** eine statische Astro-5-Storefront mit über 235 Produkten, die über GraphQL mit Magento 2 spricht; Warenkorb und Checkout sind React-Islands.
- **enerkomp.de:** der Firmenauftritt der enerkomp GmbH aus Nürnberg als statische Astro-5-Site mit EEG-Rechner, die die frühere WordPress-Installation abgelöst hat.

Der Code einer Website, gerade bei Astro, gehört dem Kunden und wird bei Kündigung des Webspace an ihn übergeben. Für ein Website-Projekt planen wir meist 2 bis 4 Wochen; wie lange es tatsächlich dauert, hängt stark davon ab, wann Texte, Bilder und Feedback vorliegen. Für Hosting & Domain berechnen wir ab 19 € monatlich. Mehr zu unserem Vorgehen steht auf der Seite [Astro-Agentur](/astro-agentur), für Unternehmen aus der Region auf der Seite [Webdesign Nürnberg](/webdesign-nuernberg).

## Häufige Fragen

### Was ist das Astro Framework?

Astro ist ein quelloffenes Web-Framework, mit dem Websites aus Komponenten und Inhalten entstehen. Es erzeugt standardmäßig beim Build fertiges HTML und lädt JavaScript nur für interaktive Bereiche. Nach aktuellem Stand (Oktober 2026) ist Astro 7 die aktuelle Hauptversion, laut Astro-Team weiterhin unter MIT-Lizenz.

### Ist Astro besser als React?

Die beiden lassen sich schwer direkt vergleichen. React ist eine Bibliothek für Benutzeroberflächen, Astro ein Framework für ganze Websites. In Astro können Sie React-Komponenten als interaktive Inseln verwenden. Für inhaltsgetriebene Seiten ist diese Kombination oft schlanker als eine reine React-Anwendung.

### Astro oder Next.js: was ist die bessere Wahl?

Für Websites mit vielen Inhalten und wenig Interaktion ist Astro meist die schlankere Wahl. Geht es um eine Anwendung mit Anmeldung, Auswertungen und vielen Eingaben im Browser, ist Next.js die naheliegende Wahl, das sich laut eigener Dokumentation als React-Framework für Full-Stack-Webanwendungen versteht. Beide lassen sich auch kombinieren, etwa Astro für Marketing-Seiten und Next.js für eine Storefront.

### Ist Astro kostenlos?

Ja. Astro ist laut Astro-Team Open Source unter MIT-Lizenz und bleibt das nach der Übernahme des Teams durch Cloudflare nach aktuellem Stand auch. Kosten entstehen für Entwicklung, Hosting und gegebenenfalls ein Headless-CMS.

### Kann man mit Astro einen Onlineshop bauen?

Ja, als Frontend vor einem Shopsystem. Astro übernimmt dann Produktseiten und Inhalte, während Warenkorb und Checkout als interaktive Inseln mit einem Backend wie Magento oder Shopware sprechen. Für einen Standardshop ohne eigene Storefront ist ein fertiges Shopsystem meist schneller am Ziel.

---
Quelle: https://e-companion.de/astro-framework-erklaert-vorteile-grenzen · e-companion UG, Oberasbach bei Nürnberg · Kontakt: https://e-companion.de/kontakt