Islands-Architecture-Pattern
Senden Sie überwiegend statisches HTML aus und hydratisieren Sie nur interaktive Widgets, um die Time-to-Interactive zu optimieren.
Islands-Architecture-Pattern ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist die Islands-Architektur?
Die Islands-Architektur liefert größtenteils statisches HTML mit kleinen, unabhängig hydrierten interaktiven Bereichen (Islands) aus. Der größte Teil der Seite kommt ohne JavaScript aus; nur Widgets, die Interaktivität benötigen, werden zu React-Islands.
Das Problem, das sie löst
Traditionelles SSR hydriert die gesamte Seite, selbst wenn 90 % davon aus statischen Inhalten bestehen (Kopfbereiche, Text und Bilder). Islands hydrieren nur die interaktiven Teile und reduzieren dadurch das an den Browser gesendete JavaScript drastisch.
Grundkonzept
Stellen Sie sich die Seite als ein Meer aus statischem HTML mit darin treibenden Inseln der Interaktivität vor. Jede Insel wird unabhängig hydriert und kann bei Bedarf ein anderes Framework verwenden.
Astro als Islands-Framework
Astro hat die Islands-Architektur populär gemacht. Komponenten enthalten standardmäßig kein JavaScript. Fügen Sie eine client:*-Direktive hinzu, um die Hydration zu aktivieren.
---
import Header from './Header.astro'; // static — 0 JS
import SearchBar from './SearchBar.jsx'; // island — hydrated
import Footer from './Footer.astro'; // static — 0 JS
---
<Header />
<SearchBar client:load /> <!-- hydrate immediately -->
<SearchBar client:idle /> <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />Hydration-Direktiven
Islands-Frameworks bieten eine granular steuerbare Hydration: client:load (sofort), client:idle (requestIdleCallback), client:visible (IntersectionObserver), client:media (CSS-Media-Query).
Islands in Next.js implementieren
Der Next.js App Router bildet Islands durch die Aufteilung in Server Components und Client Components näherungsweise nach. Server Components = statisch; Client Components = Islands.
// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
const product = await getProduct();
return (
<article>
<h1>{product.name}</h1>
<p>{product.description}</p>
{/* Only the interactive button is a Client Component island */}
<AddToCartButton product={product} />
</article>
);
}Manuelle Islands mit React lazy
Ohne ein dediziertes Framework erreichen Sie Islands, indem Sie interaktive Komponenten erst nach dem Laden der Seite verzögert laden.
const HeavyWidget = lazy(() => import('./HeavyWidget'));
function Page() {
const [show, setShow] = useState(false);
const containerRef = useRef(null);
useEffect(() => {
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) setShow(true);
});
obs.observe(containerRef.current);
return () => obs.disconnect();
}, []);
return (
<div ref={containerRef}>
{show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
</div>
);
}Abwägungen
Vorteile: minimales JavaScript, schnelles TTI, statische Inhalte können aggressiv gecacht werden. Nachteile: Islands können ihren State nicht einfach gemeinsam nutzen (separate JavaScript-Kontexte), außerdem ist die Architektur komplexer als bei einer herkömmlichen SPA.
State zwischen Islands teilen
Verwenden Sie browsernative Mechanismen (Custom Events, URL, localStorage) oder einen kleinen gemeinsamen Store als Singleton, um zwischen unabhängigen Islands zu kommunizieren.
// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);
// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));Wann Sie die Islands-Architektur einsetzen sollten
Am besten geeignet für: inhaltsreiche Websites (Blogs, E-Commerce, Marketing), bei denen die meisten Inhalte statisch sind und nur wenige Komponenten Interaktivität benötigen (Suche, Warenkorb, Formulare).
Islands vs SSR vs SPA
SPA: vollständig JavaScript, hydriert alles. SSR: rendert auf dem Server und hydriert alles. Islands: rendert alles auf dem Server und hydriert nur interaktive Widgets. Für inhaltsorientierte Websites bieten Islands die beste Performance.
Kurzer Test
Was ist der wichtigste Performance-Vorteil des Islands-Architecture-Patterns?
Zusammenfassung
Die Islands-Architektur hält den Großteil des HTML statisch (ohne JavaScript) und hydriert nur interaktive Widgets. Verwenden Sie Astro als spezialisiertes Islands-Framework oder bilden Sie das Konzept mit Next.js Server Components und Client Components näherungsweise nach. Hydrieren Sie nicht kritische Islands verzögert mit client:visible/IntersectionObserver.
Häufig gestellte Fragen
Ist die Lektion „Islands-Architecture-Pattern“ kostenlos?
Ja — der vollständige Text von „Islands-Architecture-Pattern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Islands-Architecture-Pattern“?
Senden Sie überwiegend statisches HTML aus und hydratisieren Sie nur interaktive Widgets, um die Time-to-Interactive zu optimieren. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Islands-Architecture-Pattern“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- So funktioniert React SSR unter der Haube
- Hydration-Fehler: Ursachen und Lösungen
- Selektive Hydration und Streaming-HTML
- Islands-Architecture-Pattern