Islands architecture
Trang chủ yếu là HTML tĩnh hoàn toàn không đi kèm JavaScript; chỉ các 'đảo' tương tác động mới tải mã nguồn và tiến hành hydrate độc lập.
Giải mã Kiến trúc đảo dưới góc nhìn Hiệu năng
Trong các ứng dụng Single Page Application (SPA) truyền thống, trình duyệt phải tải về một tệp JavaScript khổng lồ chứa toàn bộ logic của ứng dụng. Sau khi tải xong, trình duyệt cần phân tích cú pháp (parse), biên dịch (compile), thực thi mã nguồn đó và tiến hành hydrate (bơm tính tương tác) lên toàn bộ cây DOM. Quá trình hydrate đồng bộ này chiếm dụng Main Thread của trình duyệt rất lâu, dẫn đến các chỉ số đo lường trải nghiệm người dùng như Time to Interactive (TTI) và đặc biệt là Interaction to Next Paint (INP) bị suy giảm nghiêm trọng, đặc biệt trên các thiết bị di động có cấu hình trung bình hoặc thấp.
Islands Architecture (Kiến trúc đảo - được phổ biến bởi các framework hiện đại như Astro, Fresh, Marko) đảo ngược hoàn toàn tư duy này bằng cách tiếp cận 'HTML-first'. Trang web được render từ server chủ yếu dưới dạng HTML tĩnh và hoàn toàn không đi kèm bất kỳ tệp JS nào cho các phần tĩnh này. Trên 'đại dương HTML tĩnh' đó, các vùng thực sự cần tương tác động (như thanh tìm kiếm, giỏ hàng cập nhật thời gian thực, hoặc hộp chat) được nhúng vào dưới dạng các 'đảo' (Islands) cô lập. Mỗi đảo tự quản lý mã nguồn JS của riêng mình và được hydrate độc lập với các phần còn lại của trang.
VÌ SAOBằng cách loại bỏ JavaScript khỏi các phần tĩnh (chiếm đến 80-90% diện tích trang), kích thước bundle JS tải về giảm đáng kể. Điều này giúp tối ưu hóa tiến trình khởi động trang web và giải phóng Main Thread khỏi gánh nặng của hydration toàn cục.
NÊNHãy sử dụng Islands Architecture cho các trang web nặng về nội dung (Content-heavy sites) như trang tin tức, blog, tài liệu hướng dẫn kỹ thuật hoặc trang thương mại điện tử nơi tính tương tác chỉ tập trung vào một vài widget cụ thể.
MẸODo các đảo hoạt động hoàn toàn cô lập, một lỗi JavaScript phát sinh bên trong một đảo (ví dụ như widget thời tiết bị lỗi API) sẽ bị cô lập và không thể làm sụp đổ tính tương tác của các đảo khác hoặc làm treo toàn bộ trang web.