Astro Islands (Islands Architecture): Bí mật đằng sau tốc độ của Astro

Trong thế giới frontend, chúng ta thường nghe về SPA (Single Page Application) với React, Vue, Angular. Chúng rất mạnh mẽ nhưng đi kèm cái giá phải trả: JavaScript quá nhiều.

Astro ra đời với một triết lý hoàn toàn khác: Islands Architecture (Kiến trúc Đảo).

Vấn đề của SPA truyền thống

Khi bạn tải một trang web bằng Next.js hay React thông thường, trình duyệt phải tải một cục JavaScript khổng lồ (Bundle) để “Hydrate” toàn bộ trang web, biến nó từ HTML tĩnh thành ứng dụng tương tác. Dù người dùng chỉ cần click vào một nút nhỏ, họ vẫn phải tải code JS của cả cái Header, Footer, và các thành phần không cần tương tác khác.

Tại sao phải tải code JS cho một cái Footer tĩnh chỉ chứa text?

Giải pháp: Astro Islands

Hãy tưởng tượng trang web của bạn là một đại dương HTML tĩnh (nhẹ, nhanh, chuẩn SEO). Trên đại dương đó, nổi lên vài hòn đảo tương tác (Interactive Islands).

• Đại dương (Static HTML): Header, Footer, Sidebar, nội dung bài viết. -> 0kB JavaScript.
• Hòn đảo (Islands): Thanh tìm kiếm, Nút like, Slider ảnh carousel. -> Chỉ tải JS cho đúng phần này.

Cơ chế hoạt động

Astro mặc định render tất cả thành HTML tĩnh (Zero JS). Khi bạn cần một component React (hoặc Vue/Svelte) có tính tương tác, bạn dùng chỉ thị client:*.

---
import Header from './Header.astro'; // Tĩnh hoàn toàn
import SearchBar from './SearchBar.jsx'; // Component React
---

<Header /> <!-- 0 JS -->

<!-- Chỉ tải JS khi component này hiển thị trên màn hình -->
<SearchBar client:visible />

Các chiến lược Hydration

1. client:load: Tải JS ngay khi trang load (cho các phần tử quan trọng ngay đầu trang).
2. client:idle: Tải JS khi trình duyệt rảnh (lúc user chưa làm gì).
3. client:visible: Chỉ tải JS khi user cuộn chuột tới component đó (Lazy load xịn xò).
4. client:media: Tải JS tùy theo kích thước màn hình (VD: Chỉ tải Sidebar menu trên Mobile).

Kết quả thực tế

Chuyển đổi một blog từ Next.js sang Astro có thể giúp giảm 90% lượng JavaScript gửi xuống client. Điều này dẫn đến:

• Điểm Lighthouse đạt 100/100 dễ dàng.
• FCP (First Contentful Paint) cực nhanh.
• TTI (Time to Interactive) gần như tức thì.

Nếu bạn đang xây dựng Content-website (Blog, News, Landing Page), Astro + Islands Architecture là lựa chọn số 1 thời điểm hiện tại.