Bỏ qua điều hướng
chuanweb.com
Quay lại tất cả bài viết
#Astro #WebDev #SEO

Kiến trúc Islands trong Astro v5: cách tối ưu Core Web Vitals cho trang web hiện đại

chuanweb.com 2 phút đọc

Nhiều website hiện nay gửi xuống trình duyệt cả chục megabyte JavaScript chỉ để hiển thị vài khối giao diện động. Kết quả là LCP tụt, trang lâu tương tác và Google giảm thứ hạng. Kiến trúc Islands của Astro v5 giải quyết tận gốc vấn đề này: chỉ những thành phần thực sự cần tương tác mới được “thủy hóa” (hydrate), phần còn lại là HTML tĩnh tinh khiết.

Islands Architecture là gì?

Ý tưởng cốt lõi rất đơn giản: thay vì phát JavaScript cho toàn trang, bạn đánh dấu từng “hòn đảo” giao diện cần tính tương tác. Mỗi hòn đảo tự vận hành độc lập, còn toàn bộ phần còn lại vẫn là HTML tĩnh — nhanh, nhẹ và thân thiện với SEO.

Điểm khác biệt lớn với SPA: không có hydration toàn cục. Một trang 50KB HTML có thể chỉ kèm 5KB JS cho thanh tìm kiếm, trong khi cùng trang đó ở Next.js hay React SPA thường nặng 200KB JS trở lên.

Áp dụng vào thực tế

Giả sử bạn có một trang blog tĩnh với hai vùng tương tác: bộ lọc danh sách bài và form đăng ký nhận tin. Trong Astro v5, bạn viết như sau:

---
// src/pages/index.astro
import BlogFilter from '../components/BlogFilter.astro';
import Newsletter from '../components/Newsletter.astro';
---

<main>
  <h1>Blog của tôi</h1>
  <BlogFilter client:load />
  <!-- Các bài viết vẫn là HTML tĩnh, không tốn một byte JS -->
  <article>... nội dung bài 1 ...</article>
  <article>... nội dung bài 2 ...</article>
  <Newsletter client:visible />
</main>

Hai directive quan trọng:

  • client:load — thủy hóa ngay khi trang tải, phù hợp cho bộ lọc phải hoạt động liền tay.
  • client:visible — chỉ thủy hóa khi phần tử xuất hiện trong viewport, lý tưởng cho form nằm cuối trang.

Kết hợp tối ưu với View Transitions

Astro v5 hỗ trợ View Transitions nhẹ nhàng: chuyển trang không thu về toàn bộ JS, các hòn đảo vẫn giữ được trạng thái khi điều hướng. Kết quả là cảm giác “mượt như SPA” nhưng chi phí bằng trang tĩnh.

Kết luận

  • Islands Architecture cắt giảm JavaScript xuống mức tối thiểu, cải thiện trực tiếp LCP, TBT và CLS.
  • Chỉ dùng client:load khi thật cần; ưu tiên client:visible và client:idle để trải tải xuống.
  • Trang tĩnh + islands luôn thắng SPA về tốc độ khi nội dung là trọng tâm.

Hãy kiểm tra Lighthouse trước và sau khi áp dụng — chênh lệch điểm Performance thường rất đáng kể.