Astro-Inseln

Astro hat eine Frontend-Architektur namens Islands (dt. „Inseln“) entwickelt und populär gemacht. Diese Inselarchitektur sorgt für eine bessere Frontend-Performance, indem sie monolithische JavaScript-Muster vermeidet und all das nicht benötigten JavaScript automatisch von der Seite entfernt. Entwickler können ihre bevorzugten UI-Komponenten und Frameworks mit Astro weiter verwenden und profitieren trotzdem von dessen Vorteilen.

Eine kurze Geschichte

Abschnitt betitelt Eine kurze Geschichte

Der Begriff „Komponenteninsel“ wurde erstmals 2019 von Etsy’s Frontend-Architektin Katie Sylor-Miller geprägt. Diese Idee wurde dann vom Preact-Erfinder Jason Miller am 11. August 2020 erweitert und in diesem Beitrag dokumentiert.

Die allgemeine Idee einer „Insel“-Architektur ist täuschend einfach: Man rendert HTML-Seiten auf dem Server und fügt Platzhalter oder Slots um hochdynamische Bereiche herum ein […], die dann auf dem Client in kleine, in sich geschlossene Widgets „hydriert“ werden können, die ihr vom Server gerendertes Ausgangs-HTML wiederverwenden.

• Jason Miller, Erfinder von Preact

Die Technik, auf der dieses Architekturmuster aufbaut, ist auch als partielle oder selektive Hydrierung bekannt.

Im Gegensatz dazu hydrieren und rendern die meisten JavaScript-basierten Web-Frameworks eine gesamte Website als eine große JavaScript-Anwendung (auch bekannt als Single-Page-Application oder SPA). SPAs sind einfach und leistungsstark, leiden aber aufgrund der starken Nutzung von JavaScript auf der Client-Seite unter Leistungsproblemen beim Laden der Seite.

SPAs haben ihren Platz, sogar eingebettet in eine Astro-Seite. Aber SPAs fehlt die Fähigkeit, selektiv und strategisch zu hydrieren, was sie für die meisten Projekte im Web heute zu einer schwerfälligen Wahl macht.

Astro wurde als erstes Mainstream-JavaScript-Webframework mit integrierter selektiver Hydrierung populär, indem es das von Sylor-Miller geprägte Muster der Komponenteninseln verwendet.

Was ist eine Astro-Insel?

Abschnitt betitelt Was ist eine Astro-Insel?

In Astro bezieht sich eine „Insel“ auf jede interaktive UI-Komponente auf der Seite. Stell dir eine Insel als ein interaktives Widget vor, das in einem Meer von ansonsten statischem, leichtgewichtigem, servergerendertem HTML schwimmt.

Header (interaktive Insel)

Sidebar (statisches HTML)

Statische Inhalte wie Text, Bilder, etc.

Bilder­karussell (interaktive Insel)

Footer (statisches HTML)

Quelle: Insel­architektur: Jason Miller

Eine Insel läuft immer isoliert von anderen Inseln auf der Seite, und es können mehrere Inseln auf einer Seite existieren. Die Inseln können dennoch ihren „State“ gemeinsam nutzen und miteinander kommunizieren, auch wenn sie in unterschiedlichen Komponenten­kontexten laufen.

Dank dieser Flexibilität kann Astro mehrere UI-Frameworks wie React, Preact, Svelte, Vue und SolidJS unterstützen. Da sie unabhängig voneinander sind, kannst du sogar mehrere Frameworks auf einer Seite mischen.

Tipp

Obwohl die meisten Entwickler nur ein UI-Framework verwenden, unterstützt Astro mehrere Frameworks im selben Projekt. Dies ermöglicht dir:

• Das Framework wählen, welches für jede Komponente am besten geeignet ist.
• Ein neues Framework erlernen, ohne ein neues Projekt beginnen zu müssen.
• Zusammenarbeit mit anderen Entwicklern, auch wenn ihr mit verschiedenen Frameworks arbeitet.
• Eine bestehende Website schrittweise und ohne Ausfallzeiten auf ein anderes Framework umstellen.

Eine Insel erstellen

Abschnitt betitelt Eine Insel erstellen

Standardmäßig rendert Astro automatisch jede UI-Komponente nur in HTML und CSS und entfernt automatisch alle clientseitigen JavaScript.

src/pages/index.astro

<MyReactComponent />

Das mag streng klingen, aber dieses Verhalten sorgt dafür, dass Astro-Websites standardmäßig schnell sind und schützt Entwickler davor, versehentlich unnötiges oder unerwünschtes JavaScript zu senden, das ihre Website verlangsamen könnte.

Um eine beliebige statische UI-Komponente in eine interaktive Insel zu verwandeln, brauchst du nur eine client:*-Direktive. Astro baut dann automatisch dein clientseitiges JavaScript auf und bündelt es für eine optimierte Leistung.

src/pages/index.astro

<!-- Diese Komponente ist jetzt interaktiv auf der Seite!
     Der Rest deiner Website bleibt statisch. -->
<MyReactComponent client:load />

Bei Inseln wird clientseitiges JavaScript nur für die expliziten interaktiven Komponenten geladen, die du mit client:*-Direktiven markierst.

Und weil die Interaktion auf Komponentenebene konfiguriert wird, kannst du für jede Komponente unterschiedliche Ladeprioritäten festlegen, je nachdem, wie sie genutzt wird. Zum Beispiel sagt client:idle, dass eine Komponente geladen werden soll, wenn der Browser inaktiv ist, und client:visible sagt, dass eine Komponente nur geladen werden soll, wenn sie in den Viewport eintritt.

Was sind die Vorteile der Inselarchitektur?

Abschnitt betitelt Was sind die Vorteile der Inselarchitektur?

Leistungsvorteile sind die offensichtlichsten Vorteile von Astro-Inseln: der Großteil deiner Website wird in schnelles, statisches HTML umgewandelt und JavaScript wird nur für die einzelnen Komponenten geladen, die es benötigen. JavaScript ist im Ladevorgang eine der langsamsten Ressourcen, daher zählt jedes Byte.

Ein weiterer Vorteil ist das parallele Laden von Astro-Inseln. Im Beispiel-Schaubild oben muss die Insel „Bilderkarussell“ mit niedriger Priorität nicht die Insel „Header“ mit hoher Priorität blockieren. Beide werden parallel und isoliert geladen, was bedeutet, dass der Header sofort interaktiv wird, ohne auf das umfangreichere Bilderkarussell weiter unten auf der Seite warten zu müssen.

Noch besser ist, dass du Astro genau anweisen kannst, wie und wann die einzelnen Komponenten gerendert werden sollen. Wenn das Bildkarussell sehr aufwendig zu laden ist, kannst du eine spezielle Client-Direktive hinzufügen, die Astro anweist, das Karussell nur zu laden, wenn es auf der Seite sichtbar wird. Wenn der Benutzer es nie sieht, wird es auch nicht geladen.

Es liegt also an dir als Entwickler, Astro mitzuteilen, welche Komponenten deiner Website im Browser interaktiv sein sollen. Astro wird nur genau das hydratisieren, was auf der Seite benötigt wird, und den Rest deiner Website als statisches HTML belassen.

Inseln sind das Geheimnis, mit dem Astro Websites standardmäßig schnell macht.