Astro-Inseln

Astro-Inseln (auch bekannt als Komponenteninseln) sind ein Konzept der Webarchitektur, das von Astro entwickelt wurde. Die Idee der „Inselarchitektur” wurde erstmals von der Frontend-Architektin von Etsy Katie Sylor-Miller im Jahr 2019 geprägt und in diesem Beitrag von Preact-Erfinder Jason Miller erweitert.

Was ist eine Astro-Insel?

Abschnitt betitelt Was ist eine Astro-Insel?

Der Begriff „Astro-Insel” bezieht sich auf eine interaktive UI-Komponente auf einer ansonsten statischen HTML-Seite. Eine Seite kann mehrere Inseln beinhalten, jede Insel wird jedoch separat gerendert. Du kannst dir Astro-Inseln also als Inseln in einem Meer von statischem HTML vorstellen.

Header (interaktive Insel)

Sidebar (statisches HTML)

Statische Inhalte wie Text, Bilder, etc.

Bilder­karussell (interaktive Insel)

Footer (statisches HTML)

Quelle: Insel­architektur: Jason Miller

In Astro kannst du jedes integrierte UI-Framework (React, Svelte, Vue, usw.) verwenden, um Inseln im Browser zu rendern. Du kannst dabei auf derselben Seite unterschiedliche Frameworks mischen oder nur deinen Favoriten einsetzen.

Die Technik, auf der Astro-Inseln basieren, ist als partielle oder selektive Hydratation bekannt. Astro automatisiert diese Technik, damit du dich komplett auf die Entwicklung deiner Inseln fokussieren kannst.

Wie funktionieren Astro-Inseln?

Abschnitt betitelt Wie funktionieren Astro-Inseln?

Astro erzeugt jede Website standardmäßig komplett ohne clientseitigen JavaScript-Code. Du kannst Komponenten verwenden, die mit den UI-Frameworks React, Preact, Svelte, Vue, SolidJS, AlpineJS oder Lit erstellt wurden, und Astro wird diese während des Buildvorgangs in reinen HTML-Code umwandeln („rendern”) und den JavaScript-Code entfernen. So bleibt jede Astro-Website standardmäßig schnell.

src/pages/index.astro

---
// Beispiel: Verwende eine statische React-Komponente auf der Seite,
// ohne JavaScript-Code auszuliefern.
import MeineReactKomponente from '../components/MeineReactKomponente.jsx';
---
<!-- 100% HTML, kein JavaScript! -->
<MeineReactKomponente />

Manchmal ist es aber erforderlich, Benutzeroberflächen mittels clientseitigem JavaScript interaktiv zu machen. Falls du solche Interaktivität auf deiner Seite benötigst, zwingt Astro dich nicht dazu, gleich die gesamte Seite mit JavaScript zu rendern, sondern erlaubt dir die Einbindung einer interaktiven Insel.

src/pages/index.astro

---
// Beispiel: Verwende eine dynamische React-Komponente auf der Seite.
import MeineReactKomponente from '../components/MeineReactKomponente.jsx';
---
<!-- Diese Komponente auf der Seite ist nun interaktiv!
     Der Rest deiner Website bleibt statisch und ohne JS. -->
<MeineReactKomponente client:load />

Mit Astro-Inseln bleibt der Großteil deiner Website reines, leichtgewichtiges HTML & CSS. Im obigen Beispiel hast du lediglich eine einzelne, isolierte Insel der Interaktivität eingebunden, ohne den Rest der Seite zu verändern.

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 (EN) 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.