自 React 誕生以來(lái)，它一直堅(jiān)持一個(gè)核心理念：UI = f(state)。這個(gè)公式簡(jiǎn)單直接，卻徹底改變了前端開發(fā)的方式，也帶動(dòng)了整個(gè)生態(tài)的成長(zhǎng)。回頭看 React 的發(fā)展，大致可以分成兩個(gè)階段：

• Class 組件：偏向面向?qū)ο?，生命周期方法多，寫起?lái)比較笨重。
• Hooks：帶來(lái)了函數(shù)式思維，把狀態(tài)和副作用處理變得輕量很多。

而如今，React 正迎來(lái)可能是 第三代形態(tài) —— React Server Components（RSC）。

這次不只是語(yǔ)法糖或 API 的改進(jìn)，而是一次架構(gòu)層面的升級(jí)。

RSC 從哪來(lái)？

它的雛形最早可以追溯到 2020 年，Meta 團(tuán)隊(duì)提出了一個(gè)設(shè)想：

把組件模型擴(kuò)展到網(wǎng)絡(luò)邊界，讓服務(wù)器和客戶端的職責(zé)劃分更自然。

不過(guò)，Meta 本身并沒(méi)有動(dòng)力獨(dú)立推進(jìn)這樣龐大的工程。自 2021 年起，Vercel 承擔(dān)起了主要的推動(dòng)角色：

• 在 Next.js App Router 中率先實(shí)踐 RSC。
• 推動(dòng)與 Actions、Transitions 等新特性逐步穩(wěn)定。
• 將成果擴(kuò)散到更廣泛的 React 生態(tài)。

到了 2025 年，除了 Next.js，Parcel、Vite 插件、React Router 等也陸續(xù)加入支持，RSC 生態(tài)正在發(fā)芽。

什么是 RSC？

RSC 的核心理念，是把組件劃分為兩類：

• Server Components（服務(wù)端組件）
• Client Components（客戶端組件）

通過(guò)分層執(zhí)行，實(shí)現(xiàn)高效渲染和職責(zé)清晰的分工。

服務(wù)端組件

• 運(yùn)行環(huán)境：只在服務(wù)器端執(zhí)行。
• 職責(zé)：

    直接訪問(wèn)數(shù)據(jù)庫(kù)、文件系統(tǒng)或 API。

     渲染結(jié)果以序列化形式（通常是 JSON）傳輸?shù)娇蛻舳恕?/p>

     不包含交互邏輯（例如 onClick）。

• 特點(diǎn)：

     零客戶端 JavaScript 開銷，不會(huì)被打包進(jìn)瀏覽器。

     天然支持異步數(shù)據(jù)獲取。

     一般命名為 .server.js 或 .server.tsx。

客戶端組件

• 運(yùn)行環(huán)境：在瀏覽器端執(zhí)行。
• 職責(zé)：處理用戶交互、管理狀態(tài)（如 useState、useEffect）、實(shí)現(xiàn)動(dòng)畫等動(dòng)態(tài)邏輯。
• 特點(diǎn)：

      需要在文件頂部加上 'use client' 指令。

      可以被服務(wù)端組件（Server Components）引用，但反過(guò)來(lái)不行。

      通常會(huì)以 .client.js 或 .client.tsx 作為文件后綴。

邊界規(guī)則

• 數(shù)據(jù)流向：數(shù)據(jù)始終是自上而下傳遞的。服務(wù)端組件可以渲染客戶端組件，并將數(shù)據(jù)通過(guò) props 傳入，但客戶端組件不能直接渲染服務(wù)端組件。
• 職責(zé)劃分：服務(wù)端組件負(fù)責(zé)靜態(tài)內(nèi)容和數(shù)據(jù)獲?。豢蛻舳私M件負(fù)責(zé)交互和動(dòng)態(tài)行為。兩者之間通過(guò) props 建立聯(lián)系。

RSC 工作原理

React Server Components 帶來(lái)了一種全新的渲染思路，它不是簡(jiǎn)單的服務(wù)端渲染（SSR），也不是傳統(tǒng)的客戶端渲染，而是把兩者融合在了一起。

首先，組件在服務(wù)器上運(yùn)行。Server Components 可以直接在服務(wù)端執(zhí)行數(shù)據(jù)請(qǐng)求，比如讀取數(shù)據(jù)庫(kù)或文件系統(tǒng)。React 會(huì)把組件樹“壓縮”成一種叫 Flight 協(xié)議 的特殊 JSON 描述，再把它傳遞給客戶端。

接下來(lái)是 流式傳輸。服務(wù)器生成數(shù)據(jù)的同時(shí)就能一點(diǎn)點(diǎn)發(fā)送過(guò)來(lái)，瀏覽器收到一部分就能先渲染一部分。如果某些組件還沒(méi)準(zhǔn)備好，React 可以配合 Suspense 展示友好的占位界面，讓頁(yè)面不會(huì)“卡死”。

到了客戶端，React 會(huì)把收到的 Flight 數(shù)據(jù)和本地的 Client Components 拼接在一起。Server Components 負(fù)責(zé)生成最終的 UI 結(jié)構(gòu)，而 Client Components 則負(fù)責(zé)事件綁定、狀態(tài)管理等交互邏輯，這個(gè)過(guò)程叫做 客戶端協(xié)調(diào)。

這種模式的一個(gè)最大好處就是 數(shù)據(jù)獲取變得極其簡(jiǎn)單。因?yàn)?Server Components 直接運(yùn)行在服務(wù)端，它們可以直接調(diào)用數(shù)據(jù)庫(kù)，不再需要額外的 API 層或復(fù)雜的數(shù)據(jù)請(qǐng)求邏輯。

RSC 優(yōu)勢(shì)

性能優(yōu)化

• 減輕客戶端負(fù)擔(dān)：Server Components 的邏輯只在服務(wù)器執(zhí)行，不會(huì)打包到瀏覽器里，瀏覽器下載的 JavaScript 更少。
• 減少請(qǐng)求次數(shù)：數(shù)據(jù)直接從服務(wù)器獲取，避免前端多次調(diào)用 API。
• 流式渲染：服務(wù)器可以邊生成邊傳輸，瀏覽器收到部分就能先渲染，首屏加載更快。
• 更輕量的 hydration：只有客戶端組件需要激活事件和狀態(tài)，瀏覽器運(yùn)行開銷更低。

開發(fā)體驗(yàn)

• 數(shù)據(jù)獲取更直觀：數(shù)據(jù)邏輯寫在組件里，不用前后端切換思路。
• 職責(zé)劃分明確：Server 組件負(fù)責(zé)靜態(tài)內(nèi)容和數(shù)據(jù)，Client 組件處理交互和動(dòng)態(tài)行為。
• 保留 React 風(fēng)格：依然是聲明式和組合式寫法，無(wú)需額外學(xué)習(xí)新語(yǔ)法。

架構(gòu)簡(jiǎn)化

• 減少中間層：Server Components 可以直接訪問(wèn)數(shù)據(jù)庫(kù)或文件系統(tǒng)。
• 邏輯復(fù)用方便：避免重復(fù)寫類似 getServerSideProps 的數(shù)據(jù)獲取邏輯。
• 天然 SEO 友好：生成的內(nèi)容本身就是可被搜索引擎索引的 HTML。

使用方式與實(shí)踐

目前，Next.js App Router 是最成熟的落地方案。

// app/page.js —— Server Component
import db from '@/lib/db';
import ClientCounter from './ClientCounter';

export default async function Page() {
  const posts = await db.getPosts();

  return (
    <div>
      <h1>Blog</h1>
      <ul>
        {posts.map(p => <li key={p.id}>{p.title}</li>)}
      </ul>
      <ClientCounter />
    </div>
  );
}

// app/ClientCounter.js —— Client Component
'use client';
import { useState } from 'react';

export default function ClientCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

特點(diǎn)：

• Page 是 Server Component，直接讀數(shù)據(jù)庫(kù)。
• ClientCounter 是 Client Component，負(fù)責(zé)交互。
• React 自動(dòng)完成兩者的邊界協(xié)調(diào)。

生態(tài)進(jìn)展

• 框架：Next.js 已全面支持；Remix、React Router 正在跟進(jìn)；Astro、Redwood 也在探索。
• 打包工具：Webpack 先行，Parcel 穩(wěn)定，Vite 插件在 2025 年正式推出。
• React 團(tuán)隊(duì)：持續(xù)完善 Suspense、use hook、Server Actions 等配套能力。

寫在最后

如果說(shuō) Class 組件 開啟了 React 的第一代，Hooks 定義了第二代，那么 React Server Components 很可能就是 第三代 React。

它不僅提升了性能和開發(fā)體驗(yàn)，更在潛移默化中，重塑了前后端的分工方式。

雖然目前生態(tài)還在早期，但隨著 Next.js、Vite、React Router 等的跟進(jìn)，RSC 正在成為 React 的新常態(tài)。

未來(lái)的 React 應(yīng)用，不再只是一個(gè)“前端框架”，而是更自然的 全棧開發(fā)模型。