Astro Server Islands: Tại sao đây là tương lai của personalization?
Server Islands là tính năng game-changer của Astro. Kết hợp static speed với dynamic personalization mà không cần hydration nặng nề.
Bạn muốn trang web load nhanh như Static Site (0.1s). Nhưng bạn cũng muốn hiển thị “Xin chào, Long” và “Giỏ hàng (3)” trên header.
Trước đây, bạn có 2 lựa chọn đau khổ:
- Dùng SSR hoàn toàn: Tắt cache, server phải render lại toàn bộ trang cho mỗi request. Chậm.
- Dùng Client-side JS: Load trang tĩnh, hiện loading spinner, rồi JS fetch API user. Layout shift (CLS), trải nghiệm giật cục.
Astro 4 giới thiệu Server Islands. Nó giải quyết vấn đề này một cách thiên tài.
Server Islands là gì?
Hãy tưởng tượng trang web của bạn là một hòn đảo tĩnh (Static Island) được cache trên CDN toàn cầu. Trên hòn đảo đó, có những “ốc đảo” nhỏ (Server Islands) là vùng đất dynamic.
Khi user request trang:
- CDN trả về ngay lập tức 95% nội dung tĩnh (Header, Footer, Content bài viết).
- Tại vị trí dynamic (Avatar user), nó hiển thị một placeholder (Skeleton loading).
- Song song đó, một request ngầm được gửi tới Server/Edge function để lấy nội dung Avatar.
- Khi có dữ liệu, nó tự động swap placeholder thành Avatar thật.
Tất cả diễn ra siêu nhanh, và quan trọng nhất: Server-side driven. Không cần Client-side React/Vue hydration.
Cách Implement
Sử dụng directive server:defer.
---
// src/pages/index.astro
import UserProfile from '../components/UserProfile.astro';
import CartStatus from '../components/CartStatus.astro';
---
<html>
<body>
<h1>Chào mừng đến với Shop</h1>
<!-- Phần này Static, load ngay lập tức -->
<main>
<ProductList />
</main>
<!-- Phần này Dynamic (Island), load bất đồng bộ -->
<UserProfile server:defer>
<div slot="fallback">Loading user...</div>
</UserProfile>
<CartStatus server:defer>
<div slot="fallback">Checking cart...</div>
</CartStatus>
</body>
</html>Component UserProfile.astro:
---
// Component này chạy trên Server (mỗi request)
const user = await db.getUser(Astro.cookies.get('session'));
---
<div class="user-profile">
<img src={user.avatar} />
<span>{user.name}</span>
</div>Tại sao nó tốt hơn Client-side Fetching?
- Zero JavaScript: Browser không cần tải library, không cần execute JS để fetch. Tiết kiệm main-thread, tốt cho thiết bị yếu.
- Database Access: Code trong Island chạy ở server, nên có thể query DB trực tiếp. Không cần expose public API endpoint.
- SEO & Performance: Google Bot vẫn có thể thấy content fallback hoặc đợi content thật (tùy config). LCP (Largest Contentful Paint) cực tốt vì phần lớn trang là static.
Use Cases
- E-commerce: Header cart count, giá sản phẩm theo region, gợi ý “Sản phẩm bạn vừa xem”.
- SaaS: User dashboard status, notification badge.
- News: Paywall status (check user đã sub chưa).
Kết luận
Server Islands đưa Astro vượt lên trên Next.js ở mảng content-driven sites cần personalization. Bạn có được tốc độ của SSG và sự linh hoạt của SSR.
Đã đến lúc quên đi useEffect để fetch profile user rồi.
Server Islands giải quyết vấn đề gì của Static Site?
Thử Thách Kiến Thức Lịch Sử?
Khám phá hàng trăm câu hỏi trắc nghiệm lịch sử thú vị tại HistoQuiz. Vừa học vừa chơi, nâng cao kiến thức ngay hôm nay!