12月21日，React團(tuán)隊(duì)公布了一個(gè)新的提案Server Components。

伴隨這個(gè)提案同時(shí)發(fā)出的，還有一個(gè)小時(shí)的視頻講解^[1]、可供運(yùn)行的Demo^[2]、詳盡的介紹。

點(diǎn)擊閱讀原文跳轉(zhuǎn)提案討論頁(yè)

可見(jiàn)，React團(tuán)隊(duì)很重視這個(gè)提案。本文會(huì)從如下方面講解：

• Server Components是什么

• Server Components解決了什么問(wèn)題

ServerComponent是什么

一句話概括：

Server Components是在服務(wù)端運(yùn)行的React組件。

咦？這和服務(wù)端渲染（SSR）有什么區(qū)別？

相比SSR將組件在服務(wù)端渲染成填充內(nèi)容的HTML字符串，并在客戶端hydrate后使用。Server Components更像我們的在客戶端寫(xiě)的普通組件一樣，只不過(guò)他的運(yùn)行環(huán)境是服務(wù)端。

我們可以將組件按照功能分為：

• 提供數(shù)據(jù)的容器組件

• 渲染數(shù)據(jù)并提供數(shù)據(jù)交互的交互組件

舉個(gè)例子，Note組件是容器組件，他負(fù)責(zé)請(qǐng)求并緩存數(shù)據(jù)。NoteEditor是渲染note數(shù)據(jù)并執(zhí)行用戶交互的交互組件。

function?Note(props)?{
??const?[note,?setNote]?=?useState(null);
??useEffect(()?=>?{
????fetchNote(props.id).then(noteData?=>?{
??????setNote(noteData);
????});
??},?[props.id]);
??
??if?(note?==?null)?{
????return?"Loading";
??}?else?{
????return?<NoteEditor?note={note}/>
??}
}

如例子所述，我們可以通過(guò)在useEffect中發(fā)起請(qǐng)求并將返回的數(shù)據(jù)保存在state中。

這種「請(qǐng)求-渲染」模式會(huì)遇見(jiàn)被稱為waterfall的問(wèn)題：

就像一節(jié)一節(jié)的瀑布往下流水，NoteEditor需要等待Note請(qǐng)求note成功后才能開(kāi)始渲染。

當(dāng)交互組件依賴的數(shù)據(jù)源越多，waterfall問(wèn)題會(huì)更明顯。

理論上，如果React足夠聰明，就能在服務(wù)端執(zhí)行容器組件的渲染邏輯，在客戶端執(zhí)行交互組件的渲染邏輯。

按照這樣的理念，如下這棵完全在客戶端渲染的組件樹(shù)：

可以拆分為：在服務(wù)端運(yùn)行的容器組件和在客戶端運(yùn)行的交互組件。

其中在服務(wù)端運(yùn)行的容器組件就是Server Component。

ServerComponent的意義

既然ServerComponent在服務(wù)端運(yùn)行，天然更接近各種IO（請(qǐng)求數(shù)據(jù)庫(kù)、讀取文件、緩存...）。

上面的例子完全可以直接從數(shù)據(jù)庫(kù)獲取note數(shù)據(jù)，同時(shí)借助Suspense，采用同步的寫(xiě)法。

function?Note(props)?{
??const?note?=?db.notes.get(props.id);
??if?(note?==?null)?{
????return?"Loading";
??}
??return?<NoteEditor?note={note}/>
}

天然更接近后端

任何其他數(shù)據(jù)源只需要通過(guò)React提供的API簡(jiǎn)單封裝，使其支持Suspense，就能接入ServerComponent中。天然更接近后端。

解決waterfall

區(qū)別于SSR傳輸?shù)?code style="padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(145, 109, 213);font-weight: bolder;background-image: none;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;">HTML字符串。ServerComponent會(huì)將Note組件及其從IO請(qǐng)求到的數(shù)據(jù)序列化為類似JSX的數(shù)據(jù)結(jié)構(gòu)，以流的形式傳遞給前端：

客戶端在運(yùn)行時(shí)直接獲取到填充了數(shù)據(jù)的流，并借助Concurrent Mode執(zhí)行流式渲染。

0打包體積

假設(shè)我們開(kāi)發(fā)一款MD編輯器。服務(wù)端傳遞給前端MD格式的字符串。

我們需要在前端引入將MD解析為HTML字符串的庫(kù)。這個(gè)庫(kù)就有206k。

import?marked?from?'marked';?//?35.9K?(11.2K?gzipped)
import?sanitizeHtml?from?'sanitize-html';?//?206K?(63.3K?gzipped)

function?NoteWithMarkdown({text})?{
??const?html?=?sanitizeHtml(marked(text));
??return?(/*?render?*/);
}

通過(guò)ServerComponent我們?cè)趺唇鉀Q這個(gè)問(wèn)題呢？

只需要簡(jiǎn)單將NoteWithMarkdown標(biāo)記為ServerComponent，將引入并解析MD這部分邏輯放在服務(wù)端執(zhí)行。

ServerComponent并不會(huì)增加前端項(xiàng)目打包體積。這個(gè)例子中，一次性為我們減少了前端206K (63.3K gzipped)的打包體積以及解析MD的時(shí)間。

自動(dòng)代碼分割

通過(guò)使用React.lazy可以實(shí)現(xiàn)組件的動(dòng)態(tài)import。之前，這需要我們?cè)谇袚Q組件/路由時(shí)手動(dòng)執(zhí)行。在ServerComponent中，都是自動(dòng)完成的。

在上面動(dòng)圖中，左側(cè)列表是ServerComponent，當(dāng)點(diǎn)擊其中卡片時(shí)，組件對(duì)應(yīng)數(shù)據(jù)會(huì)動(dòng)態(tài)加載。

更好的ahead-of-time (AOT)優(yōu)化

Vue作為一門使用模版語(yǔ)言的框架，模版語(yǔ)言的固定寫(xiě)法使其能在編譯時(shí)針對(duì)模版內(nèi)容作出優(yōu)化。

由于JSX僅僅是JS的語(yǔ)法糖，React很難在編譯時(shí)做出優(yōu)化。

ServerComponent對(duì)組件提出了更多限制（不能使用useState、useEffect...）。這些限制從側(cè)面為AOT提供更多優(yōu)化線索。

ServerComponent的使用

下面我們通過(guò)改寫(xiě)一個(gè)記事本組件講解ServerComponent的使用：

//?Note.js?

import?fetchData?from?'./fetchData';?
import?NoteEditor?from?'./NoteEditor';

function?Note(props)?{
??const?{id,?isEditing}?=?props;
??const?note?=?fetchData(id);
??
??return?(
????<div>
??????<h1>{note.title}h1>
??????<section>{note.body}section>
??????{isEditing?
??????????<NoteEditor?note={note}?/>
????????:?null
??????}
????div>
??);
}

Note組件的主要功能是根據(jù)props傳入的id請(qǐng)求對(duì)應(yīng)的note數(shù)據(jù)。

NoteEditor用于展示及修改note。

其中fetchData方法用于獲取數(shù)據(jù)，數(shù)據(jù)的加載中狀態(tài)由組件外的Suspense完成。

可以看到，交互部分由NoteEditor完成，Note主要功能是獲取并傳遞數(shù)據(jù)。

接下來(lái)我們將Note變?yōu)?code style="padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(145, 109, 213);font-weight: bolder;background-image: none;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;">ServerComponent。

//?注意??
//?Note.server.js?-?Server?Component

//?注意??
import?db?from?'db.server';?
//?注意??
import?NoteEditor?from?'./NoteEditor.client';

function?Note(props)?{
??const?{id,?isEditing}?=?props;
??const?note?=?db.posts.get(id);
??
??return?(
????<div>
??????<h1>{note.title}h1>
??????<section>{note.body}section>
??????{isEditing?
??????????<NoteEditor?note={note}?/>
????????:?null
??????}
????div>
??);
}

有3點(diǎn)需要注意的改動(dòng)，我們依次了解下：

1. Note.js文件名改為Note.server.js代表這是Server Component。

2. Note.server.js運(yùn)行于服務(wù)端，我們不需要客戶端的fetchData方法，可以直接訪問(wèn)數(shù)據(jù)庫(kù)，所以這里調(diào)用db.server提供的方法

3. NoteEditor用于展示及修改note。這是由客戶端用戶的交互控制的，所以將文件名改為NoteEditor.client代表這是個(gè)Client Component。

總結(jié)

太陽(yáng)底下沒(méi)有新鮮事。早期前端交互簡(jiǎn)單，僅僅作為服務(wù)端的View層。

隨著前端交互變復(fù)雜，出現(xiàn)了前端框架主導(dǎo)的客戶端渲染（CSR）。

為了解決首屏渲染速度、SEO問(wèn)題，出現(xiàn)了服務(wù)端渲染（SSR），又回到了曾經(jīng)作為View層的起點(diǎn)，只不過(guò)控制的粒度更細(xì)。

ServerComponent提案的出現(xiàn)，預(yù)示著React的長(zhǎng)遠(yuǎn)目標(biāo)：將對(duì)View層的控制細(xì)化到組件級(jí)別。

為什么是「長(zhǎng)遠(yuǎn)目標(biāo)」？ServerComponent落地的大前提是Concurrent Mode生產(chǎn)環(huán)境穩(wěn)定，讓我們一起期待2021年吧。

參考資料