当 SSR 遇上 Serverless，轻松实现页面瞬开-低调大师

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

2020-02-27 642

作者：水澜@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 之旅吧

https://rax.js.org/ssr

微信关注我们

原文链接：https://www.oschina.net/news/113671/rax-ssr-news

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

xk-time 0.0.3 发布

1.增加了获取月份英文，月份英文简称，月份中文，星期英文，星期英文简称，星期中文等方法。 2. 增加了获取准确的起始时间，如，获取准确开始时间00:00:00，获取准确结束时间23:59:59，方便统计某个时间区间的销量等问题。（1）当天起始时间，昨天起始时间，（2）当前月第一天开始时间，当前月最后一天结束时间，月份最后一天往往因为月份不同和闰年而不同。（3）上个月第一天开始时间，上个月最后一天结束时间，月份最后一天往往因为月份不同和闰年而不同。（4）某个指定月的起始结束时间等等 3. 代码优化。

2020-02-27

669

对抗职场“35 岁焦虑”，也许唯一的方法是比这个瞬息万变的商业社会跑得更快！一直以来，都有许多人说“程序员或测试员是个吃青春饭的职业”，甚至还有说“35 岁混不到管理就等于失业”的言论。知乎上，一则询问“35 岁以上的人都干嘛去了”的问题获得了近 2000 万浏览量，回答超过 1300 条。 “35 岁职场焦虑”的话题受到越来越多关注，特别在科技圈。自 2017 年，华为传出“清理 35 岁以上员工”消息以来，各企业关于“劝退 35 岁以上员工”、“招聘限 35 岁以下”的传闻此起彼伏，在无数传言和事实下，人人自危。很多程序员或测试员将35岁看作是职业生涯的一个重要转折点，认为干到35岁之后就干不动了，甚至有些自己都在怀疑这是个吃青春饭的行业，35岁以后的出路在哪里？ 35岁现象人人都明白，但要给出一个定义并不容易。到了35岁之后，一方面需要高薪抚养家庭，另一方面却无法像以前那样全身心投入到工作，性价比急剧下降；与此同时，大批廉价的新手涌入，他们往往还使用最新的技术，老一辈程序员或测试员只能慢慢的靠边站了。面临职业瓶颈，程序写不动，测试技术跟不上，上升又困难。那为什么会...

2020-02-27

600

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。