339 - 《RSC 调研》

一个内部的调研任务。

把 RSC 相关的知识点再调研了一遍，写下我的理解。时间有限，还没有实操实现过 Toy Version。

1、RSC 是 React Server Components，即增加了 Server 组件的概念，也即有对应的 Client 组件。基于此，默认全部为 Server 组件，加 “use client” 后即为 Client 组件。二者之间有不同的规则限制，以及复用组件和 Hook 时也有很多规则限制，这是会给业务开发带来的额外成本。

2、RSC 的执行逻辑是在 Server 渲染 React 节点，注意，1）遇到 native 组件或 Client 组件时停止，2）返回的渲染结果是 ui 描述而非 HTML，其中 Client 组件需额外包含渲染他们用的打包信息。到 Client 之后，接受 React 流式响应，反序列化，然后渲染 native 组件和 Client 组件。

以上是 RSC RFC 的简化描述，但不同框架对此的实现也是有差异的。

RSC 的最简实现可以看 https://github.com/reactjs/server-components-demo 。1）在 webpack 配置的基础上增加 react-server-dom-webpack/plugin 用于打包，把 client 组件拆成多个单独的入口，2）server 运行时不打包，通过 react-server-dom-webpack/node-register 给 node require 加 hook 实时分析 require 的文件，遇到 client 组件时直接返回节点描述而非组件本身。

而 RSC 要上生产，这个最简实现肯定是不够的。比如 Server 组件得做打包，原因是，1）通常 RSC 会基于 SSR，那 Server 组件其实可以复用 SSR 的打包逻辑，针对 Client 组件做一次特殊处理就好，2）不打包在处理资源文件和 CSS Modules 时会和打包的 Client 组件不一致，导致注水不匹配之类的问题。

如果 Umi/Bigfish 要接入 RSC，能想到的改造点是。

1、构建相关。如何打包 Server 产物和 Client 产物，Ser