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中，所有渲染逻辑，包括交互组件，都必须在服务器端渲染期间处理。