Was ist Islands Architecture?

Islands Architecture ist ein Frontend-Pattern, das den Großteil einer Seite als statisches HTML rendert und nur bestimmte interaktive Widgets als isolierte, hydratisierte Komponenten behandelt. Statt einer kompletten Single-Page-Application bekommt der Browser ein HTML-Meer mit kleinen JavaScript-Inseln. Für Storefronts ergibt das deutlich weniger Hydration und einen viel kleineren First-Party-JS-Footprint.

Definition

Frameworks wie Astro, Eleventy mit Is-land, Fresh auf Deno und das Marko-Ökosystem haben das Pattern popularisiert, ähnliche Konzepte stecken in Qwiks Resumability sowie im RSC-/Client-Components-Split von React. Der Renderer erzeugt HTML für die gesamte Seite und emittiert Hydration-Skripte nur für Komponenten, die explizit als interaktiv markiert sind - per client:idle, client:visible oder client:media. Jede Island hydratisiert unabhängig, kann ein beliebiges Framework (React, Vue, Svelte, Solid) nutzen und vermeidet die globalen Hydration-Kosten, die eine typische SPA beim ersten Load zahlt.

Warum es zählt

Auf Commerce-Sites ist der größte Teil des Markups pro Session statisch: Header, Footer, Breadcrumbs, Hero, Copyblöcke, Kategorietexte, SEO-Content. Wirklich interaktiv müssen nur Add-to-Cart, Variantenwahl, Mini-Cart und Filter sein. Islands bilden genau diese Realität ab und übersetzen sie in messbare Gewinne bei INP und Time-to-Interactive. Performance-Budgets werden planbar, weil die Kosten jeder Island sichtbar und begrenzt sind. CLS verbessert sich ebenfalls, weil statisches Markup vollständig ausgeliefert wird und nur Islands sich in reservierten Containern verändern.

Anwendungsfälle

Redaktionsstarke Bereiche einer headless-commerce-Storefront - landing-page-Funnel, Brand-Pages, Blog, Helpcenter - sind ideale Kandidaten für Islands Architecture auf Astro oder Fresh. In Kombination mit einem content-management-system-cms wie Hygraph oder Sanity und Deployments auf Cloudflare Pages, Netlify oder Vercel werden Core Web Vitals nahezu out of the box grün. Für tiefere Commerce-Flows kapselt man Mini-Cart, Currency-Switcher, Search-Overlay und recommendation-engine-Widgets als Islands, der Rest bleibt statisch. Das Pattern ist außerdem ein natürlicher nächster Schritt für Teams, die React Server Components nutzen, weil RSC dieselbe Idee innerhalb von React formalisiert.

Verwandt

Mehr dazu: Composable Headless Frontend · Performance and Core Web Vitals.