SSR在左，React Server Component在右

2020年已通過去了，可是有一項2020年的技術提案仍然值得研究，它就是React Server Component！沒錯，React團隊又出新活兒了，學不動的同窗能夠直接看本篇文章😸

已經有了SSR，爲何還會有React Server Component這種東西出現呢？它們倆的區別是什麼呢？

要解釋這些問題，咱們先來看看Web渲染的發展歷程。

web渲染髮展歷程

---

遠古時期的前端代碼，都是夾雜在Php、Jsp、Asp的代碼中，而且整個頁面由服務器來查詢數據而且填充拼接，最終生成的是一個完整的HTML頁面，返回給瀏覽器能夠直接去解析展示，到如今有不少網站仍是這樣的模式，好比下圖這種：

隨着時間的發展，這種模式的問題也逐步凸顯。

從用戶體驗上來講，每次在頁面上點擊一個tab切換，都有多是返回一個完整的Html，瀏覽器會從新刷新一次，這種體驗是很難受的，由於有可能你在頁面上勾選了一些狀態會在刷新以後徹底消失掉，這會讓人感受不是在使用一個應用，而是在不一樣的幾個單獨頁面之間來回切換，使用體驗很是不流暢。

從開發體驗上來講，先後端的代碼、倉庫混在一塊兒，前端工程師急須要獨立的來作一些事情來提高開發體驗和用戶體驗，此時Ajax技術出現了。

隨着Ajax技術的普遍應用以及Vue、React、Angular等等技術的出現，前端單頁應用愈來愈被前端工程師所接受。此時幾乎全部的拉取數據、組裝Html、渲染頁面的工做都放到了前端來作，服務端的職責收斂到API請求來執行業務邏輯和獲取數據，先後端的職責分明，分別把持網站的兩頭，中間是Http請求把他們串起來。

可是這種單頁面應用的純前端渲染也帶來了一些問題，由於在首次請求的時候，服務器端只會返回一個幾乎爲空的Html（以下圖），後續的內容數據都靠Ajax去動態的獲取，若是要請求的數據不少的話，就會產生白屏，而且會有SEO問題。並且隨着前端工程的膨脹，打包後的代碼體積也會愈來愈大。

爲了解決首次訪問白屏問題以及SEO問題，你們把目光轉向了SSR（服務端渲染），React社區推出了Next.js，Vue社區推出了Nuxt.js，它們都是在首次訪問某頁面時，直接在服務器端拼裝一個完整的Html。

React Server Component

---

單頁應用+部分頁面SSR就是完美的方案嗎？確定不是的。作技術的都知道每種方案只是符合某些條件下的特定場景而已，隨着業務複雜度上升以及技術債的堆積，SSR的問題也凸顯出來，若是一個頁面請求的接口不少，那麼這個頁面在服務端就會花費很長的時間才能拼裝完成，那麼響應時間依然過長。並且搞過SSR的同窗都知道，這裏面踩坑也很多。

到目前爲止，咱們已經清晰的知道前端開發的痛點了：

1. 更好的用戶體驗：不能一言不合就白屏
2. 更好的開發體驗：組件儘量的和業務解耦，不要寫成一坨，更好維護
3. 更好的性能：儘量少的請求接口

對於權衡這3個痛點，React團隊給出的解決辦法是React Server Component，它可讓你：

1. 在服務端運行React組件，而且這些組件永遠不會被下載到瀏覽器中去，這樣子就能夠減少前端項目的打包體積
2. 完整的服務端訪問能力，好比直接在React組件中讀取文件、訪問數據庫，在官方給出的demo中也看到了react-fs、react-pg這樣的庫

而且它和SSR的區別在於：

1. SSR返回的是一個Html，而React Server Component返回的是一個React可解析的結構。
2. SSR返回的頁面會讓頁面從新刷新，丟失掉以前頁面上的狀態，好比表單選中之類的；而React Server Component返回的並不會讓頁面從新刷新而丟失狀態。

使用場景

---

以React官方給的介紹視頻爲例，假若有這麼一個常見的業務需求，1個父組件內套了2個子組件，而且每一個子組件須要的數據不同：

爲了儘可能的少發請求，咱們通常會用1個接口去拿到2份兒數據：

可是這樣子作的問題是，2個子組件與父組件耦合太嚴重，不利於維護，因而咱們選擇在2個子組件內各自請求數據：

可是這樣子作相比上一種作法，多了2次接口請求，性能上會受影響，使用React Server Component重構來作就會是這樣：

組件的業務數據拉取放在了服務端來作，而且服務端組件不會被打包到前端代碼中，對於前端來講，整個網絡請求只有一次。

個人見解

---

React團隊提出的這項技術，社區也有過相似的，但此次不一樣的是它是基於React技術棧來作的，因此關注度和接受程度會比其餘相似的技術更高一些。

從前端開發者角度來講，這項技術把Component的能力從前端擴展到了後端，之後說不定各大公司會出現前端組件公共服務之類的技術基建，可能會在之後改變現有的前端開發模式。

總之，值得期待。

微信關注公衆號「 前端耳東 」，每週持續更新文章，分享前端深度技術和職場經驗，對你們前端進階、面試找工做都有幫助。