React Server Components 完整實戰教學:2026 年 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 吧。
繼續閱讀
React Signals 是什麼?2026 年最值得關注的前端狀態管理新方案完整解析
相關文章
React Signals 是什麼?2026 年最值得關注的前端狀態管理新方案完整解析
深入解析 React Signals 狀態管理方案,與 Zustand、Redux 效能比較,含實作範例與遷移指南。
React 19 useActionState 完整教學:搭配 useOptimistic 與 Server Actions 打造流暢表單體驗
React 19 的 useActionState 讓表單狀態管理變得超簡單,搭配 useOptimistic 還能實現即時 UI 回饋。這篇教學帶你從基礎用法到搭配 Server Actions 的完整實戰,用更少程式碼打造流暢表單體驗。
你可能也喜歡
探索其他領域的精選好文