ssr服务器极致渲染

域名

RDS

云服务器 ECS

中国站

 

文档购物车ICP备案控制台

 

金秋上云季

 

 

• 首页
• 技术与产品
   
• 社区
   
• 直播
   
• 开发者学堂
   
• 开发者云
   
• 工具与资源中心
   
• 天池大赛
• 飞天加速计划2.0
   

提问题

发文章

个人中心

 

 

 

 

开发者社区> 新零售淘系技术> 正文

当 SSR 遇上 Serverless，轻松实现页面瞬间开

淘系技术  2020-02-06 1098浏览量

简介： 最近随着 Rax SSR 完成渲染性能 6x React 的提升，以及工程上 Serverless 发布形式的对接，我想是时候跟大家介绍下 Rax SSR 了。

作者|陈俊(水澜)
出品|阿里巴巴新零售淘系技术部

最近随着 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 倍。

-----------compare renderToString----------
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 地址：
https://github.com/raxjs/server-side-rendering-comparison

▐ Serverless 的发布模式
Rax 的工程支持 Serverless 的发布模式，可被发布到阿里云、AWS 等函数托管平台，也可以集成到基于 express 、koa 的传统 Node.js 应用。

以发布到社区的 Serverless 托管平台Now 为例，没有复杂的应用开发和申请流程，在现有 Rax 工程中，扩展一个插件，就可以一键完成 SSR 应用的上线了：

性能对比

以一个带数据请求的真实 Rax SSR 应用为例，性能对比数据显示：WIFI 下， SSR 的首屏呈现时间相比 CSR 提升 1 倍；弱网环境下，SSR 相比 CSR 提升约 3.5 倍。

录屏效果：(左：SSR；右：CSR）

SSR Demo 地址：https://rax-demo.now.sh/ssr/home
CSR Demo 地址：https://rax-demo.now.sh/csr/home

让我们一起开启 SSR 之旅吧

☞https://rax.js.org/ssr

更多技术干货，关注「淘系技术」微信公众号

 

分享：

推荐关注：

· 云栖大会开源引力峰会，震撼来袭！· NPM镜像站全新上线，让您的构建更加迅速。· 低代码征文召集令,快来看· 乘风者计划邀您入驻社区，精彩权益即刻享

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

新零售 弹性计算 运维 负载均衡 前端开发 rax JavaScript Serverless Linux 开发者

云服务器登录云服务器设置

 

评论

张维ACE

评论

7u63tqmc7p6bi
2020-02-09

我也以为是shadow，结果点进来一看就不一样了

 

 

 

游客blwhv25si4cyo
2020-02-07

还以为是shadowsocksr...

 

 

 

 

新零售淘系技术

+ 订阅

淘系技术部隶旗下包含淘宝技术、天猫技术、农村淘宝技术、闲鱼、iHome等团队和业务，是一支是具有商业和技术双重基因的螺旋体。 我们致力于成为全球最懂商业的技术创新团队，打造消费者和商家一体化的新零售智能商业平台，创新商业赛道。随着新零售业务的持续探索与快速发展，我们不断吸引用户增长、机器学习、视觉算法、音视频通信、数字媒体、端侧智能等领域全球顶尖专业人才加入，让科技引领面向未来的商业创新和进步。欢迎投递简历至ruoqi.zlj@taobao.com

官方博客

• 程序员最重要的能力是什么？
• 程序员如何在业余时间提升自己？
• 设计模式最佳套路5 —— 愉快地使用工厂方法模式
• 设计模式最佳套路4 —— 愉快地使用模板模式
• 设计模式最佳套路3 —— 愉快地使用代理模式
• DDD系列第五讲：聊聊如何避免写流水账代码
• 跨平台Web Canvas渲染引擎架构的设计与思考
• 如何吃透一个Java项目？（附学习实践）
• JDK 16 正式发布，新特性实践尝鲜来啦！
• 新工具开源！一款iOS自动化利器（附地址）
• Flutter2.0重磅发布！带你一文打尽Flutter Engage

展开 

最新文章

• Linux文件与目录操作入门 --《我的linux初体验》
• 给网站的标题添加点色彩
• Python的import语句笔记
• Java 8中 Date 获取时间所在 周一，月第一天，季度第一天，年第一天的方式
• 飞天加速计划·高校学生在家实践
• 记第一次云服务器搭建
• 使用@ContextConfiguration注解后，提示找不到配置文件
• Intellij IDEA 乱码解决究极方案和一些常见问题
• FtpClient.storeFile返回false解决方法
• 解决tomcat部署包错误

展开 

相关文章

• 阿里云ECS使用体验
• 飞天加速计划-助力伴我成长
• 阿里云ECS服务器
• 飞天加速计划体验
• Linux常用命令及部分详解
• RabbitMQ安装步骤
• linux grep 从入门到精通
• 飞天加速计划·高校学生在家实践
• 给网站的标题添加点色彩
• Linux文件与目录操作入门 --《我的linux初体验》

展开 

淘系开源，欢迎star哟

• coobjc: https://github.com/alibaba/coobjc
• 更多开源项目 请关注: ”淘宝技术“微信公众号

 

售前咨询

95187转1

专业技术咨询

全方位产品解读

成熟解决方案

成功客户案例分享

支持与服务公告帮助文档自助服务新手学堂在线客服技术工单我要建议我要投诉迁移与部署运维与管理优化与提升服务案例支持计划

账户管理管理控制台备案管理域名控制台账号管理充值付款线下汇款/电汇合同申请索取发票合规性

快速入口域名信息查询（WHOIS）云产品快报海外上云客户案例举报中心信任中心产品图标产品学习路径阿里云认证贡献者榜单

资源和社区开发者社区开发者学院公开课问答藏经阁天池平台阿里云创新中心阿里云全球培训中心在线学习开放实验室考试认证高校合作码上公益

关注阿里云企业决策必读阿里云APP阿里云微信阿里云微博阿里云支持与服务

热门产品

短信服务SSL 证书CDN容器服务 ACK负载均衡 SLB轻量应用服务器Web 应用防火墙日志服务 SLSDDoS 防护

用户热搜

视频直播Quick BI 数据分析弹性公网 IP全站加速 DCDNDataWorks机器学习平台 PAI智能对话机器人云数据库 HBase 版消息队列 Kafka 版

企业场景

容器镜像服务 ACR云防火墙AnalyticDB PGDataV 数据可视化专有云云盾对象存储 OSS消息队列 RabbitMQ视频点播安全管家服务

更多推荐

企业物联网平台MaxComputeRDS MySQL 版Alibaba Cloud Linux图数据库 GDB图像搜索微消息队列 MQTT 版智能外呼机器人云服务器 ECS

关于阿里云2.0法律声明及隐私权政策廉正举报联系我们

阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘

2009-2021 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙通网安【2019】94号 信部电函【2005】374号

浙公网安备 33010602009975号浙B2-20080101-4