Astro (軟體框架)

Astro是一款基於JavaScript與TypeScript的現代化前端框架，專為構建高效能、以內容為中心的網站而設計。Astro是首個普及「群島架構」（Islands Architecture）的框架，大幅減少傳送到用戶端的JavaScript負擔，提升網頁的初始加載性能。此外，採「UI 無關」（UI-agnostic）的設計理念，允許開發者在同一個專案中自由並用React、Vue及Svelte等多種UI框架。

2026年1月，Cloudflare宣佈收購Astro Technology Company，Astro核心團隊全員加入Cloudflare。而Astro仍維持MIT 授權並保持獨立開源專案運作。

歷史
Astro由Fred K. Schott與Nate Moore等人於2021年發起。

隨著2025年專案規模迅速擴張，Astro成為該年度增長最快的Web框架之一。

版本演進
核心技術特色
群島架構 (Astro Islands)
這是 Astro 最具代表性的設計模式。在Astro中，大部分網頁內容在構建時會被渲染成靜態HTML，不帶任何JavaScript。

• 部分水合（Partial Hydration）：僅針對需要交互的組件（如搜索欄、選單）加載 JS。
• 延遲加載：可指定組件在進入視圖（client:visible）或瀏覽器空閒時（client:idle）才加載。

多框架並存
開發者可以在同一個 Astro 頁面中混用不同框架的組件：

import ReactCounter from '../components/ReactCounter.jsx';
import VueMenu from '../components/VueMenu.vue';
---

渲染模式
Astro 支持多種靈活的渲染策略：

• SSG（靜態網站生成）：預設模式，性能最佳，適合內容站點。
• SSR（伺服器端渲染）：適用於需要動態數據、身份驗證或個性化內容的應用。
• 混合渲染：允許在單一專案中針對不同路由選擇 SSG 或 SSR。

生態系統
Astro 提供豐富的官方集成方案，可透過指令（astro add）快速安裝：

• 適配器 (Adapters)：支持部署至Cloudflare、Vercel、Netlify及Node.js。
• 工具鏈：內置對Tailwind CSS、Sass、MDX及TypeScript的原生支持。

參考文獻
外部連結

• [https://astro.build Astro 官方網站]
• [https://github.com/withastro/astro Astro GitHub 儲存庫]
• [https://docs.astro.build Astro 官方文檔]