Twitter thread from @samselikoff | annotated by duzhi

With RSC, you're writing a program that generates a program. The output of RSC is a client bundle – React code that runs in the browser.
使用 RSC，您正在编写一个生成程序的程序。 RSC 的输出是一个客户端包——在浏览器中运行的 React 代码。

That's why "rendering" RSC has nothing to do with HTML. The result of rendering RSC is a new client tree. A new client React program.
这就是为什么“渲染”RSC 与 HTML 无关。渲染RSC的结果是一个新的客户端树。一个新的客户端 React 程序。

Rendering in React has always been a bit of a higher-level concept. In pre-RSC React, rendering refers to generating a JSX tree. That tree is then reconciled with the current tree, a diff is computed, and then that diff is applied to the DOM during the commit phase.
React 中的渲染一直是一个更高层次的概念。在 RSC React 之前，渲染是指生成 JSX 树。然后将该树与当前树进行协调，计算差异，然后在提交阶段将该差异应用于 DOM。

So rendering is not about painting pixels to the screen. Render is a way to generate a diff between the current tree and a new tree.
所以渲染并不是将像素绘制到屏幕上。渲染是一种在当前树和新树之间生成差异的方法。

The same is true with RSC – but the output is not a JSX tree. It’s a tree of client components. And you can think of a client tree as a program. It’s a set of instructions for what the UI should look like, and how it should behave (e.g. what happens when I click this button).
RSC 也是如此 – 但输出不是 JSX 树。它是一个客户端组件树。您可以将客户端树视为一个程序。它是一组有关 UI 外观及其行为方式的说明（例如，当我单击此按钮时会发生什么）。

When RSC is re-rendered, the output is a new client tree, and that new tree can be executed, diffed, and committed on the client. The diffing is what preserves client-side state in parts of the UI that haven’t changed.
当 RSC 重新渲染时，输出是一个新的客户端树，并且可以在客户端上执行、比较和提交该新树。差异是在未更改的 UI 部分中保留客户端状态的原因。

Hopefully this explains why the concept of server-side rendering (SSR) doesn’t apply to RSC, and why questions like “Can RSC generate HTML” or “How do RSC affect SEO” miss the mark.
希望这可以解释为什么服务器端渲染 (SSR) 的概念不适用于 RSC，以及为什么诸如“RSC 能否生成 HTML”或“RSC 如何影响 SEO”之类的问题没有切中要害。

RSC helps you build client React programs. Those client programs (1) can be loaded and executed in the browser, and (2) can be pre-rendered on the server using APIs like renderToString for the purpose of displaying HTML on initial load.
RSC 帮助您构建客户端 React 程序。这些客户端程序 (1) 可以在浏览器中加载和执行，(2) 可以使用 renderToString 等 API 在服务器上预渲染，以便在初始加载时显示 HTML。

That pre-rendering is what SSR refers to. It’s a way to show meaningful UI to the user while the client bundle loads, instead of a white screen. But RSC has nothing to do with it. RSC gives you a client bundle, which you can then SSR (or not) before shipping it to the client.
那个预渲染就是SSR所指的。这是一种在客户端包加载时向用户显示有意义的 UI（而不是白屏）的方法。但RSC与此无关。 RSC 为您提供一个客户端捆绑包，您可以在将其发送给客户端之前对其进行 SSR（或不进行 SSR）。

So, you never “server-side render” your Server Components – even though you render them. Admittedly confusing! But if you remember to think of (1) render in React as a higher-level concept and (2) SSR as pre-rendering, it should help you disambiguate these two concepts.
因此，您永远不会“服务器端渲染”您的服务器组件 - 即使您渲染它们。诚然令人困惑！但是，如果您记得将 (1) React 中的渲染视为更高级别的概念，将 (2) SSR 视为预渲染，那么它应该可以帮助您消除这两个概念的歧义。