「 重磅 」React Server Components

背景

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 社區得到初步反饋。
• 之後會有不少時間去了解這個技術，如今只是初步瞭解就好， 不須要當即投入學習。

若是想系統的學習這項技術， 建議的學習路徑：

1. 觀看演講視頻
2. 克隆演示demo，方便你探索React Server組件。
3. 閱讀 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

看到這， 咱們的幾個疑問就有答案了：

1. Q: Server Components是什麼：

   A: 能在服務端運行的React組件。

2. Q: Server Components解決了什麼問題?

   A: Water Fall Requests.

3. Q: Server Components 好在哪？

   A: 0 打包體積， 自然接近後端， 自動代碼分割。

4. Q: 這和服務端渲染（SSR）有什麼區別？

   A: 相比SSR將組件在服務端渲染成填充內容的HTML字符串，並在客戶端hydrate後使用。

   Server Components更像咱們的在客戶端寫的普通組件同樣，只不過他的運行環境是服務端。

5. Q: 如今須要上手嗎？

   A：本身去玩demo吧先～

好了， 內容就這麼多， 已經深夜一點了， 晚安。

資料連接

1. https://www.youtube.com/watch...
2. https://github.com/reactjs/se...
3. https://github.com/reactjs/rf...

關注我

若是你以爲這篇內容對你挺有啓發，那就關注我吧～

更多精彩：

聊聊 ESM、Bundleless 、Vite 、Snowpack

記一次 「 無限列表 」滾動優化

「 面試三板斧 」之 代碼分割（上）

「 面試三板斧 」之緩存 (上)

「 面試三板斧 」之緩存 (下)

「 面試三板斧 」之 HTTP （上）

「 面試三板斧 」之 HTTP （下）

「 面試三板斧 」之  this