Astro 5.2 Server Islands 实战：混合静态 + 动态

一句话结论：Server Islands 让 Astro 兼顾"静态站点的速度" + "动态内容的实时性"。

核心概念

传统 SSR：整页动态生成
静态站点：整页预构建，无动态
Server Islands：整页静态 + 岛屿级动态

4 个实战场景

场景 1：电商首页

---
// pages/index.astro
import ProductCard from '../components/ProductCard.astro';  // 静态
import CartButton from '../components/CartButton.astro';    // 岛屿
import UserMenu from '../components/UserMenu.astro';        // 岛屿
---

<Layout>
  <Hero />  <!-- 静态 -->
  <ProductCard />  <!-- 静态 -->
  <CartButton server:defer>  <!-- 岛屿 -->
    <CartFallback />  <!-- 加载占位 -->
  </CartButton>
  <UserMenu server:defer>  <!-- 岛屿 -->
    <UserFallback />  <!-- 加载占位 -->
  </UserMenu>
</Layout>

场景 2：博客 + 评论

<!-- 整页静态预构建 -->
<PostLayout>
  <Article />  <!-- 静态 -->
  <Comments server:defer>
    <CommentsFallback />
  </Comments>  <!-- 岛屿，实时拉取 -->
</PostLayout>

场景 3：仪表盘

<!-- 静态导航 + 动态数据 -->
<Dashboard>
  <Nav />  <!-- 静态 -->
  <Stats server:defer>
    <StatsFallback />
  </Stats>  <!-- 岛屿 -->
</Dashboard>

场景 4：博客列表 + 搜索

<!-- 列表静态 + 搜索框动态 -->
<Archive>
  <PostList posts={allPosts} />  <!-- 静态 -->
  <SearchBox server:defer>
    <SearchFallback />
  </SearchBox>  <!-- 岛屿 -->
</Archive>

优势

对比三种渲染方式：

| 方式 | 首屏 | SEO | 实时性 | 部署 |
|------|------|-----|--------|------|
| 纯静态 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ❌ | ⭐⭐⭐⭐⭐ |
| 纯 SSR | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| Server Islands | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |

何时用 Server Islands

✅ 适合

• 80% 静态 + 20% 动态
• SEO 重要
• 性能要求高

❌ 不适合

• 100% 动态（直接用 Next.js RSC）
• 100% 静态（不需要）

参考

• Astro Server Islands 文档

本文基于 Astro 5.2。