第三課：Astro Islands —— 混合開發與互動性
核心觀念：預設 0 JS
Astro 就像一個「大洋」，預設所有組件都是靜態的 HTML（沒有 JS）。如果你需要互動（如：彈窗、購物車、即時搜尋），你就在大洋中丟入一個「孤島 (Island)」。這些孤島可以使用你喜歡的框架：React, Vue, Svelte 或 Preact。
1. 手把手實作：加入 React 框架
首先，我們需要讓 Astro 支援 React。請在終端機執行：npx astro add react(一律選 Yes，它會自動幫你修改 astro.config.mjs 並安裝依賴)
2. 手把手實作：建立一個互動組件
建立一個簡單的「按讚計數器」。 請建立 src/components/LikeButton.jsx：
import { useState } from 'react'
export default function LikeButton() {
const [likes, setLikes] = useState(0)
return (
<div
style={{ border: '1px solid #ccc', padding: '1rem', marginTop: '1rem' }}
>
<p>這篇文章對你有幫助嗎？</p>
<button onClick={() => setLikes(likes + 1)}>❤️ 點讚 ({likes})</button>
</div>
)
}
3. 核心關鍵：客戶端指令 (Client Directives)
這是 Astro 的靈魂。請在你的 src/pages/posts/[id].astro 裡匯入並使用它：
---
import { getCollection, render } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import LikeButton from '../../components/LikeButton.jsx'; // 匯入 React 組件
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map(post => ({
params: { id: post.id },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await render(post);
---
<BaseLayout pageTitle={post.data.title}>
<Content />
<hr />
{/* 重點就在這裡的 client:visible */}
<LikeButton client:visible />
</BaseLayout>
為什麼要寫 client:visible？
- 如果不寫指令：React 組件會被渲染成靜態 HTML，按鈕點了沒反應（性能最強，0 JS）。
client:load：頁面一載入就執行 JS。client:visible：當使用者捲動到這個按鈕時，瀏覽器才下載並執行該組件的 JS（極致優化）。
📝 第三課練習題
任務目標： 建立一個動態的「顯示/隱藏」詳細資訊組件。
- 使用你熟悉的框架（React, Vue 或純 JS 的
<script>標籤，建議練習 React）。 - 建立一個
DescriptionControl.jsx組件。 - 該組件預設只顯示一段文字的前 20 個字，點擊「閱讀更多」按鈕後才顯示完整內容。
- 將這個組件放在你的
about.astro頁面中。 - 實驗題： 試著在瀏覽器開發者工具 (F12) 的 Network 分頁觀察。當你使用
client:visible時，重新整理頁面，JS 檔案是否是在你「捲動到組件位置」時才出現？
第三課練習題實作放在下一篇 ( 我也是第一次學習，自己試作，不一定是對的喔👍 )
