Chapter 59: Lazy Loading & Resource Scheduling

Progressive & Partial Hydration (Islands Architecture)

**Part 12: Performance & Optimization** — Chapter 59: Lazy Loading & Code Splitting

LEARNING OBJECTIVES ⌵
  • Understand the "Uncanny Valley" of monolithic SPA hydration.
  • Implement Islands Architecture (Astro, Fresh, Qwik).
  • Hydrate interactive components on-demand (client:visible, client:idle, client:media).
  • Send 0KB of JavaScript for static content pages while maintaining dynamic widgets.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story

In traditional Single Page Applications (React/Next.js/Vue), the entire page—including static footers, headers, paragraphs, and marketing copy—must be parsed, executed, and "hydrated" by JavaScript before any button becomes clickable. During this 2–4 second window, the site looks ready but is frozen!

Islands Architecture treats your HTML page as a calm ocean of pure, blazing-fast static HTML. Tiny dynamic widgets (an interactive pricing calculator, a live cart button) are isolated "islands" that hydrate independently only when they scroll into the user's viewport.

+--------------------------------------------------------------+
| PURE STATIC HTML (0 KB JS, Instant Render, 0ms TTI)          |
|                                                              |
|   [ Header & Navigation - Static HTML ]                      |
|                                                              |
|   +--------------------------------------------------------+ |
|   | 🏝️ ISLAND: Interactive Product Customizer               | |
|   |   Hydrated on viewport intersection (client:visible)   | |
|   +--------------------------------------------------------+ |
|                                                              |
|   [ Customer Testimonials & FAQ - Static HTML ]             |
|   [ Footer - Static HTML ]                                   |
+--------------------------------------------------------------+

📌 Key Takeaways

  • Islands architecture ships pure static HTML by default, drastically lowering Total Blocking Time (TBT).
  • Interactive widgets are hydrated lazily using client:visible via IntersectionObserver.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?