Astro Islands: Kiến trúc 'Đảo' thay đổi cuộc chơi Frontend như thế nào?

Trong kỷ nguyên SPAs (Single Page Applications) với React/Vue, chúng ta thường gặp vấn đề Hydration. Toàn bộ trang web biến thành một cục Javascript khổng lồ, trình duyệt phải tải và thực thi hết đống đó thì người dùng mới tương tác được.

Astro ra đời và giải quyết vấn đề này bằng Islands Architecture (Kiến trúc Đảo).

Islands Architecture là gì?

Hãy tưởng tượng trang web của bạn là một đại dương tĩnh lặng (Static HTML). Trên đại dương đó, có vài hòn đảo (Components) nổi lên và có sự sống (Interactive Javascript).

• Đại dương (Static HTML): Header, Footer, Sidebar, Bài viết (Text/Image). Những phần này không cần Javascript để chạy. Astro render chúng thành HTML thuần túy. 0kB JS!
• Hòn đảo (Dynamic Components): Nút Like, Carousel ảnh, Form bình luận, Giỏ hàng. Chỉ những phần này mới cần Javascript/React/Vue load lên.

Cơ chế Partial Hydration

Astro sử dụng kỹ thuật Partial Hydration (Hydration từng phần). Thay vì hydrate cả trang, nó chỉ hydrate đúng những “hòn đảo” cần thiết.

Ví dụ: Bạn có một trang Blog dài.

• Nội dung bài viết: HTML tĩnh (Load cực nhanh).
• Thanh search ở Header: Là một Island (React component).

Khi user vào trang, họ thấy nội dung ngay lập tức (First Contentful Paint cực thấp). Javascript cho thanh search sẽ được tải song song hoặc lazy-load.

Các chỉ thị Client (Client Directives)

Astro cho phép bạn kiểm soát chính xác KHI NÀO một Island được load:

1. <Component client:load />: Load và hydrate ngay lập tức khi trang mở (VD: Navbar).
2. <Component client:idle />: Load khi trình duyệt rảnh rỗi (VD: Tracking analytics).
3. <Component client:visible />: Chỉ load khi user cuộn tới nó (VD: Footer, Comment section). Đây là game changer về hiệu năng!
4. <Component client:media="(max-width: 50em)" />: Chỉ load trên Mobile/Desktop.

Tại sao chọn Astro Islands?

1. Hiệu năng Performance: Điểm Google Lighthouse 100/100 là điều bình thường với Astro.
2. SEO: Google cực thích HTML tĩnh.
3. Linh hoạt: Bạn có thể dùng React cho cái Header, Vue cho cái Sidebar, và Svelte cho cái Footer trên CÙNG MỘT TRANG.

Kết luận

Islands Architecture đưa web trở về bản chất của nó: HTML first. Javascript chỉ là gia vị, không phải món chính. Nếu bạn làm Content Site, Blog, E-commerce, Marketing Site… Astro là lựa chọn số 1 hiện nay.

---

Tham khảo từ Astro Documentation.