背景
2020.12.21 号， Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbåge 联合发布了一项 React 新功能： react
React Server Componentsgit
并组织了一场专题演讲：github
Introducing Zero-Bundle-Size React Server Components。面试
地址： https://www.youtube.com/watch...后端
感兴趣的同窗能够去看看。缓存
🌟 须要事先说明的是：less
- React Server Components 仍在研发中。
- 本着透明的精神，分享这项工做，并指望从 React 社区得到初步反馈。
- 之后会有不少时间去了解这个技术，如今只是初步了解就好， 不须要当即投入学习。
若是想系统的学习这项技术， 建议的学习路径：编辑器
观看演讲视频克隆演示demo，方便你探索React Server组件。阅读 RFC（末尾带有FAQ）以获取更深刻的技术故障并提供反馈。
OK， 废话很少说， 咱们一块儿去揭开RSC的神秘面纱吧。ide
本文主要内容：学习
RSC: 动机以及解决的问题RSC: 是什么RSC: 0 打包体积RSC: 自动代码分割RSC: 自然接近后端Q & A
正文
首先，为何要作 RSC 呢？
一个新事物的出现必定是有缘由的。
Dan Abramov 对此作了一些讲解
先看软件研发中的几个原则：
- Good
- Cheap
- Fast
每个顶点，都要受其余两点的制约。
好比，咱们既想要成本低， 又想快速完成开发， 那可能在必定程度上要牺牲产品的质量。
那若是咱们都想要， 那该怎么办呢？
也就是要达到理想中的样子：
好比， 咱们有这样一个页面：
每个页面都须要用artistId 去作一些请求。
毫无疑问， 这将会产生大量的请求(瀑布请求)， 必定程度上增长了维护成本。
那这种牺牲维护成本的作法， 有没有解决方案呢？
固然是有的， 它就是Relay + GraphQL。
### Relay + GraphQL
然而， 这个组合并不适用于全部的状况， 好比一些大型的公司或者项目， 不让用或者不能用。
再次回顾咱们的问题
咱们的问题是， 若是组件若是同时发出请求， 会产生瀑布请求， 影响用户体验。
那若是， 这些请求是在返回客户端以前就已经处理好了，就像达到使用 GraphQL 的效果同样。
这样问题不就迎刃而解了吗？
具有这种能力的组件，也就是咱们今天的主角： React Server Components.
能在服务端运行的React组件。
RSC 示例
如图， App 中须要展现一个 NoteList:
列表代码：
不过有一句有须要注意：
import NoteList from './NoteList.client';
Client Component 就是普通的 React 组件， 只不过是以.client结尾 。
目的是告诉 React：这个组件只在客户端渲染。
代码以下图：
若是想把sideBar 作成RSC组件， 只须要分别编写对应的client 代码便可：
完整代码地址：
http://github.com/reactjs/ser...
感兴趣的能够本身下载下来玩一下。
0 打包体积
好比， 咱们要开发一款编辑器应用，引用了一些体积比较大的外部代码：
可是， 若是这部分作成RSC组件的话，就能够作到 0 体积打包：
为何呢？
由于这部分是server的代码， 并不会打包进来。
但前提是， 你须要规划好那些是server组件， 哪些是客户端组件。
自动代码分割
经过使用React.lazy能够实现组件的动态import。
以前，这须要咱们在切换组件/路由时手动执行。在ServerComponent中，都是自动完成的。
在上面动图中，左侧列表是ServerComponent，当点击其中卡片时，组件对应数据会动态加载。
自然接近后端
这里有一个react-fetch, 不光客户端能跑， 服务端也能跑！
因此能够称为shared component.
容器组件与交互组件
之前，咱们的组件都是客户端组件。
按照如今这个划分，那在将来的 React 组件树中， 必定会包含不少客户端组件和服务端组件， 如图：
这样，就能很容易的在服务端执行容器组件的渲染逻辑， 在客户端执行交互组件的渲染逻辑。
好比：
在服务端渲染ul中的内容， 而SearchInput 则负责在客户端的交互。
几个 React IO 库
更多进展
Q & A
看到这， 咱们的几个疑问就有答案了：
- Q: Server Components是什么：
A: 能在服务端运行的React组件。
- Q: Server Components解决了什么问题?
A: Water Fall Requests.
- Q: Server Components 好在哪？
A: 0 打包体积， 自然接近后端， 自动代码分割。
- Q: 这和服务端渲染（SSR）有什么区别？
A: 相比SSR将组件在服务端渲染成填充内容的HTML字符串，并在客户端hydrate后使用。
Server Components更像咱们的在客户端写的普通组件同样，只不过他的运行环境是服务端。
- Q: 如今须要上手吗？
A：本身去玩demo吧先～
好了， 内容就这么多， 已经深夜一点了， 晚安。
资料连接
关注我
若是你以为这篇内容对你挺有启发，那就关注我吧～
更多精彩：
聊聊 ESM、Bundleless 、Vite 、Snowpack
本文同步分享在 博客“皮小蛋”（SegmentFault）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。