背景
2020.12.21 號， Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbåge 聯合發佈了一項 React 新功能： react
React Server Componentsgit
並組織了一場專題演講：github
Introducing Zero-Bundle-Size React Server Components。面試
地址： https://www.youtube.com/watch...後端
感興趣的同窗能夠去看看。緩存
🌟 須要事先說明的是：less
- React Server Components 仍在研發中。
- 本着透明的精神，分享這項工做，並指望從 React 社區得到初步反饋。
- 之後會有不少時間去了解這個技術，如今只是初步瞭解就好， 不須要當即投入學習。
若是想系統的學習這項技術， 建議的學習路徑：編輯器
觀看演講視頻克隆演示demo，方便你探索React Server組件。閱讀 RFC（末尾帶有FAQ）以獲取更深刻的技術故障並提供反饋。
OK， 廢話很少說， 咱們一塊兒去揭開RSC的神祕面紗吧。ide
本文主要內容：學習
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吧先～
好了， 內容就這麼多， 已經深夜一點了， 晚安。
資料連接
關注我
若是你以爲這篇內容對你挺有啓發，那就關注我吧～
更多精彩：
聊聊 ESM、Bundleless 、Vite 、Snowpack
本文同步分享在 博客「皮小蛋」（SegmentFault）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。