Islands-Architektur: Selektive Hydrierung

Die Islands-Architektur, die Jason Miller 2020 geprägt hat, betrachtet eine Webseite als überwiegend statisches HTML mit isolierten „Inseln“ der Interaktivität. Das statische HTML-Meer wird unverändert an den Browser gesendet. Nur die interaktiven Inseln laden JavaScript herunter und führen es aus, sodass die JavaScript-Menge proportional zur tatsächlichen Interaktivität ist.

Jede Island ist eine unabhängig hydratisierte Komponente. Der Server rendert das anfängliche HTML der Island zusammen mit dem Rest der Seite. Sobald das JavaScript der Island geladen ist, hydratisiert es nur den Teilbaum dieser Komponente. Das HTML rund um die Islands wird von JavaScript nie angefasst — es ist tatsächlich statisch.

Auf einer Blogartikelseite mit Islands-Architektur kann die JavaScript-Menge für eine einzelne Like-Button-Island 5 kB betragen. Dieselbe Seite, als React-SPA erstellt, könnte mehr als 200 kB JavaScript senden, um die gesamte Seite zu hydratisieren. Beim Islands-Ansatz ist die JavaScript-Menge proportional zur Interaktivität und nicht zur Seitengröße.

Astro, das führende Framework für die Islands-Architektur, unterstützt Islands, die auf derselben Seite mit unterschiedlichen Frameworks erstellt wurden. Sie können eine React-Island neben einer Vue-Island und einer Island mit Vanilla-JavaScript verwenden. Jede Island wird unabhängig gebündelt, sodass Benutzer nur den Framework-Code herunterladen, der von den sichtbaren Islands verwendet wird.

Die Direktive client:load hydratisiert die Island sofort beim Laden der Seite. Verwenden Sie sie für Islands, die sofort sichtbar und interaktiv sind, etwa ein Navigationsmenü oder einen Hero-Bereich mit einem Sucheingabefeld. Dies ist die Hydration-Strategie mit der höchsten Priorität.

Die Direktive client:idle wartet, bis der Hauptthread des Browsers untätig ist, also nachdem die kritischen Inhalte geladen wurden, und hydratisiert die Island erst dann. Dies eignet sich ideal für Widgets unterhalb des sichtbaren Bereichs oder sekundäre Interaktionen, die nicht sofort benötigt werden, etwa eine Leiste zum Teilen in sozialen Netzwerken.

Die Direktive client:visible verwendet einen Intersection Observer, um die Island erst zu hydratisieren, wenn sie in den sichtbaren Bereich gescrollt wird. Dies eignet sich ideal für Islands weiter unten auf der Seite — etwa einen Kommentarbereich oder ein Karussell mit ähnlichen Produkten — die viele Benutzer möglicherweise nie erreichen. JavaScript wird erst geladen, wenn es benötigt wird.

Die Direktive client:only überspringt das serverseitige Rendern vollständig und rendert die Island ausschließlich im Browser. Dies ist für Komponenten erforderlich, die browserabhängige APIs (window, document) verwenden oder beim Mounten vom clientseitigen Zustand abhängen. Der Nachteil besteht darin, dass für diese Island kein serverseitig gerendertes HTML vorhanden ist.

Die Islands-Architektur löst das Problem der vollständigen Hydration, indem JavaScript nur für tatsächlich interaktive Komponenten geladen und ausgeführt wird. Bei einem Blogartikel mit einem Like-Button wird nur die Like-Button-Island hydratisiert — der 1200 Wörter umfassende Artikeltext, der Header und der Footer verursachen auf dem Client keinerlei JavaScript-Ausführung.

Jede Island verfügt über einen eigenen isolierten Zustand. Islands können den React-Zustand nicht direkt gemeinsam nutzen, da sie separate React-Bäume sind. Dies ist beabsichtigt: Wenn zwei Komponenten einen Zustand gemeinsam nutzen müssen, sollten sie zu einer einzigen Island zusammengefasst werden. Die Kommunikation zwischen Islands erfolgt über URL-Parameter, DOM-Ereignisse oder leichtgewichtige State-Bibliotheken.

Websites, die von einer React-SPA zur Islands-Architektur migriert wurden, etwa die Astro-Dokumentationsseite, berichten von deutlichen Verbesserungen: Die JavaScript-Menge sinkt um 70–90 %, TTI verbessert sich auf Mobilgeräten um 2–4 Sekunden, und die Performance-Werte in Lighthouse steigen von Werten um 60 auf über 90. Die größten Vorteile zeigen sich bei inhaltsreichen Seiten.

Welche Astro-Hydration-Direktive hydriert eine Komponente erst, wenn sie in den sichtbaren Bereich gelangt?

Die Islands-Architektur hält den größten Teil der Seite als statisches HTML vor und hydriert nur isolierte interaktive Komponenten. Astro stellt Hydration-Direktiven bereit: client:load (sofort), client:idle (nach Eintritt des Leerlaufs), client:visible (beim Scrollen) und client:only (Rendering ausschließlich auf dem Client). Jedes Island wird unabhängig hydriert, sodass die Menge an JavaScript proportional zur Interaktivität und nicht zur Seitengröße ist.