React 服务器组件如何工作:深入指南

主要观点: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的重要部分。
阅读 39
0 条评论