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

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

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

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

ServerComponent是什么

一句話(huà)概括：

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

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

相比SSR將組件在服務(wù)端渲染成填充內(nèi)容的HTML字符串，并在客戶(hù)端hydrate后使用。Server Components更像我們的在客戶(hù)端寫(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í)行用戶(hù)交互的交互組件。

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)被稱(chēng)為waterfall的問(wèn)題：

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

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

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

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

可以拆分為：在服務(wù)端運(yùn)行的容器組件和在客戶(hù)端運(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ù)腍TML字符串。ServerComponent會(huì)將Note組件及其從IO請(qǐng)求到的數(shù)據(jù)序列化為類(lèi)似JSX的數(shù)據(jù)結(jié)構(gòu)，以流的形式傳遞給前端：

客戶(hù)端在運(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作為一門(mén)使用模版語(yǔ)言的框架，模版語(yǔ)言的固定寫(xiě)法使其能在編譯時(shí)針對(duì)模版內(nèi)容作出優(yōu)化。

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

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

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)镾erverComponent。

// 注意🙋 
// 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ù)端，我們不需要客戶(hù)端的fetchData方法，可以直接訪問(wèn)數(shù)據(jù)庫(kù)，所以這里調(diào)用db.server提供的方法
3. NoteEditor用于展示及修改note。這是由客戶(hù)端用戶(hù)的交互控制的，所以將文件名改為NoteEditor.client代表這是個(gè)Client Component。

總結(jié)

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

隨著前端交互變復(fù)雜，出現(xiàn)了前端框架主導(dǎo)的客戶(hù)端渲染(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年吧。

參考資料
[1]視頻講解:https://www.youtube.com/watch?v=TQQPAU21ZUw

[2]Demo:https://github.com/pomber/server-components-demo/