Astro - 基礎入門3. Islands Architecture (孤島架構)

第三課：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 檔案是否是在你「捲動到組件位置」時才出現？

第三課練習題實作放在下一篇 ( 我也是第一次學習，自己試作，不一定是對的喔👍 )