Astro 5 Islands Architecture 完整教學：靜態站點生成器比較與實戰指南 2026

什麼是 Islands Architecture？

說實話，第一次聽到「Islands Architecture（島嶼架構）」這個詞，我以為是某個地理課名詞，結果發現這是 2026 年前端圈最值得關注的架念之一。

Islands Architecture 的核心概念很直覺：一個網頁大部分都是靜態 HTML，只有少數幾個需要互動的地方才載入 JavaScript。這些「互動島嶼」各自獨立水合（hydrate），彼此不互相干擾。

想像你在看一篇部落格文章，文章本身是靜態的，不需要 JS。但頁面上有個「留言區」和「分享按鈕」需要互動。Islands Architecture 就是讓這兩塊各自按需載入 JS，而不是把整個頁面都打包進去。這概念最早由 Etsy 的 Katie Sylor-Miller 提出，後來 Jason Miller（Preact 作者）在 2020 年正式整理成架構思想。Astro 就是把這個概念實作得最徹底的框架，而且 Astro 5 又把它推進了一大步。

Astro 5 有什麼新東西？

Astro 5 在 2025 年底正式發布，帶來幾個讓我眼睛一亮的改進：

• Content Layer API：全新的內容架構，支援從任何資料來源（CMS、API、本地檔案）統一取用內容，型別安全大幅提升。
• Server Islands：這是最大亮點。原本 Islands 只支援客戶端水合，Astro 5 加入了 Server Islands，讓你可以在伺服器端動態渲染特定區塊（例如個人化推薦），其他部分維持靜態。
• Vite 6 整合：建置速度再提升，HMR 更穩定。
• View Transitions 2.0：頁面切換動畫更成熟，CSS View Transitions API 整合更深。
• astro:env：環境變數型別安全管理，再也不用怕 typo 導致 undefined。

Server Islands 是真正改變遊戲規則的功能。以前你只能選「要靜態還是要動態」，現在可以在同一個頁面裡混用，靜態部分走 CDN 快取，動態部分走伺服器，兩全其美。

局部水合（Partial Hydration）怎麼運作

Astro 的局部水合透過 client:* 指示詞控制。這個設計非常優雅：

---
import Counter from './Counter.jsx';
import HeavyChart from './HeavyChart.jsx';
import StaticCard from './StaticCard.astro';
---

<!-- 完全靜態，零 JS -->
<StaticCard />

<!-- 頁面載入時立即水合 -->
<Counter client:load />

<!-- 進入視口時才水合（懶載入）-->
<HeavyChart client:visible />

<!-- 瀏覽器閒置時才水合 -->
<Counter client:idle />

<!-- 只在符合 media query 時水合 -->
<MobileMenu client:media="(max-width: 768px)" />

client:visible 是我最常用的。頁面下方的圖表、留言區，使用者可能根本不會滑到那裡，為什麼要在頁面載入時就把 JS 全部下載？用 client:visible 搭配 Intersection Observer，只有真正進入視口才觸發水合，效果非常好。

Server Islands 的語法也類似，但用 server:defer：

---
import PersonalizedRecommendations from './Recommendations.astro';
---

<PersonalizedRecommendations server:defer>
  <div slot="fallback">載入推薦中...</div>
</PersonalizedRecommendations>

與 Next.js、SvelteKit、Nuxt 的比較

這是大家最關心的問題。我把幾個主流框架的特性整理一下：

Next.js 15 的 Partial Pre-rendering（PPR）概念上很像 Server Islands，但目前還在實驗階段。如果你的團隊已經深度投入 React 生態，Next.js 15 Server Actions 是很好的解法，特別是在處理複雜表單和伺服器端邏輯時，Server Actions 的 DX 相當順暢。

SvelteKit 在整體 bundle size 上已經很輕量，但它並沒有 Islands 的概念——整個頁面要嘛是 SSR，要嘛是 CSR，沒有細粒度控制。相比之下，Astro 5 在內容網站、部落格、行銷頁面這類場景幾乎無可匹敵。

什麼時候該選 Astro 5？

這個問題我被問過很多次，我的答案很直接。選 Astro 5 的情況：內容為主的網站（部落格、文件、行銷頁、電商商品頁）、SEO 是第一優先需要極快的 LCP 和 FID、團隊裡有不同框架偏好（Astro 可以同時用 React 和 Vue 的元件）、想要靜態優先但又需要部分動態內容。

不適合 Astro 的情況：高度互動的 Web App（如 Figma、Notion 這類複雜工具）、需要複雜全域狀態管理（Redux/Zustand 那種規模）、即時功能（WebSocket、即時協作）。

我自己的判斷標準是：如果頁面上超過 70% 的內容是靜態的，Astro 幾乎必選。如果需要大量客戶端互動，再考慮 Next.js 或 SvelteKit。

Astro 5 快速設定教學

實際動手來設定一個 Astro 5 專案：

# 建立新專案
npm create astro@latest my-astro-site

# 加入 React 整合（可選）
npx astro add react

# 啟動開發伺服器
npm run dev

設定 astro.config.mjs：

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'hybrid',
  adapter: vercel(),
  integrations: [react(), tailwind()],
});

建立一個使用 Islands 的頁面範例：

---
import Layout from '../layouts/Layout.astro';
import HeroSection from '../components/HeroSection.astro';
import InteractiveDemo from '../components/InteractiveDemo.jsx';
import NewsletterForm from '../components/NewsletterForm.jsx';
---

<Layout title="我的部落格">
  <HeroSection />
  <InteractiveDemo client:visible />
  <NewsletterForm client:idle />
</Layout>

Content Layer API 的用法（Astro 5 新功能）：

// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    publishDate: z.date(),
    author: z.string(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

順帶一提，Astro 的測試生態也在進步。搭配 Vitest 測試 來驗證元件邏輯，是我目前在 Astro 專案裡採用的組合。Vitest 的速度和 DX 都很好，兩者搭配相當自然。

效能優勢與實際數據

講這麼多理論，實際數字才說話。根據我在幾個真實專案裡的測量：

• JS Bundle Size：純靜態頁面基本上是 0KB JS。即使加了幾個 Islands，通常也不超過 20-30KB gzipped。對比 Next.js 的 React runtime 基本上就要 45KB+。
• LCP（最大內容渲染）：靜態頁面配合 CDN 通常能達到 1.0-1.5 秒，而 SSR 框架在冷啟動時可能要 2-3 秒。
• TTI（可互動時間）：由於大部分 JS 不需要載入，TTI 和 LCP 幾乎同步，這對 Core Web Vitals 評分幫助很大。
• Lighthouse 分數：我的 Astro 部落格在 Mobile 上穩定達到 95+ Performance 分數。

這些數字不是魔法，而是架構設計的必然結果。當你預設不送 JS，效能自然就好。

值得一提的是，如果你在 Astro 裡使用 React 元件，React Compiler 可以進一步優化這些 Islands 的重渲染效能，讓你不需要手動 memo 每個元件。兩者搭配在內容豐富但有互動需求的頁面上效果很好。

結論

Astro 5 的 Islands Architecture 不是噱頭，是真正解決了「內容網站不需要那麼多 JS」這個核心問題的架構方案。Server Islands 的加入讓它的適用範圍更廣，連部分動態需求也能優雅處理。

如果你在做部落格、文件站、行銷網站、電商型錄頁，2026 年我的第一推薦就是 Astro 5。學習曲線低，效能天花板高，多框架整合靈活，很難找到更好的選擇。

唯一的建議是：在用 Astro 之前，先想清楚你的頁面有多少比例需要客戶端互動。如果答案是「很多」，那 Astro 可能不是最適合的。但如果大部分都是內容展示，那就放心用，效果會讓你驚喜。