Heldinhow/awesome-opencode-dev-skills

Astro 框架

概觀

Astro 是一個預設不向客戶端傳送任何 JavaScript 的網頁框架。它採用基於元件的架構，並在同一專案中支援多種前端框架（React、Vue、Svelte 等）。

流程

1. 專案設定

npm create astro@latest
# 選擇模板（部落格、文件、作品集等）
# 安裝依賴項

2. 建立頁面

• 頁面放置在 src/pages/ 中
• 基於檔案的路由
• 支援帶有 [param] 語法的動態路由

3. 元件

• 在 src/components/ 中建立可重複使用的元件
• 使用任何受支援的框架（--- astro/react/vue/svelte ---）
• 使用 Nano Stores 共享狀態

4. 資料與內容

• 使用內容集合（Content Collections）處理型別安全的 Markdown/MDX
• 在構建時使用 getStaticPaths 獲取資料
• 連線到資料庫、API、CMS

5. 部署

• 部署到 Vercel、Netlify、Cloudflare Pages 或任何適配器
• 使用 npm run build 構建
• 需要時可使用 output: 'server' 啟用 SSR

範例

• 部落格：內容集合 + Markdown + RSS 訂閱
• 著陸頁：靜態生成 + 部分水合（Partial Hydration）
• 文件網站：Starlight 主題整合
• 電子商務：SSR + 資料庫 + 付款整合

限制

• 不適用於高度互動的應用程式（請改用 Next.js）
• 若無 Nano Stores，客戶端狀態管理有限
• SSR 會增加複雜度——僅在需要時使用
• 某些 React 函式庫無法很好地與孤島架構（Island Architecture）配合使用