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. Skip the theory — get patterns, code, and benchmarks that work.
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.
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
Master the architectural foundations: partial hydration lifecycles, hydration strategies (eager, lazy, progressive), performance benchmarking, and when islands outperform full hydration.
Explore section → ⚡Framework-Specific Islands & Streaming SSR
Deep dives into Astro client directives, Next.js App Router streaming with React Server Components, Qwik's resumable architecture, and SvelteKit component islands.
Explore section → 🔄Server-Client Boundaries & State Synchronization
Production patterns for prop passing across execution boundaries, event delegation before hydration completes, fallback UI strategies, optimistic updates, and sharing state across islands.
Explore section → 📊Islands Performance Optimization & Core Web Vitals
Measure and cut hydration cost: instrument LCP, INP and TBT, reduce per-island JavaScript payload, and benchmark Astro, Next.js, Qwik, SvelteKit, Marko and SolidStart head to head.
Explore section →Full Topic Index
Every guide on this site, organised by section. Click any title to jump straight in.
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