Server Components 優先的開發節奏

App Router 很適合用 Server Components 當預設思考方式。資料讀取、版面組合、靜態內容,都可以先留在 server side,讓 client bundle 保持乾淨。

什麼時候才需要 "use client"

互動元件才獨立切出去,例如 theme toggle 需要用到 useTheme,所以它是 client component。這種切分方式能讓每個檔案的責任比較明確:

• 讀資料、組版面 → Server Component
• 需要 state、effect、事件互動 → Client Component

一個最小的例子:

export async function PostList() {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  )
}

之後接 DB 時,文章列表和文章詳細頁也會自然留在 server component,直接 await query,再把真正需要互動的元件拆小。