308 - 《RSC 初印象》

本文是读完 Dan 的 RSC From Scratch. Part 1: Server Components · reactwg server-components · Discussion #5 · GitHub 之后，换个角度梳理一遍加深印象。

关于 RSC 。

1、RSC 是 React Server Component。顾名思义，就是跑在 Server 上的 React Component。既然是跑在 Server 上，所以 RSC 必然是以 SSR 为基础的。

2、React Component 并不支持异步，比如 async function Foo() {} 这种写法。但由于逻辑和业务的需要，比如要请求数据库或文件系统，RSC 需要支持异步。

3、RSC 完全跑在 Server 上，不会跑在 Client（浏览器）上。写的时候无需关心其在 Client 端的交互，Client 端的交互会交给传统的 Client Component。所以大家说这是 PHP 好像也挺形象的。

再看这篇文章。文中提供了详细的教程，引导开发者搭建出一个 RSC + SSR 的实例。文中是从下往上的结构，我这里从上往下再拆解一遍思路。

开始之前，先下载最终实例并在本地跑起来试试。1）打开 https://codesandbox.io/p/sandbox/agitated-swartz-4hs4v1 ，然后在左侧文件树的空位上点右键，然后点「Download sandbox」，2）安装依赖 pnpm i，3）pnpm start，此时会启动 8080 和 8081 两个 Server，如果有报错，可以排查下是否有端口冲突，4）在浏览器里打开 http://localhost:8080/ 。

这个 sandbox 里可以关注的是两部分的逻辑，1）初始加载，2）页面切换。

1、初始加载分 Server（ssr.js） 和 Client（client.js）。Server 先拿到 JSX，然后通过 renderToString(jsx) 将其转成 Html，再通过 JSON.stringify() 把 jsx string 存在全局变量 __INITIAL