你需要了解的React伺服器元件

---

在建立傳統的僅限客戶端的React應用程式時，開發人員經常不得不在效能和SEO之間做出選擇。伺服器元件使開發人員能夠更有效地利用伺服器基礎設施，從而預設獲得出色的效能。

透過結合客戶端互動和伺服器端渲染的最佳方面，React伺服器元件使程式設計師能夠建立易於建立和維護的應用程式，並且可以跨不同專案共享。

在本文中，我們將瞭解React伺服器元件是什麼以及如何使用它們來建立同構應用程式。

什麼是React伺服器元件？

React伺服器元件(RSCs)是一種新型元件，允許您建立可以在伺服器上渲染的可重用元件。RSCs旨在簡化同構(通用)應用程式的建立，同構應用程式是在伺服器和客戶端上都可以渲染的應用程式。

例如，專案依賴項現在可以僅保留在伺服器上，而不是影響使用者端JavaScript包的大小。

React伺服器元件比傳統的伺服器端渲染有一些優勢，具體來說：

• 這些伺服器元件通常用於建立可在不同專案或應用程式之間共享的可重用元件。

• 使用RSCs，您可以編寫在伺服器和客戶端之間共享的程式碼，這使得同構應用程式更易於開發。

• RSCs還允許您建立可以在客戶端進行水化的有狀態元件，這意味著您可以建立更快、更響應的同構應用程式。

React中的伺服器元件與客戶端元件

在React中，元件是可以重用的UI片段。元件有兩種型別：伺服器元件和客戶端元件。伺服器元件在伺服器上渲染，而客戶端元件在客戶端上渲染。

每種型別的元件都有其優點和缺點。伺服器元件通常更快、更可靠，但它們可能更難開發和部署。客戶端元件更易於開發和部署，但它們可能更慢且不太可靠。

客戶端元件不實現React伺服器元件具有的以下功能：

• 利用僅伺服器端的資料集，包括檔案系統、資料庫和內部服務。換句話說，該元素完全可以訪問有關其所在節點的資訊。

• 可以整合伺服器鉤子來訪問伺服器端資源，例如系統檔案，並以類似於常規鉤子的方式分發功能。

• RSCs是包含客戶端和伺服器元件的層次元素樹的一部分，它們相互巢狀。

當我們談到RSCs的一些限制時，讓我們看看它們是什麼：

• 不允許使用狀態應用程式（例如，不支援useState()）。為什麼？因為元素不是在瀏覽器上執行的，並且由於它只執行一次，並且結果會廣播到瀏覽器，所以不會保留狀態。

• 缺少useEffect生命週期操作 ()。同樣，這是因為元素也沒有在視窗中執行，在視窗中它可以受益於事件和副作用。

• 沒有DOM或瀏覽器特定的API，前提是在客戶端對它們進行polyfill。特別是考慮檢索API，其中伺服器端渲染演算法通常提供polyfill，以使伺服器端功能在API請求方面看起來與客戶端相同。

最終，是否使用伺服器元件或客戶端元件取決於您的特定需求和偏好。如果您需要快速載入的網站，那麼伺服器元件是最佳選擇。如果您需要一個使用更少資源的網站，那麼客戶端元件是最佳選擇。

React伺服器元件：用例

根據React團隊的說法，伺服器元件和SSR可以很好地協同工作。SSR是一種快速顯示任何非互動式狀態下客戶端元素的方法。在檢索第一個HTML後，您仍然需要承擔下載、處理和執行這些客戶端部分的成本。

與SSR相比，RSCs試圖完全用伺服器上進行的操作替換客戶端功能，在SSR中，您試圖傳送元素的初步形式，該元素隨後像常規客戶端元件一樣執行。

它有兩個主要優點：

• 打包的JavaScript不需要傳送到瀏覽器的網路。在這裡，客戶端載入JavaScript，執行它並接收輸出。

• 進行初始API/Ajax查詢以啟用元素，然後元素可以立即與後端應用程式通訊以滿足這些需求。這樣做可以減少客戶端的通訊量，並防止網站完成相關資料請求時偶爾發生的“查詢瀑布”。

React伺服器元件的工作原理

由於React伺服器元件處於實驗階段，此功能的具體實現方式可能會發生變化。但是，我們可以瞭解其一些基本概念。

當您導航到src/資料夾內的程式碼時，使用者將看到三種不同型別的元件檔名：

• 伺服器元件由.server.js副檔名標識。

• React客戶端元件由.client.js副檔名標識。

標準.js副檔名指定標準組件。這些元件可以在客戶端或瀏覽器上執行，具體取決於誰在匯出它們。當您使用npm start命令啟動軟體時，會同時執行兩個作業：

• Node伺服器使用的api.server.js/指令碼伺服器。

• 使用build.js/指令碼程式碼為您的客戶端React元件編譯網頁。

結論

這個全新的令人興奮的功能有可能改變開發人員建立React應用程式的方式。它有助於將包匯入React應用程式而不會增加客戶端的包大小，從而產生穩定的應用程式版本。

但是，應該注意的是，React伺服器元件絕不會取代其他React社群元件，特別是標準客戶端元件。