服務端組件是什么？

截至目前，我們對 React 組件的了解只是客戶端組件，僅此而已。

然而，React 團隊正在試驗一個新的想法，那就是將 React 組件區(qū)分為兩個類型：客戶端組件和服務端組件。該提案的開頭就是使用不同的文件擴展名（.client.js 和.server.js）來區(qū)分它們。然而，客戶端組件和服務端組件到底是怎么定義的？

首先，客戶端組件指的就是現在我們日常開發(fā)中使用的 React 組件。

其次是服務端組件，從某種意義上來說它是一個新型組件，該類型的組件會在服務端完成渲染后，再發(fā)送到客戶端。

服務端組件哪些優(yōu)勢？

乍一看，服務端組件類似于服務端渲染（SSR），實際上，服務端組件的很多優(yōu)勢和服務端渲染也是很類似：

提供了直接訪問服務端資源（如：數據庫、文件系統(tǒng)、內部的微服務等）的可能，因此開發(fā)起來會更容易。

避免了不必要的客戶端和服務端之間的交互，因此性能更快。允許一些類庫可以直接運行在服務端，因此減小了客戶端包文件的大小，除此之外，服務端組件還給開發(fā)過程帶來了更好的體驗，特別是在代碼切割上：

自動代碼切割（例如：為了讓客戶端實現按需加載，需要將代碼切割成一個個的小包），目前為了實現這個功能，React 開發(fā)人員需要手動實現如下代碼：

未來，服務端組件會自動處理，這就意味著，我們無需特殊代碼處理就可以實現此功能：

然而，要想真正體會到服務端組件的強大優(yōu)勢，必須將其與服務端渲染（SSR）進行更細致的比對。

那么，服務端組件和 SSR 有哪些不同呢？

在使用 SSR 時，你需要先在服務端完成 HTML 的渲染，然后再將該 HTML 發(fā)送到客戶端。然后此過程只會發(fā)生在頁面的初次訪問時（也就是初始化加載的時候）。至此之后，你的 React 應用在數據更新展示等行為表現上和常規(guī)的 React 應用沒有任何區(qū)別。在展示更新之后的數據時，都是要么從客戶端發(fā)送一個網絡請求，要么頁面整體刷新，但不管采用哪種方式，都會導致組件的二次渲染和狀態(tài)丟失，從而影響性能和客戶體驗。

相對而言，在使用服務端組件時，你的組件在服務端完成渲染，然后通過自定義的協(xié)議發(fā)送到客戶端（如下圖）。React 拿到數據時，將新的 UI 整體的合并到客戶端 UI 樹里面，此過程不會對客戶端其他狀態(tài)產生影響。此過程可以無限次數的執(zhí)行。React 通過整體 UI 模塊更新的方式，達到保持客戶端狀態(tài)的目的，極大的增強了用戶體驗。

要了解更多的細節(jié)可以參考 Dan Abramov 在推特上的這條回復，或者閱讀來著 React 數據團隊的 Lauren Tan 在 Twwiter 的帖子，或者訪問 Mehul Mohan 發(fā)布在 freeCodeCamp 上的這篇文章

注意事項

由于服務端組件是靜態(tài)的、服務端渲染的，因此相對于客戶端組件，不可避免的會有些使用限制。

首先，服務端組件不能有任何交互行為（例如：不能使用 useState()，useEffect()）。但是你可以通過在服務端組件內部引入客戶端組件（客戶端組件是允許存在交互行為的）的方式來解決這個問題。例如下面的示例代碼就做到了兩者兼顧：

其次，由于服務端組件是在服務端完成渲染后通過網絡傳輸給到客戶端， 因此服務端組件傳輸 props 到客戶端組件的時候，props 必須被序列化（意味著：可傳輸的數據只能是字符串、JSON 對象或者 JSX，不能傳輸 JavaScript 函數）。

接下來是什么？

雖然這一切都很令人興奮，但該功能仍處于實驗階段。它的 API 和具體實現未來都有變化的可能，因此該特性目前還不能被運用到生產環(huán)境。

最后，服務端組件將會是一個可選的特性，現有的 React 代碼依然可以正常工作，因此開發(fā)人員不需要急著采用新功能。

文章來源：medium，作者：Donovan So；

【數商云www.zhimaihui.cn】致力于提供企業(yè)級的電商平臺服務，長期為大中型企業(yè)打造數據化、商業(yè)化、智能化的電商網站建設解決方案，同時我們還提供B2B交易系統(tǒng)、B2B2C多用戶商城系統(tǒng)、B2C電子商務系統(tǒng)、跨境進口電商平臺、供應鏈管理系統(tǒng)、SRM供應商管理系統(tǒng)、SCM系統(tǒng)、渠道管理系統(tǒng)等一系列系統(tǒng)定制開發(fā)服務，通過大數據、云計算等新技術協(xié)助企業(yè)打造供應端—渠道端—營銷端—數據端等全鏈數字化運營體系，提升企業(yè)運營效益與智慧數字化商業(yè)轉型。