Islands ≠ code splitting
They define independent client roots and leave other regions outside hydration.
Quick reference · Print-friendly
Client execution field guide
Compare replay scope, serialized state, loading granularity, and coordination cost.
Mechanism matrix
| Dimension | Whole-tree hydration | Islands | Resumability |
|---|---|---|---|
| Startup reconstruction | Replay rendered client tree | Replay explicit interactive roots | Read serialized graph/listener metadata |
| Lazy boundary | Developer chunks/components | Island plus trigger | Fine-grained symbols generated by tooling |
| State handoff | Serialized props/store, then replay | Per-root serialized props/store | Serializable state and captured references |
| Coordination | Shared tree/context is direct | Explicit cross-root channel | Serialized reactive graph and async code |
| Main risk | Eager CPU/code grows with tree | Boundary and shared-state complexity | Serialization, chunks, tooling, cold actions |
| Strong fit | Dense app-like interaction | Content page with sparse widgets | Large interaction graph needing deferred startup |
Selection algorithm
- Mark which regions need browser state, events, effects, or browser APIs.
- Estimate interaction density, urgency, and cross-region state sharing.
- Choose the smallest cohesive client roots and usable pre-hydration behavior.
- Choose load timing separately: immediate, idle, visible, media, or interaction.
- Audit transitive dependencies, duplicate runtimes, and serialized data.
- Measure startup CPU, evaluated code, first/repeat interaction latency, and no-JS behavior.
- Include server serialization, HTML metadata, cacheability, tooling, and team cost.
Interview corrections
Resume ≠ zero JS
A loader and demanded handlers still execute; eagerness and replay change.
Visible ≠ always late
Visibility can precede readiness. Match triggers to interaction urgency.
Fewer bytes ≠ faster action
Cold chunks and bad scheduling can regress the first interaction.