- Published on
重识React之-Server Component/Server Actions
- Authors
- Name
- noodles
- 每个人的花期不同，不必在乎别人比你提前拥有
在之前的文章对React的一点思考中,梳理了对 react的一些思考:
- 隔离DOM
- 对功能复用的思考
- 渲染模式的探索
- 超越UI框架的一些探索 本文在之前的基础上,了解React Server Component/Server Actions的使用和原理从而实现知其所以然.
前置知识
use
use可以在组件或者hook内部读取Promise或者Context的值.
node中的Stream
本文介绍node中Stream相关概念
Server Component
Server Component更像一种基于客户端渲染和服务端渲染模式的混合渲染模式.
在客户端渲染的时候,可以简单拆分两个阶段:
- 用户通过访问CDN节点或者回源节点获取到js信息
- 浏览器解析js完成整个页面的构建.当需要数据的时候,需要二次请求服务端获取.
在服务端渲染的时候,在客户端渲染的时候会有不同:
- 用户访问服务器,根据组件信息生成html返回给浏览器,这个阶段可以增加数据的获取逻辑
- 客户端展示html,执行js完成页面的注水.
初看Server Side Rendering(SSR)会觉得有种文艺复兴的感觉(不是).特别是写过某些渲染引擎的模版的时候.
Server Component的渲染模式更像两种结合的混合渲染模式.这里只能说貌合但神离. 用户访问服务器:
返回ClientReferenceManifest(客户端组件映射表)
返回初始的序列化数据 (包含同步的 Server Component/ client Component)
对于异步 Server Component:
- 先返回 Suspense fallback
- 异步逻辑完成后，通过 script 标签返回新的序列化数据
浏览器处理:
- 根据 ClientReferenceManifest 动态加载 Client Component
- 解析初始序列化数据，渲染同步内容
- 监听新的 script 标签，逐步渲染异步内容
- 完成完整的组件树渲染
Server Actions
Server Actions更像是一种hack化的请求写法.通过编译手段将看似写在一起实则分离的请求处理逻辑集中.
传统请求方式:
- 第一阶段访问前端服务器请求前端资源
- 第二阶段访问后端服务器请求数据资源
Server Actions请求方式:
- 第一阶段访问前端服务器请求前端资源,在返回的代码中包含Server Actions的映射表.
- 第二阶段使用编译过的函数请求前端服务器,通过action Id查到到对应的Server Actions函数执行返回.
思考
Server Component/Server Actions是React或者说Next在超越UI框架上的又一层探索.但是我们在业务中是否需要这些高级的渲染模式? 还是要加一层思考.
- 比如CSR/SSR是否就够了
- Node的服务器资源或者治理能力是否足够
- 劣化的可能性.如果不加控制的使用Server Action是否会加重服务器负担.