React Server Components (RSC) 正在徹底改變前端架構。您可能聽說過這個名字，但是您是否確切知道它與SSR（伺服器端渲染）有何不同以及幕後進行了什麼樣的處理？ 在本文中，我們將深入探討其技術機制並考慮其實際使用的範例。
與 SSR 的決定性差異
傳統的SSR是一種在初始載入期間在伺服器端產生HTML並將其傳回給瀏覽器的技術。但隨後瀏覽器必須載入 JavaScript 並重新運行（水合）該元件以使其具有互動性。換句話說，元件程式碼本身最終被下載到瀏覽器。
另一方面，RSC 是一個僅在伺服器上運行且從不傳送到瀏覽器的元件。 RSC經過伺服器處理後，會被序列化為特殊的類似JSON的格式而不是HTML，然後傳送到客戶端。瀏覽器端只是接收這些資料並將其反映在 DOM 中。
捆綁包大小大幅減小
這種機制的最大好處是減少了發送到客戶端的 JavaScript 套件的大小。 例如，假設您想要使用重型庫（例如「marked」）將 markdown 轉換為 HTML。如果您使用 RSC 實作此功能，則所有解析都在伺服器上完成，因此不會將繁重的程式庫程式碼下載到使用者的瀏覽器。這是移動環境性能的革命性改進。
客戶端邊界設計是關鍵。
使用 RSC 時最麻煩的事情是設計伺服器和客戶端元件之間的邊界。 由於 RSC 在伺服器上運行，因此它不能具有事件處理程序，例如“onClick”或狀態管理（“useState”）。只有需要它們的最終元件（按鈕和輸入表單）才應該成為客戶端元件。
需要一種樹形結構設計理念，其中“數據採集和繁重處理在樹的上層（伺服器）進行，只有需要用戶操作的葉子部分作為客戶端。”
實際使用範例
在實踐中，RSC 在以下用例中表現最為出色：
- 部落格和媒體文章展示： 與上面提到的Markdown轉換一樣，RSC在渲染靜態內容方面是獨一無二的。
- 直接資料庫存取： 由於RSC 是伺服器環境，因此您可以安全地將查詢直接傳送到資料庫。由於可以省略一層API，因此可以節省開發工作量。
- 專注於 SEO 的登陸頁面： 快速初始加載，無需額外的 JS，這會直接提高您的 Core Web Vitals 分數。
RSC 不是要取代現有的 React，而是澄清客戶端和伺服器之間「角色分工」的新武器。正確理解這一機制並將其適當地融入設計中將是未來前端開發的關鍵。