React Server Component: 混合式渲染

作者：谢奇璇

React 官方对 Server Comopnent 是这样介绍的: zero-bundle-size React Server Components。

这是一种实验性探索，但相信该探索是个未来 React 发展的方向，与 React Server Component 相关的周边生态正在积极的建设当中。

术语介绍

在 React Server Component (以下称 Server Component) 推出之后，我们可以简单的将 React 组件区分为以下三种：

Server Component	服务端渲染组件，拥有访问数据库、访问本地文件等能力。无法绑定事件对象，即不拥有交互性。
Client Component	客户端渲染组件，拥有交互性。
Share Component	既可以在服务端渲染，又可以在客户端渲染。具体如何渲染取决于谁引入了它。当被服务端组件引入的时候会由服务端渲染当被客户端组件引入的时候会由客户端渲染。

React 官方暂定通过「文件名后缀」来区分这三种组件：

1. Server Component 需要以 .server.js(/ts/jsx/tsx) 为后缀
2. Client Component 需要以 .client.js(/ts/jsx/tsx) 为后缀
3. Share Component 以 .js(/ts/jsx/tsx) 为后缀

混合渲染

简单来说 Server Component 是在服务端渲染的组件，而 Client Component 是在客户端渲染的组件。

与类似 SSR , React 在服务端将 Server Component 渲染好后传输给客户端，客户端接受到 HTML 和 JS Bundle 后进行组件的事件绑定。不同的是：Server Component 只进行服务端渲染，不会进行浏览器端的 hyration(注水)，总的来说页面由 Client Component 和 Server Component 混合渲染。

这种渲染思路有点像 Islands 架构，但又有点不太一样。

如图：橙色为 Server Component, 蓝色为 Client Component 。

React 是进行混合渲染的？

React 官方提供了一个简单的 Demo , 通过 Demo，探索一下React sever component的运作原理。

渲染入口

浏览器请求到 HTML 后，请求入口文件 - main.js, 里面包含了 React Runtime 与 Client Root，Client Root 执行创建一个 Context，用来保存客户端状态，与此同时，客户端向服务端发出 /react 请求。

// Root.client.jsx 伪代码

function Root() {
    const [data, setData] = useState({});
    
    // 向服务端发送请求
    const componentResponse = useServerResponse(data);
    return (
        <DataContext.Provider value={[data, setData]}> 
            componentResponse.render();
        </DataContext.Provider>
    );
}

看出这里没有渲染任何真实的 DOM, 真正的渲染会等 response 返回 Component 后才开始。

请求服务端组件

Client Root 代码执行后，