指南
Islands Architecture
A pattern where the page is mostly static HTML with specific interactive regions ('islands') hydrated with JavaScript only where needed.
发表于
目录
定义
A pattern where the page is mostly static HTML with specific interactive regions ('islands') hydrated with JavaScript only where needed.
Islands architecture minimizes JavaScript by rendering pages as static HTML and selectively hydrating only the interactive components.
How It Works
- Server renders full page as static HTML
- Interactive components marked for hydration
- Only those components load and execute JavaScript
- Static content remains static
Benefits
- Dramatically reduced JavaScript payloads
- Better Core Web Vitals
- Faster Time to Interactive
- Progressive enhancement by default
Frameworks
- Astro: Zero JS by default, opt-in hydration
- Marko: Automatic partial hydration
- Qwik: Resumability for instant interactivity
Use Cases
- Content-heavy sites
- Documentation
- Marketing pages
- Blogs and publications