背景
2020.12.21 號， Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbåge 聯合釋出了一項 React 新功能：
React Server Components
並組織了一場專題演講：
Introducing Zero-Bundle-Size React Server Components。
地址： https://www.youtube.com/watch...
感興趣的同學可以去看看。
? 需要事先說明的是：
- React Server Components 仍在研發中。
- 本著透明的精神，分享這項工作，並期望從 React 社群獲得初步反饋。
- 以後會有很多時間去了解這個技術，現在只是初步瞭解就好， 不需要立即投入學習。
如果想系統的學習這項技術， 建議的學習路徑：
觀看演講視訊克隆演示demo，方便你探索React Server元件。閱讀 RFC（末尾帶有FAQ）以獲取更深入的技術故障並提供反饋。
OK， 廢話不多說， 我們一起去揭開RSC的神祕面紗吧。
本文主要內容：
RSC: 動機以及解決的問題RSC: 是什麼RSC: 0 打包體積RSC: 自動程式碼分割RSC: 天然接近後端Q & A
正文
首先，為什麼要做 RSC 呢？
一個新事物的出現一定是有原因的。
Dan Abramov 對此做了一些講解
先看軟體研發中的幾個原則：
- Good
- Cheap
- Fast
每一個頂點，都要受其他兩點的制約。
比如，我們既想要成本低， 又想快速完成開發， 那可能在一定程度上要犧牲產品的質量。
那如果我們都想要， 那該怎麼辦呢？
也就是要達到理想中的樣子：
比如， 我們有這樣一個頁面：
每一個頁面都需要用artistId 去做一些請求。
毫無疑問， 這將會產生大量的請求(瀑布請求)， 一定程度上增加了維護成本。
那這種犧牲維護成本的做法， 有沒有解決方案呢？
當然是有的， 它就是Relay + GraphQL。
### Relay + GraphQL
然而， 這個組合並不適用於所有的情況， 比如一些大型的公司或者專案， 不讓用或者不能用。
再次回顧我們的問題
我們的問題是， 如果元件如果同時發出請求， 會產生瀑布請求， 影響使用者體驗。
那如果， 這些請求是在返回客戶端之前就已經處理好了，就像達到使用 GraphQL 的效果一樣。
這樣問題不就迎刃而解了嗎？
具備這種能力的元件，也就是我們今天的主角： React Server Components.
能在服務端執行的React元件。
RSC 示例
如圖， App 中需要展示一個 NoteList:
列表程式碼：
不過有一句有需要注意：
import NoteList from './NoteList.client';Client Component 就是普通的 React 元件， 只不過是以.client結尾 。
目的是告訴 React：這個元件只在客戶端渲染。
程式碼如下圖：
如果想把sideBar 做成RSC元件， 只需要分別編寫對應的client 程式碼即可：
完整程式碼地址：
http://github.com/reactjs/ser...
感興趣的可以自己下載下來玩一下。
0 打包體積
比如， 我們要開發一款編輯器應用，引用了一些體積比較大的外部程式碼：
但是， 如果這部分做成RSC元件的話，就可以做到 0 體積打包：
為什麼呢？
因為這部分是server的程式碼， 並不會打包進來。
但前提是， 你需要規劃好那些是server元件， 哪些是客戶端元件。
自動程式碼分割
通過使用React.lazy可以實現元件的動態import。
之前，這需要我們在切換元件/路由時手動執行。在ServerComponent中，都是自動完成的。
在上面動圖中，左側列表是ServerComponent，當點選其中卡片時，元件對應資料會動態載入。
天然接近後端
這裡有一個react-fetch, 不光客戶端能跑， 服務端也能跑！
所以可以稱為shared component.
容器元件與互動元件
以前，我們的元件都是客戶端元件。
按照現在這個劃分，那在未來的 React 元件樹中， 一定會包含很多客戶端元件和服務端元件， 如圖：
這樣，就能很容易的在服務端執行容器元件的渲染邏輯， 在客戶端執行互動元件的渲染邏輯。
比如：
在服務端渲染ul中的內容， 而SearchInput 則負責在客戶端的互動。
幾個 React IO 庫
更多進展
Q & A
看到這， 我們的幾個疑問就有答案了：
- Q: Server Components是什麼：
A: 能在服務端執行的React元件。
- Q: Server Components解決了什麼問題?
A: Water Fall Requests.
- Q: Server Components 好在哪？
A: 0 打包體積， 天然接近後端， 自動程式碼分割。
- Q: 這和服務端渲染（SSR）有什麼區別？
A: 相比SSR將元件在服務端渲染成填充內容的HTML字串，並在客戶端hydrate後使用。
Server Components更像我們的在客戶端寫的普通元件一樣，只不過他的執行環境是服務端。
- Q: 現在需要上手嗎？
A：自己去玩demo吧先～
好了， 內容就這麼多， 已經深夜一點了， 晚安。
資料連結
關注我
如果你覺得這篇內容對你挺有啟發，那就關注我吧～
