Die Islands-Architektur (Insel-Architektur, von Jason Miller 2019 geprägt und durch das Framework Astro populär geworden) behandelt eine Webseite als Meer aus statischem HTML, in dem einzelne interaktive Komponenten als „Inseln“ herausragen. Jede Insel – etwa ein Karussell, ein Kommentar-Widget oder eine Vorschau-Suche – wird für sich geladen und hydriert, ohne dass die ganze Seite JavaScript benötigt.
Die Grundidee
Herkömmliche Frameworks bauen die Seite als eine monolithische Anwendung: Ein großes JavaScript-Bundle macht die gesamte Oberfläche interaktiv, auch wenn nur ein kleiner Teil wirklich reagieren muss. Die Islands-Architektur kehrt das um: Das Standard-HTML wird zur Buildzeit (oder je Anfrage auf dem Server) fertig gerendert und ausgeliefert. Interaktive Bausteine werden einzeln markiert und erhalten genau dann ihren eigenen kleinen JavaScript-Teil, wenn sie gebraucht werden – dies nennt man Partial Hydration.
Vorteile gegenüber monolithischen SPAs
- Die erste Seite ist schnell sichtbar, weil sie überwiegend aus statischem HTML besteht.
- Es wird nur das JavaScript geladen, das für sichtbare oder bald benötigte Interaktion nötig ist.
- Inseln können mit verschiedenen Frameworks gebaut werden (React, Vue, Svelte, Preact), die sich eine Seite teilen.
- Weniger Client-Logik bedeutet weniger Angriffsfläche und bessere SEO-Ausgangslage, da der Inhalt ohne Ausführung von Skripten lesbar ist.
Abgrenzung
Die Islands-Architektur ist ein Muster der Auslieferung, kein einzelnes Framework: Astro ist der bekannteste Vertreter, Preact und Qwik setzen ähnliche Ideen um. Sie eignet sich besonders für inhaltslastige Seiten wie Blogs, Doku-Portale oder Marketing-Seiten – weniger für Anwendungen, deren Oberfläche durchgehend interaktiv und zustandsreich ist (dort bleibt die Single Page Application naheliegend).
Verwandte Grundlagen: Partial Hydration, Hydration, Static-Site-Generation, Frontend, SPA.