React Server Components 實戰教學：Next.js RSC 完整指南

React Server Components 大概是這兩年來前端圈最熱門也最讓人困惑的話題了。我身邊不少開發者朋友到現在還搞不太清楚「什麼時候該用 Server Component，什麼時候該用 Client Component」。今天這篇文章，我想用最白話的方式把 RSC 講清楚。

為什麼需要 React Server Components？

在傳統的 React 架構中，所有的元件都在客戶端渲染。即使你用了 SSR，瀏覽器還是需要下載完整的 JavaScript bundle 來做 hydration。問題是，很多元件根本不需要互動性——一篇文章的內容、一個產品列表、一個使用者資料卡片——它們只是單純地顯示資料。

RSC 的核心理念是：既然這些元件不需要客戶端互動，那就讓它們完全在 server 端執行，不要把 JavaScript 送到瀏覽器去。

這帶來幾個巨大的好處：

客戶端 JavaScript 大幅減少（我自己的專案減少了 40% 以上）
可以直接在元件中存取資料庫、檔案系統
更快的首次載入速度
SEO 更友善

Server Component vs Client Component 的區別

在 Next.js App Router 中，預設所有元件都是 Server Component。只有在你加上 'use client' 指令的時候，它才會變成 Client Component。

// 這是 Server Component（預設）
async function ArticleList() {
  const articles = await db.article.findMany();
  return (
    <ul>
      {articles.map(a => <li key={a.id}>{a.title}</li>)}
    </ul>
  );
}

// 這是 Client Component
'use client';
function LikeButton({ articleId }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>❤️</button>;
}

老實說，這個心智模型一開始有點難適應，但用久了你會發現它非常合理。

RSC 中的資料取得模式

RSC 最美的地方就是資料取得變得超級直覺。你可以直接在元件中用 async/await：

async function UserProfile({ userId }) {
  const user = await fetch(`/api/users/${userId}`).then(r => r.json());
  const posts = await fetch(`/api/users/${userId}/posts`).then(r => r.json());
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
      <PostList posts={posts} />
    </div>
  );
}

不需要 useEffect、不需要 loading state 的管理、不需要 SWR 或 React Query。Server Component 會在 server 端完成所有資料取得，把結果直接送到客戶端。如果你正在用 Next.js，搭配 Next.js 快取策略教學中的快取機制，效能會更上一層樓。

組合模式：Server 與 Client 的搭配

一個常見的問題是：「如果我的頁面既有靜態內容又有互動元素怎麼辦？」答案是組合模式。

// page.tsx (Server Component)
async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  
  return (
    <div>
      <ProductInfo product={product} />  {/* Server */}
      <AddToCartButton productId={product.id} />  {/* Client */}
      <ProductReviews productId={product.id} />  {/* Server */}
    </div>
  );
}

Server Component 可以包含 Client Component，但反過來不行。你可以把 Server Component 當作 children 傳給 Client Component，這是一個很常用的 pattern。

Streaming 與 Suspense 整合

RSC 搭配 Suspense 可以實現 streaming 渲染，這對使用者體驗的提升是巨大的：

async function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<Skeleton />}>
        <SlowDataWidget />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <AnotherSlowWidget />
      </Suspense>
    </div>
  );
}

頁面會先送出已經準備好的部分，等慢的資料好了再 stream 進來。使用者不用盯著空白畫面等，這一點在做表單互動的時候也很重要，可以參考 React 19 表單處理教學的 useOptimistic 用法。

常見的 RSC 錯誤與陷阱

我自己踩過不少坑，這邊分享幾個最常見的：

錯誤 1：在 Server Component 中使用 hooks

Server Component 不能使用 useState、useEffect 等 hooks。如果你需要狀態管理，那個元件應該是 Client Component。

錯誤 2：把不需要互動的元件標記為 'use client'

很多人為了「安全起見」把所有元件都加上 'use client'，這完全違背了 RSC 的初衷。記住：能留在 server 端的就留在 server 端。

錯誤 3：序列化問題

Server Component 傳給 Client Component 的 props 必須是可序列化的。你不能傳函式、Date 物件或 class instance。

// ❌ 錯誤
<ClientComponent onSubmit={handleSubmit} date={new Date()} />

// ✅ 正確
<ClientComponent submitUrl="/api/submit" dateStr={date.toISOString()} />

效能實測：RSC vs 傳統 CSR

我在自己的部落格專案做過一次對比測試：

指標	傳統 CSR	RSC
首次載入 JS	287KB	163KB
LCP	2.4s	1.1s
TTI	3.2s	1.8s
FID	120ms	45ms

數字會說話。RSC 在每個核心 Web Vitals 指標上都有顯著的提升。

部署注意事項

在 Vercel 上部署 RSC 基本上是零配置。但如果你是自架主機，需要注意 Node.js runtime 的版本要求（建議 18.17+）和 streaming 的支援。搭配 Next.js View Transitions 教學中的頁面轉場，可以讓你的應用在效能和體驗上都達到頂級水準。

結語：RSC 是未來的方向

React Server Components 不是一個可選的實驗性功能，它已經是 React 和 Next.js 的核心架構。我建議每個前端開發者都應該花時間理解它的運作原理，越早適應這個模式，未來的開發效率就會越高。從今天開始，試著把你的元件預設為 Server Component，只在真正需要互動性的時候才切換到 Client Component 吧。