Was ist der Unterschied zwischen React Server Components (RSC) und Server Side Rendering (SSR)?

Question

Mit der Einführung von React 18 wurde RSC geboren. Ich frage mich, wie es sich von SSR in NextJS unterscheidet.

Answer 1

在这两种情况下，React Javascript 代码都是由 Node.js（或 Deno，或您正在使用的任何东西）执行的。但它们产生不同的东西。

服务端渲染

服务器端渲染是指 React 使用 ReactDom 的 ReactDom 的 renderToString() 方法，并将该 HTML 字符串发送到客户端，与发送静态 HTML 的任何服务器相同。

然后，通常通过 SSR 设置，React 会在客户端重新运行，在相同的渲染 HTML 上运行，并执行诸如连接点击处理程序和添加交互性之类的操作。这就要求服务器和客户端有相同的数据来渲染。这是通过将服务器上的数据序列化为客户端上的 标签以及表示 React 状态的对象来完成的，并且 React 在具有相同状态的客户端上“水合”。如果客户端有不同的数据，它将产生不同的 DOM 树，并覆盖服务器创建的内容，这违背了 SSR 的目的。

在服务器和客户端上都使用 React，初始页面加载可以是 SSR，然后后续页面加载可以是客户端。对于初始页面加载，SSR 比客户端渲染快得多，一旦下载完所有 Javascript 资源，客户端渲染速度就会更快。当您使用 SSR 时，Next.js 默认执行此策略。

服务器组件

服务器组件不会呈现为 HTML 字符串。

React“组件”是返回 React“元素”的函数或类。 React“元素”是要渲染的树的对象表示。在正常操作模式下，ReactDOM 获取这些元素对象并将它们渲染到 DOM。

服务器组件将反应元素返回到客户端。在服务器上，组件运行并生成元素，这些元素被传递到客户端（基本上作为 JSON）。然后，这些元素在客户端上呈现并放入 DOM 中。