Astro ist ein Web-Framework für inhaltsstarke Websites wie Blogs, Dokumentationen und Unternehmensseiten. Es erzeugt die Seiten als reines HTML und lädt JavaScript nur für die Teile, die wirklich interaktiv sein müssen.
- Astro
Ein Web-Framework, das Seiten als HTML ausliefert und JavaScript nur für ausgewählte interaktive Bereiche nachlädt.
Beispiel: „Seit wir die Dokumentation auf Astro umgestellt haben, lädt eine Seite fast kein JavaScript mehr.“Verwandt: Static Site Generator. Astro kann die ganze Website beim Bauen als statische Dateien erzeugen, Seiten aber auch auf dem Server rendern.
Abgrenzung zu Next.js: Next.js schickt für jede Seite React mit. Astro schickt für eine Seite ohne interaktive Teile gar kein JavaScript.
Die Insel-Architektur von Astro
Eine Seite besteht aus statischem HTML, in dem einzelne interaktive Inseln sitzen: ein Bildkarussell, ein Suchfeld, ein Warenkorb. Nur diese Inseln bekommen JavaScript, und jede lädt für sich, etwa erst dann, wenn sie in den sichtbaren Bereich scrollt.
Für die Inseln lässt sich fast jede Bibliothek verwenden, darunter React, Vue.js, Svelte und Preact, auf Wunsch auch gemischt auf derselben Seite.
Warum Astro schnell ist
Weil der Browser kaum Arbeit hat. Er bekommt fertiges HTML und CSS und muss für den Großteil der Seite kein Skript ausführen, bevor der Besucher lesen und klicken kann. Das schlägt sich in den Core Web Vitals nieder.
Der Ansatz geht davon aus, dass die meisten Websites im Kern Dokumente sind, die gelesen werden. Für sie ist das Rezept der großen JavaScript-Frameworks oft mehr, als die Aufgabe verlangt.
Wo Astro passt
Bei Blogs, Dokumentationen, Landingpages und Unternehmensseiten, deren Inhalte aus Markdown-Dateien oder einem Headless CMS kommen. Für Anwendungen mit viel Zustand hinter einem Login ist ein klassisches Framework näher an der Aufgabe.