主要观点:React Server Components(RSC)是对页面加载性能、包大小及React应用编写方式有重大影响的新特性,作者所在的Plasmic致力于React性能,已深入研究其工作原理并分享所学。
关键信息:
- RSC允许服务器和浏览器协作渲染React应用,与服务器端渲染(SSR)不同,可结合SSR和RSC,先在服务器渲染再在浏览器水化。
- 基于文件扩展名定义服务器和客户端组件,服务器组件运行在服务器,客户端组件运行在浏览器,客户端组件不能导入服务器组件。
- RSC渲染过程:服务器接收请求渲染根组件,将其序列化为JSON发送给浏览器,浏览器重建React树并渲染,Suspense在其中起重要作用。
- RSC的Wire格式是简单的每行一个JSON块并标记ID的格式,便于客户端解析和处理。
- 可通过meta-framework更方便地使用RSC,目前Next.js和Shopify Hydrogen有实验性支持,但未用于生产。
- Plasmic支持RSC,有与Shopify Hydrogen合作的演示及自身的开始使用指南。
重要细节: - React元素的
type
字段,对于基础HTML标签可直接序列化,对于服务器组件调用函数渲染,对于客户端组件是模块引用对象。 - 所有传递给客户端组件或基础HTML标签的props必须可序列化,服务器组件不能传递事件处理函数作为prop。
- Suspense在服务器和浏览器中处理异步数据获取和组件加载,在RSC中起到关键作用。
react-server-dom-webpack
包含将RSC流转换为实际React元素的入口点。- 若服务器组件要渲染新内容,需向服务器发起另一个API调用,浏览器可构建新的React树并进行差异更新。
- 目前RSC虽未用于生产,但未来将成为React的重要部分。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。