Astro Islands Architecture - Lazy Loading Tối Ưu

Astro Islands Architecture - Lazy Loading

Giới thiệu

Astro Islands (còn gọi là Astro Components hoặc Partial Hydration) là một kiến trúc độc đáo cho phép bạn tải JavaScript chỉ khi cần thiết. Thay vì hydrate toàn bộ trang như SPA truyền thống, Astro chỉ hydrate những component cần tương tác.

Cách hoạt động

Khi build, Astro tạo ra HTML tĩnh cho tất cả các component. JavaScript chỉ được tải cho các component có directive client:*.

src/pages/index.astro

---
import Header from '../components/Header.astro';
import StaticCard from '../components/StaticCard.astro';
import InteractiveButton from '../components/InteractiveButton.jsx';
---

<!-- ✅ HTML tĩnh - không JavaScript -->
<Header />
<StaticCard />

<!-- ✅ Chỉ hydrate khi cần -->
<InteractiveButton client:visible />

Các Directive Client

Astro cung cấp nhiều directive để kiểm soát khi nào component được hydrate:

Directive	Mô tả	Use Case
client:load	Hydrate ngay lập tức	Components cần ngay khi load
client:idle	Hydrate khi browser rảnh	Non-critical interactive components
client:visible	Hydrate khi scroll vào view	Lazy load components
client:media	Hydrate theo media query	Responsive components
client:only	Chỉ chạy ở client	Components không có SSR

Ví dụ chi tiết

---
import Counter from '../components/Counter.svelte';
import Newsletter from '../components/Newsletter.jsx';
import ChatWidget from '../components/ChatWidget.jsx';
import Analytics from '../components/Analytics.jsx';
---

<!-- Component quan trọng - load ngay -->
<Counter client:load />

<!-- Component cần thiết nhưng không gấp -->
<Newsletter client:idle />

<!-- Component dưới fold - chỉ khi user scroll tới -->
<ChatWidget client:visible />

<!-- Component chỉ chạy ở client (tránh SSR issues) -->
<Analytics client:only="react" />

So sánh hiệu suất

Không dùng Islands (SPA truyền thống)

⏱ Time to Interactive: 3.5s
📦 JS Bundle: 450KB
🔄 Full page hydration

Dùng Astro Islands

⏱ Time to Interactive: 0.8s
📦 JS Bundle: 45KB (chỉ component cần thiết)
⚡ Zero JS cho static content

Best Practices

1. Mặc định dùng .astro components

   • Không cần JavaScript → tốc độ nhanh nhất

2. Dùng client:visible cho components dưới fold

   • Tiết kiệm bandwidth và TTI

3. Tránh client:load nếu không cần thiết

   • Chỉ dùng cho above-the-fold interactive components

4. Kết hợp với Svelte/React/Vue

   • Chọn framework nhẹ nhất cho mỗi use case

Ví dụ thực tế với Svelte

src/pages/blog/[slug].astro

---
import PostContent from '../../components/PostContent.astro';
import LikeButton from '../../components/svelte/LikeButton.svelte';
import ShareButtons from '../../components/svelte/ShareButtons.svelte';
import Comments from '../../components/svelte/Comments.svelte';
---

<article>
  <PostContent />

  <!-- Like button - cần load ngay để user có thể tương tác -->
  <LikeButton client:load />

  <!-- Share - không gấp lắm -->
  <ShareButtons client:idle />

  <!-- Comments - chỉ khi user scroll tới -->
  <Comments client:visible />
</article>

Kết luận

Astro Islands là game-changer trong việc tối ưu performance. Bằng cách chỉ hydrate những gì cần thiết, bạn có thể đạt được:

• ⚡ TTI nhanh hơn 80% so với SPA truyền thống
• 📦 JS bundle nhỏ hơn 90%
• 🖥️ SEO tốt hơn với HTML tĩnh
• 🔄 DX tuyệt vời với framework bạn yêu thích

Hãy mặc định dùng .astro components và chỉ thêm JavaScript khi thực sự cần thiết!