Astro Islands Architecture: Partial Hydration คืออะไร

Islands Architecture คืออะไร

Islands Architecture คือแนวคิดที่แบ่งหน้าเว็บออกเป็น 'เกาะ' ของ interactivity ท่ามกลาง 'ทะเล' ของ static HTML

ปัญหาของ Traditional SPA

Traditional SPA:
[JavaScript Bundle 500KB] → โหลดทั้งหมดก่อน → render

Astro Islands:
[Static HTML] + [Island 1: 5KB] + [Island 2: 10KB]
→ HTML แสดงทันที, Islands โหลดแยกกัน

Client Directives

---
import Counter from '../components/Counter.jsx';
import HeavyChart from '../components/HeavyChart.jsx';
import Tooltip from '../components/Tooltip.jsx';
---

<!-- โหลดและ hydrate ทันที -->
<Counter client:load />

<!-- โหลดเมื่อ browser idle -->
<HeavyChart client:idle />

<!-- โหลดเมื่อ element เข้า viewport -->
<HeavyChart client:visible />

<!-- โหลดเมื่อ media query match -->
<MobileMenu client:media="(max-width: 768px)" />

<!-- ไม่ hydrate เลย (static only) -->
<Tooltip client:only="react" />

ใช้ React Component ใน Astro

npx astro add react

---
import ReactCounter from '../components/Counter.tsx';
---

<!-- Static - ไม่มี JS -->
<ReactCounter />

<!-- Interactive - มี JS -->
<ReactCounter client:load />

ใช้ Vue Component

npx astro add vue

---
import VueComponent from '../components/MyComponent.vue';
---

<VueComponent client:visible />

ผลลัพธ์

หน้าเว็บปกติ (React SPA): ~300KB JS
หน้าเว็บ Astro + React Islands: ~15KB JS

Lighthouse Score:
- Performance: 98/100
- First Contentful Paint: 0.4s

สรุป

Islands Architecture ทำให้ได้ทั้ง performance ของ static site และ interactivity ของ SPA โดยโหลด JavaScript เฉพาะส่วนที่จำเป็นจริงๆ ครับ