干货 | React Server Components 初探

作者简介

 

Sprite 82，喜欢研究各种语言对 web 框架的实现，函数式编程的爱好者，最近在编译原理前端中验证学习到的函数式编程知识。

随着前端职能在互联网公司的重要性与日俱增，我们的前端代码库的体积也开始跟着膨胀，特别是基于 React 的应用，Size 常常以兆 (Mb) 计，给渲染的性能优化提出了巨大的挑战。除了体积，还有另一个问题是，在当下的前端同构 SSR 实践中，Server 端的主要用途是执行一些在服务端和客户端都能执行的通用渲染计算，很少能充分发掘 Server 端特有能力的场景。如何降低客户端 JS Size 以及更极致地挖掘服务端的优化能力，成为一个待解决的开放性问题。

Facebook 的 React Team 尝试给出了他们的一个探索方案——React Server Component。一种只运行在服务端的 React 组件化能力，我们来一探究竟。

一、怎么开始

资源

Introducing Zero-Bundle-Size React Server Components

官方Blog里提供了三个关于 React Server Components 的资源：

1）一个可以运行的 full stack demo 项目。项目可以直接在本地运行，但是需要进行一些数据库配置。如果有docker环境的话，建议在docker里运行，可以避免手动配置环境。

2）RFC。React 团队 一直采用 RFC 的方式来帮助和指导 React 的设计。重大变更在经过社区彻底讨论后才会合并到 React 的稳定版本。

3）一个近一个小时的视频。解释了为什么要开发 React Server Components 和 对上述 demo项目的演示。有精心翻译的中文字幕。

说明

与 React team 的做法一样，这里也推荐大家先去看这个视频，先对 React Server Components 有个整体的认识。当然直接看本文也是可以的。

现在 React Server Components 仍处于开发状态。暂时不适合深入使用，也不适合基于这个新特性去开发升级自己的框架。

二、基础认识

组件类型

1）server component。不能包含客户端代码，如使用 DOM api、 useState、useEffect等。

2）client component。现在大家所熟悉的普通组件。

3）share component。既能作为 server component, 又能作为 client component，取决于引用该组件的组件。通常是根据 props 直接渲染的组件。

组件命名

1）server component：扩展名 .server.js

2）client component：扩展名 .client.js

3）sharing component：扩展名 .js

这个命名约定不是最终的方案，只是目前快速开发原型时的简易策略。

组件引用

三种组件之间相互引用只有一个限制：客户端组件不能 import 服务端组件。其余情况下，都可以相互引用。

三、运行机制

官方例子

上图展示的是官方提供的demo的侧边栏。包含 Header、SearchInput、NoteList 等组件。其中红色为服务端组件，绿色为客户端组件。

看到这里，大家可能会困惑，这种交错嵌套的组件是怎么在不同环境下渲染并且拼接到一起的。下面我们通过更简单的例子来解释。