Build Faster with
Islands Architecture
& Streaming SSR
A practical, implementation-focused guide for frontend engineers, performance architects, and SaaS founders adopting partial hydration and streaming SSR at production scale. Eighty-plus guides covering hydration models, six frameworks, rendering and caching modes, hydration error diagnostics, and the accessibility of deferred activation.
Islands Architecture decouples static HTML delivery from JavaScript execution — enabling teams to ship interactive UIs with a fraction of the traditional hydration cost. Whether you're working with Astro, Next.js, Qwik, or SvelteKit, this site maps out the exact patterns, tradeoffs, and implementation steps you need.
From understanding partial hydration fundamentals to implementing Next.js App Router streaming and managing server-client state boundaries, every topic is grounded in real engineering decisions, complete code examples, and performance benchmarks verified against Core Web Vitals. Newer material covers static, server and incremental rendering modes, edge caching for streamed HTML, hydration error diagnostics, and the accessibility of deferred hydration.
Targeted at frontend and full-stack developers, performance engineers, framework maintainers, and SaaS founders who need to go beyond the basics and ship measurably faster applications.
Everything You Need to Know
Four comprehensive sections covering the full spectrum from architectural foundations and framework-specific implementations to state synchronisation and performance measurement.
Core Islands Architecture & Hydration Models
Architectural foundations: partial hydration lifecycles, activation strategies from eager to resumable, boundary design rules, rendering modes, and when islands outperform full hydration.
Explore section → ⚡Framework-Specific Islands & Streaming SSR
Deep dives into Astro client directives, Next.js App Router streaming, Qwik resumability, SvelteKit and SolidStart islands, Marko streaming, Fresh on Deno, and hand-rolled loaders.
Explore section → 🔄Server-Client Boundaries & State Synchronization
Production patterns for prop passing across execution boundaries, event delegation before hydration completes, fallback UI, optimistic updates, shared state, and hydration error diagnostics.
Explore section → 📊Islands Performance Optimization & Core Web Vitals
Measure and cut hydration cost: instrument LCP, INP and TBT, reduce per-island payload, cache and deliver at the edge, keep deferred activation accessible, and benchmark six frameworks head to head.
Explore section →Full Topic Index
Every guide on this site, organised by section. Click any title to jump straight in.
- Astro vs Qwik: Partial Hydration Trade-offs
- Islands Architecture vs Micro-Frontends: Boundary Management & Data Synchronization
- Islands Architecture vs React Server Components
- Progressive Enhancement in Modern Frameworks
- Rendering Modes for Islands: Static, Server, and Incremental
- Understanding Partial Hydration
- When to Use Islands vs Full Hydration
- Astro Islands and Client Directives
- Fresh and Deno Islands: Zero-Config Partial Hydration
- Marko Streaming & the Tags API
- Next.js App Router Streaming Patterns
- Qwik Resumable Architecture: Zero-Hydration Islands & Streaming SSR
- SolidStart Islands & Partial Hydration
- SvelteKit Component Islands: Hydration Boundaries, Streaming SSR & State Sync
- Vanilla Islands and Custom Loaders
Latest Guides
The most recent additions: rendering and delivery modes, two more framework models, diagnostics, and the accessibility of deferred activation.
Rendering Modes for Islands
Static, server and incremental rendering: where island props come from in each, and how caching interacts with personalisation.
Hydration Error Diagnostics
Classify the divergence, bisect to the component, and add the determinism test that stops it returning.
Edge Caching & Delivery
Cache keys that do not fragment, stale-while-revalidate for streamed HTML, and the proxy settings that kill flushing.
Accessibility of Deferred Hydration
The inert window, focus preservation across a mount, and announcing content that streams in late.
Fresh & Deno Islands
A directory as the island boundary, signals across the server-client line, and running with no required build step.
Vanilla Islands & Custom Loaders
Marker, module map and scheduler — the whole pattern in about a hundred lines, and when to stop hand-rolling it.
Featured Topics
Jump directly into the most implementation-critical guides.
Understanding Partial Hydration
Hydration lifecycle, JS chunk isolation, and scheduling strategies that keep main-thread blocking low.
Calculate Hydration Overhead in React
Profiling methods and formulas to quantify exactly how much hydration costs you.
Astro Islands & Client Directives
Zero-JS-by-default architecture, client:load vs client:visible, and cross-framework state isolation.
Next.js App Router Streaming
RSC Flight protocol, Suspense streaming checkpoints, and edge runtime configuration.
Qwik Resumable Architecture
Serialized execution context, zero-hydration startup, and symbol lazy-loading.
Cross-Boundary Prop Passing
Serialization contracts, dehydration schemas, and safe patterns for complex state handoffs.
Event Delegation & Pre-hydration
Global event queuing, capturing interactions before islands activate, and safe replay patterns.
Islands vs Micro-Frontends
Where component-level islands end and multi-team micro-frontend orchestration begins.
Measure INP in Islands Apps
Instrument Interaction to Next Paint with PerformanceObserver and web-vitals across independently hydrated islands.
Islands vs React Server Components
How the static-shell island model and the RSC Flight protocol differ on JS payload, TTI, and when to pick each.
Ready to optimise your hydration?
Start with the foundational concepts, then follow the framework-specific guides that match your stack.
🚀 Start with Core Architecture