当 SSR 遇上 Serverless,轻松实现页面瞬开
作者:水澜@Rax Team
最近随着 Rax SSR 完成渲染性能 6x React 的提升,以及工程上 Serverless 发布形式的对接,我想是时候跟大家介绍下 Rax SSR 了。
什么是 SSR
SSR 的全称是 Server Side Rendering,对应的中文名是:服务器端渲染,顾名思义是将渲染的工作放在 Server 端进行。
而与之对应的是 CSR ,客户端渲染,也就是目前 Web 应用中主流的渲染模式,一般由 Server 端返回的初始 HTML 页面,然后再由 JS 去异步加载数据,然后完成页面的渲染。
下面这张图,是同一个应用,用两种不同的方式去渲染,页面的加载时序。
(橙色部分为页面背景色,对应了常规意义上的白屏时间)
可以看到,在内容达到时间上,SSR 工作原理,决定了它的优势,这种差异在弱网环境下会体现的更加明显。
SSR 的困境
SSR 那么优秀,但是为什么却没能成为 Web 主流的开发模式呢,我想这是因为构建 SSR 应用并不容易:
- 但当你开始开发一个 SSR 应用时,就已经不在是一个简单的前端开发工程师了,而将被迫成为全栈工程师。交付产物从原来的 JS Bundle 变成了 Node 应用,随之而来的是,需要选型一个 Node 框架,搭建一个 Node 应用,并且应对性能开销、保障应用稳定性等等。
- 其次,还需要考虑如何让现有的前端代码跑到 Server 端上,虽然类似 React 这些主流的框架都提供了 Server 端渲染的能力,但是,不同端上渲染原理和执行环境的差异,会导致编码上的很多差异,比如在 Node 端调用了 window 变量,那么就会报错了,同样的 Hooks 之类的异步更新机制在 Server 端也不适用。
- 最后,当你完成应用的开发,还需要考虑这些问题:如何部署环境、如何负载均衡、如何应对服务器宕机、如何应对用户请求峰值等等
因此,虽然 SSR 在性能上完胜 CSR ,但却因为其高昂的开发和维护成本,使人们转而投向 CSR 的怀抱。
SSR 遇上 Serverless
近年来,随着 Serverless 生态建设的不断完善,我们也在思考,Serverless 的模式是否能为 SSR 带来新的生命力,答案是肯定的。
一方面,借助于函数即服务(FaaS)的能力,不需要再去搭建传统的 Node 应用,一个函数就可以变成一个服务,开发者可以更纯粹的关注于业务逻辑。
另一方面,FaaS 以函数为单位的形式以及弹性机制,为 SSR 应用带来了天然的隔离性和动态修复能力,可以更好的避免页面间的交叉污染,或一些边界的异常场景对应用带来致命性的伤害。
再者,无需运维、按需执行、弹性伸缩这些特性,大大降低了 SSR 应用对开发者的门槛。
因此,借助于 Serverless 带来的想象空间,以及 Rax 在工程和 SSR 渲染引擎上所做的工作,我们是完全可以做到媲美目前 CSR 模式的开发体验的。
Rax SSR 带来什么
希望下面几个点,可以让您对 Rax SSR 有个快速的了解:
零配置上手
没有复杂的工程配置,基于 Rax 的 CLI 工具,就快速创建一个 SSR 工程。
极致的渲染性能
Rax 的 Server 端渲染引擎,采用了静态模板 + 动态组件的混合渲染模式,渲染性能是 React 的 6 倍。
React(16.12.0)#renderToString x 1,178 ops/sec ±1.23% (85 runs sampled) Rax(1.1.1)#renderToString x 6,047 ops/sec ±1.73% (82 runs sampled) Preact(10.2.1)#renderToString x 1,005 ops/sec ±1.10% (86 runs sampled) The benchmark was run on: PLATFORM: linux 5.0.0-1027-azure CPU: Intel(R) Xeon(R) CPU E5-2673 v4 @ 2.30GHz SYSTEM MEMORY: 6.782737731933594GB NODE VERSION: v10.18.1
benchmark 地址:raxjs/server-side-rendering-comparison
Serverless 的发布模式
Rax 的工程支持 Serverless 的发布模式,可被发布到阿里云、AWS 等函数托管平台,也可以集成到基于 express 、koa 的传统 Node.js 应用。
以发布到社区的 Serverless 托管平台 [Now](World-Class Static Hosting - ZEIT) 为例,没有复杂的应用开发和申请流程,在现有 Rax 工程中,扩展一个插件,就可以一键完成 SSR 应用的上线了:
性能对比
以一个带数据请求的真实 Rax SSR 应用为例,性能对比数据显示:WIFI 下, SSR 的首屏呈现时间相比 CSR 提升 1 倍;弱网环境下,SSR 相比 CSR 提升约 3.5 倍。
录屏效果:(左:SSR;右:CSR)
SSR Demo 地址:rax-taobao-home ssr
CSR Demo 地址:rax-taobao-home csr
让我们一起开启 SSR 之旅吧
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
xk-time 0.0.3 发布
1.增加了获取月份英文,月份英文简称,月份中文,星期英文,星期英文简称,星期中文等方法。 2. 增加了获取准确的起始时间,如,获取准确开始时间00:00:00,获取准确结束时间23:59:59,方便统计某个时间区间的销量等问题。 (1)当天起始时间,昨天起始时间, (2)当前月第一天开始时间,当前月最后一天结束时间,月份最后一天往往因为月份不同和闰年而不同。 (3)上个月第一天开始时间,上个月最后一天结束时间,月份最后一天往往因为月份不同和闰年而不同。 (4)某个指定月的起始结束时间等等 3. 代码优化。
- 下一篇
献给即将35岁的初学者,焦虑 or 出路?
对抗职场“35 岁焦虑”,也许唯一的方法是比这个瞬息万变的商业社会跑得更快! 一直以来,都有许多人说“程序员或测试员是个吃青春饭的职业”,甚至还有说“35 岁混不到管理就等于失业”的言论。 知乎上,一则询问“35 岁以上的人都干嘛去了”的问题获得了近 2000 万浏览量,回答超过 1300 条。 “35 岁职场焦虑”的话题受到越来越多关注,特别在科技圈。自 2017 年,华为传出“清理 35 岁以上员工”消息以来,各企业关于“劝退 35 岁以上员工”、“招聘限 35 岁以下”的传闻此起彼伏,在无数传言和事实下,人人自危。 很多程序员或测试员将35岁看作是职业生涯的一个重要转折点,认为干到35岁之后就干不动了,甚至有些自己都在怀疑这是个吃青春饭的行业,35岁以后的出路在哪里? 35岁现象人人都明白,但要给出一个定义并不容易。 到了35岁之后,一方面需要高薪抚养家庭,另一方面却无法像以前那样全身心投入到工作,性价比急剧下降; 与此同时, 大批廉价的新手涌入,他们往往还使用最新的技术,老一辈程序员或测试员只能慢慢的靠边站了。 面临职业瓶颈,程序写不动,测试技术跟不上,上升又困难。 那为什么会...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS关闭SELinux安全模块
- CentOS7设置SWAP分区,小内存服务器的救世主
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS8安装Docker,最新的服务器搭配容器使用