第一階段：環境初始化與核心觀念
在開始前，必須理解 Astro 的靈魂：
MPA (Multi-Page Application) 與 Islands Architecture (孤島架構)。
Architecture[ˈɑrkəˌtɛktʃɚ]
1_建立專案
打開終端機，執行以下指令：
npm create astro@latest -- --template minimal
- 選擇
Yes安裝依賴。 - 選擇
Yes使用 TypeScript（強烈建議，這會讓你的開發體驗更紮實）。 - 進入資料夾後啟動開發伺服器：
npm run dev。
2_目錄結構與 .astro 檔案
Astro 檔案就像是「增強版的 HTML」。- Code Fence (---)：頂部兩條線之間寫 JavaScript/TypeScript，這部分只在構建時或服務器端執行，不會傳送到瀏覽器。
- Component Template：下方寫 HTML，可以使用變數。
- Styles：
- 1. 組件內局部樣式 (Scoped Styles) — 最推薦： 這是 Astro 的預設行為。寫在
<style>標籤內的 CSS 只會作用於該組件，不會影響到頁面上的其他元素。通常放在檔案的最底部。 - 2. 全域樣式 (Global Styles)
如果你希望在該組件中撰寫會影響到全站（或子組件）的樣式，可以使用is:global指令：<style is:global>
/* 這會影響到整個頁面的 body，而不僅限於此組件 */
body {
background-color: #f0f0f0;
}
``` /_ 也可以用來強制修改子組件的樣式 _/ .external-component .item {
padding: 10px;
}
</style>
- 1. 組件內局部樣式 (Scoped Styles) — 最推薦： 這是 Astro 的預設行為。寫在
- 3. 動態樣式 (CSS Variables)
如果你需要根據 Code Fence 裡的變數來決定樣式，可以使用define:vars：
---
const { bgColor = "red" } = Astro.props;
---
<div class="box">動態背景顏色</div>
<style define:vars={{ bgColor }}>
.box {
background-color: var(--bgColor); /* 使用來自 Code Fence 的變數 */
padding: 20px;
}
</style>
- 4. Sass / SCSS
Astro 內建支援 Sass / SCSS。如果你想用 SCSS，只需安裝套件（npm install -D sass）後，將標籤改為<style lang="scss">即可直接使用！ - Astro 完整內容
---
// 1. Code Fence (元件邏輯)：這裡寫伺服器端邏輯
const name = "Astro 學習者";
const items = ["性能", "彈性", "簡潔"];
---
<!-- 2. Component Template -->
<h1>你好，{name}！</h1>
<ul>
{items.map(item => <li>{item}</li>)}
</ul>
<!-- 3. Scoped Styles -->
<style>
.title {
color: purple; /* 這裡的樣式會被自動封裝 (Scoped) */
font-size: 2rem;
}
p {
color: gray;
}
</style>
第二階段：路由與佈局 (Layouts)
這部分是建立網站骨架的基礎。
1_基於檔案系統的路由
src/pages/index.astro ➜ your-site.com/src/pages/index.astro ➜ your-site.com/aboutsrc/pages/posts/[slug].astro ➜ 動態路由（如文章頁面）
2_建立共通佈局 (Layouts)
在 src/layouts/MainLayout.astro 建立一個外殼，使用 <slot /> 來插入子頁面內容：
---
const { title } = Astro.props;
---
<html lang="zh-TW">
<head><title>{title}</title></head>
<body>
<nav>導覽列</nav>
<main>
<slot /> </main>
</body>
</html>
第三階段：核心進階 - Content Layer API (Astro 5 重點)
Astro 5 最強大的功能就是處理內容。不要再手動讀取檔案了，請學習使用 Content Collections。
- 在
src/content/config.ts定義資料結構（Schema）。 - 將 Markdown 或 JSON 放在
src/content/blog/。 - 使用
getCollection()獲取資料。
這部分是 Astro 作為內容框架的靈魂，能自動幫你做型別檢查 (Type Safety)。
第四階段：孤島架構 (Islands) 與組件整合
這是 Astro 性能強大的原因：預設為 0 JavaScript。
如果你需要互動功能（如計數器、輪播圖），你可以整合 React/Vue/Svelte。
1_加入框架
npx astro add react2_使用客戶端指令 (Client Directives)
這是最紮實的概念：
<Component />：在伺服器渲染 HTML，無 JS。<Component client:load />：頁面載入時立即執行 JS。<Component client:visible />：滾動到該元件時才執行 JS（極力推薦，優化性能神招）。
第五階段：渲染模式與資料獲取
Astro 5 支援多種模式：
- SSG (Static Site Generation)：預設模式，快到極致。
- SSR (Server Side Rendering)：需要即時資料（如用戶登入）時使用。
- Server Islands：這是 v5 的新功能！允許你在靜態頁面中嵌入動態的伺服器組件。
📚 額外筆記
✅ SSG - Static Site Generation（靜態網站生成）
它是一種網頁生成方式，主要概念是 在建置階段（build time）就把網頁生成成靜態 HTML 文件，而不是每次使用者請求時才動態生成。
1️⃣ 工作流程
- 你有一些資料（例如 Markdown、API 或資料庫內容）。
- 在開發或部署時，SSG 工具（像是 Next.js、Nuxt.js、Astro、Gatsby 等）會把這些資料生成 HTML、CSS、JS。
- 使用者訪問網站時，直接拿到 已生成好的靜態頁面，不需要再向伺服器請求資料生成頁面。
2️⃣ 特點
- 快： 因為都是靜態頁面，瀏覽器直接載入 HTML。
- SEO 友好： 搜尋引擎可以直接讀到完整 HTML。
- 安全： 沒有伺服器端程式碼執行的風險。
- 可搭配 CDN： 靜態頁面可以直接放在 CDN，加速全球分發。
3️⃣ 常見工具
- Next.js →
getStaticProps/getStaticPaths - Nuxt.js →
nuxt generate` - Astro → 預設就是 SSG
- Gatsby → 專注於 SSG 的 React 框架
✅ SSR - Server-Side Rendering（伺服器端渲染）
是一種「網頁在伺服器先產生 HTML，再送到瀏覽器」的渲染方式。
SSR 在做什麼？
傳統 CSR（Client-Side Rendering）
- 瀏覽器先拿到一個幾乎是空的 HTML
- 再下載 JS
- JS 在瀏覽器執行
- JS 動態產生畫面
❌ 初始畫面慢
❌ SEO 不友善（搜尋引擎拿不到內容）
SSR（Server-Side Rendering）
- 使用者請求頁面
- 伺服器直接產生完整 HTML
- 瀏覽器一收到就顯示內容
- JS 再接手（Hydration）
✅ 首屏快
✅ SEO 友善
✅ 分享連結可直接看到內容
SSR 的流程圖
瀏覽器 → 請求頁面
↓
伺服器
↓
產生完整 HTML
↓
瀏覽器直接顯示畫面
↓
JS Hydration 接手互動
常見使用 SSR 的框架
- Astro （預設 SSG，也可 SSR）
- Next.js
- Nuxt
- Remix
- SvelteKit
Astro 裡的 SSR
Astro 預設是 SSG，之後章節可能會看到：
output: 'server'adapter-nodeadapter-vercelAstro.serverdefineAction()
👉 這些都代表你進入 SSR 模式
SSR 的優缺點
✅ 優點
- SEO 超友善
- 首頁載入快
- 適合部落格、電商、內容型網站
❌ 缺點
- 伺服器負擔較大
- 架構較複雜
- 需要部署在支援 Node / Serverless 的環境（如 Vercel）
