React 伺服器元件 (RSC)：深入探究範例-js教程-PHP中文網

React 伺服器元件 (RSC) 是 React 架構的重大演變，旨在提高伺服器渲染應用程式的效能、開發人員體驗和使用者體驗。本文探討了 RSC 是什麼、它與伺服器端渲染 (SSR) 有何不同，以及它透過範例和視覺化圖表提供的優勢，以增強理解。

什麼是 React 伺服器元件 (RSC)？

React 伺服器元件是一項允許元件在伺服器上渲染並作為序列化 React 樹傳送到客戶端的功能。與傳統的客戶端渲染（所有元件和邏輯都在客戶端上處理）不同，RSC 將大部分工作移至伺服器，從而減小了套件大小並提高了效能。

RSC 的主要特徵

伺服器渲染元件：元件在伺服器上執行並傳送到客戶端。
改進了捆綁包大小：無需將伺服器渲染元件的 JavaScript 程式碼傳送到客戶端。
無縫整合：RSC 與客戶端和 SSR 範例無縫整合。
零瀑布渲染：伺服器渲染的內容最大限度地減少了資料取得的往返次數。

RSC 與 SSR 有何不同？

Feature	SSR (Server-Side Rendering)	RSC (React Server Components)
Execution Environment	Both server and client handle logic and rendering.	Only the server renders specified components.
Bundle Size	Ships JavaScript for rendering logic to the client.	Does not ship server component logic to the client.
Interactivity	Requires hydration for interactivity on the client.	Combines server-rendered components with client-side interactivity.
Performance	Full page rendering on the server.	Streams component-level updates for faster rendering.

功能 SSR（伺服器端渲染） RSC（React 伺服器元件）標題> 執行環境伺服器和客戶端都處理邏輯和渲染。只有伺服器渲染指定的元件。捆綁尺寸將 JavaScript 用於向客戶端呈現邏輯。不將伺服器元件邏輯傳送給客戶端。互動需要補充水分才能與客戶端互動。將伺服器渲染的元件與客戶端互動性結合。性能在伺服器上呈現全頁。串流組件級更新以加快渲染速度。表>

RSC 相對於 SSR 的優勢

減少客戶工作量：
- RSC 最大限度地減少了發送到客戶端的 JavaScript 數量，從而提高了效能。
更好的程式碼分割：
- 元件可以在伺服器和客戶端之間拆分，減少不必要的資料傳輸。
縮短了互動時間：
- RSC 允許更快地載入關鍵內容，因為伺服器元件不需要水合。

RSC 如何運作

第 1 步：伺服器渲染

指定為伺服器元件的元件在伺服器上執行，取得資料並產生 React 樹。

第 2 步：串流傳輸到客戶端

伺服器將序列化的 React 元件串流傳輸到客戶端，並在客戶端與現有的客戶端 React 元件整合。

第3步：客戶端渲染

互動式客戶端元件根據需要進行補充和接管。

程式碼範例：RSC 與 SSR

RSC 實施

// ServerComponent.server.js
export default function ServerComponent() {
  const data = fetchDataFromDatabase(); // Server-only logic
  return <div>Data from server: {data}</div>;
}

// ClientComponent.client.js
export default function ClientComponent() {
  return <button onClick={() => alert('Clicked!')}>Click Me</button>;
}

// App.js
import ServerComponent from './ServerComponent.server';
import ClientComponent from './ClientComponent.client';

export default function App() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

登入後複製

在此範例中，ServerComponent 處理伺服器邏輯，而 ClientComponent 在客戶端上保持互動。

SSR 實作

export default function SSRComponent({ data }) {
  return (
    <div>
      <div>Data: {data}</div>
      <button onClick={() => alert('Clicked!')}>Click Me</button>
    </div>
  );
}

// Server-side Rendering
const serverData = fetchDataFromDatabase();
const html = renderToString(<SSRComponent data={serverData} />);

登入後複製

在SSR中，所有渲染邏輯，包括互動元件，都必須在伺服器端渲染期間處理。