写点什么

React 的未来:服务端组件

2021 年 3 月 05 日

React的未来:服务端组件


服务端组件是什么?

截至目前,我们对 React 组件的了解只是客户端组件,仅此而已。


然而,React 团队正在试验一个新的想法,那就是将 React 组件区分为两个类型:客户端组件服务端组件。该提案的开头就是使用不同的文件扩展名(.client.js 和.server.js)来区分它们。然而,客户端组件和服务端组件到底是怎么定义的?


  • 首先,客户端组件指的就是现在我们日常开发中使用的 React 组件。

  • 其次是服务端组件,从某种意义上来说它是一个新型组件,该类型的组件会在服务端完成渲染后,再发送到客户端。

服务端组件哪些优势?

乍一看,服务端组件类似于服务端渲染(SSR),实际上,服务端组件的很多优势和服务端渲染也是很类似:

  • 提供了直接访问服务端资源(如:数据库、文件系统、内部的微服务等)的可能,因此开发起来会更容易。

  • 避免了不必要的客户端和服务端之间的交互,因此性能更快

  • 允许一些类库可以直接运行在服务端,因此减小了客户端包文件的大小

 

除此之外,服务端组件还给开发过程带来了更好的体验,特别是在代码切割上:


自动代码切割(例如:为了让客户端实现按需加载,需要将代码切割成一个个的小包),目前为了实现这个功能,React 开发人员需要手动实现如下代码:



未来,服务端组件会自动处理,这就意味着,我们无需特殊代码处理就可以实现此功能:



然而,要想真正体会到服务端组件的强大优势,必须将其与服务端渲染(SSR)进行更细致的比对。

那么,服务端组件和 SSR 有哪些不同呢?

在使用 SSR 时,你需要先在服务端完成 HTML 的渲染,然后再将该 HTML 发送到客户端。然后此过程只会发生在页面的初次访问时(也就是初始化加载的时候)。至此之后,你的 React 应用在数据更新展示等行为表现上和常规的 React 应用没有任何区别。在展示更新之后的数据时,都是要么从客户端发送一个网络请求,要么页面整体刷新,但不管采用哪种方式,都会导致组件的二次渲染和状态丢失,从而影响性能和客户体验。


相对而言,在使用服务端组件时,你的组件在服务端完成渲染,然后通过自定义的协议发送到客户端(如下图)。React 拿到数据时,将新的 UI 整体的合并到客户端 UI 树里面,此过程不会对客户端其他状态产生影响。此过程可以无限次数的执行。React 通过整体 UI 模块更新的方式,达到保持客户端状态的目的,极大的增强了用户体验。



要了解更多的细节可以参考 Dan Abramov 在推特上的这条回复,或者阅读来着 React 数据团队的 Lauren Tan 在 Twwiter 的帖子,或者访问 Mehul Mohan 发布在 freeCodeCamp 上的这篇文章

注意事项

由于服务端组件是静态的、服务端渲染的,因此相对于客户端组件,不可避免的会有些使用限制。

首先,服务端组件不能有任何交互行为(例如:不能使用 useState(),useEffect())。但是你可以通过在服务端组件内部引入客户端组件(客户端组件是允许存在交互行为的)的方式来解决这个问题。例如下面的示例代码就做到了两者兼顾:



其次,由于服务端组件是在服务端完成渲染后通过网络传输给到客户端, 因此服务端组件传输 props 到客户端组件的时候,props 必须被序列化(意味着:可传输的数据只能是字符串、JSON 对象或者 JSX,不能传输 JavaScript 函数)。

接下来是什么?

虽然这一切都很令人兴奋,但该功能仍处于实验阶段。它的 API 和具体实现未来都有变化的可能,因此该特性目前还不能被运用到生产环境。


现在,React 团队正在和 Next.js 团队紧密合作,致力于将服务端组件集成到 React 框架里。同时这里有个基于内测版本的webpack插件和Parcel插件的访谈。


最后,服务端组件将会是一个可选的特性,现有的 React 代码依然可以正常工作,因此开发人员不需要急着采用新功能。


想了解更多关于该特性的信息,我强烈建议你观看这个示例视频或者阅读此规范,感谢阅读此文章!

 

原文链接:The Future of React: Server Components

2021 年 3 月 05 日 16:061580

评论

发布
暂无评论
发现更多内容

获奖公布|构建基于容器技术,承载数据类有状态工作负载的数据云平台,技术挑战有哪些?

花斯基

话题讨论 活动专区

实物资产卡片多数量拆分流程整理2021.01.06

Flychen

揭秘人民日报创作大脑:百度大脑智能创作平台助力打造“十八般武艺”

百度大脑

使用Github Actions部署静态网站

玉龙BB

GitHub Pages Hugo Github Actions

腾讯大佬直言:只要掌握了这份“Redis实战笔记”就掌握了云计算的未来!

比伯

Java 编程 架构 面试 程序人生

面向行业智能,华为数据通信推动的2020之变

脑极体

通过 Oracle 变量更新公司名称

Flychen

干货速递,百度BML自动超参搜索技术原理揭秘与实战攻略!

百度大脑

简述CAP原理

andy

量化机器人管理系统开发|市值管理机器人模式系统开发

W13902449729

市值管理机器人开发 市值管理系统开发

同城快递系统设计文档

业哥

区块链推动电力能源管理新一轮技术变革

CECBC区块链专委会

区块链

视频混剪怎么准备素材?会声会影视频消音操作步骤详解!

奈奈的杂社

视频剪辑 视频后期 混剪 视频消音

更新完IOS14,网络工程师又开始背锅了

区块链:能源行业出现破坏性创新的基础?

CECBC区块链专委会

区块链 能源

CSS01 - 引入方式

桃夭十一里

html/css

CSS02 - 选择器

桃夭十一里

html/css

LeetCode题解:104. 二叉树的最大深度,BFS,JavaScript,详细注释

Lee Chen

算法 LeetCode 前端进阶训练营

ml-agents项目实践(一)

行者AI

模型训练

接口测试--获取动态参数进阶

测试人生路

接口测试

全球台式机CPU市场份额AMD超越Intel?别再混淆视听,误导消费者了!

intel001

区块链技术如何真实有效的赋能智慧交通?

CECBC区块链专委会

区块链

如何使用ClickHouse实现时序数据管理和挖掘?

京东科技开发者

数据库 数据采集 数据库管理工具

智慧社区解决方案,智慧社区管理系统

135深圳3055源中瑞8032

RocketMQ如何保证消息顺序性

废材姑娘

RocketMQ

性能测试思考分析

andy

有奖话题 | 2021 新年Flag,牛转乾坤!

InfoQ写作平台官方

话题讨论 活动专区

MySQL蜜罐获取攻击者微信ID

Java架构师迁哥

别无分号只此一家,Python3接入支付宝身份认证接口( alipay.user.certify)体系(2021年最新攻略)

刘悦的技术博客

Python 支付宝 身份认证 刷脸 实名认证

1499飞天茅台脚本使用过程中遇到的Python问题汇总索引目录【淘宝-天猫超市、京东】

谙忆

飞天茅台 茅台

区块链食品溯源,食品安全溯源链搭建

135深圳3055源中瑞8032

React的未来:服务端组件-InfoQ