闲鱼源码页面SSR最佳实践

背景

「让每一个用户在最短的时间内看到页面上重要的内容」一直以来都是前端工程师们精益求精的方向。对于一个H5的源码页面，我们已经有了很多缩短首屏渲染时间的方法，比如数据预取，离线缓存。但在目前看来，由于数据预取和离线缓存都依赖客户端的能力，很多时候会给我们带来一些限制。比如用于增长业务的外投拉新页面，我们并不能知晓第三方APP是否具备这样的能力。再比如使用离线缓存能力，我们受制于命中率高低，以及缓存对APP性能带来的负面影响这样的问题。

服务端渲染，让最重要的内容和用户之前，只需要请求HTML DOC的时间，并且不依赖于客户端的能力，可以大大缩短用户看到页面首屏内容的时间。

方案要点

目前主流前端框架比如React，都已经提供了支持SSR的API，我们可以只用几行代码便将一段原本执行在客户端的绘制UI的逻辑转化为可以在Node层直出HTML的功能。在此基础之上，一个SSR技术方案应该同时做到以下几点要求：

• 页面首屏有效绘制（FMP）时间变短：从webview发出页面url请求，到用户看到首屏有效内容的时间真实变短。
  

• 应用稳定性高，运维成本低：保证由Node应用提供前端页面，尽可能跟已经非常成熟的「CDN缓存前端静态资源 + Java服务提供首屏数据」有相近的稳定性。并且Node服务一旦出现不可用的情况，页面能够自动降级到稳定的CSR（当下H5页面都在用的客户端渲染）模式，而不需要工程师手动执行降级。
  

• 低研发成本：采用SSR以后，前端工程师仍然只需要关心业务功能的实现，而无需为满足稳定性要求增加额外开发成本。

本文将重点介绍闲鱼的SSR方案围绕这三个要点进行了怎样的设计。

技术架构

先来看下闲鱼目前SSR架构整体的设计，再来单独聚焦每一个功能点的实现。

如图，架构设计分别考虑了用户正常访问的SSR链路（红色结点），以及SSR应用不可用时自动降级到的CSR链路（蓝色结点）。用CSR链路作为SSR失败时的降级兜底方案，是保证SSR方案稳定性的关键点。

SSR链路

基于serverless的node应用

• 数据聚合。一个前端页面首屏需要的数据，可能来自于多个服务端(Java)的接口。我们在Node层实现一个Service，该Service调用首屏依赖的所有服务端接口，将其汇聚为一个接口，输出全部首屏数据。这种由Node层实现数据胶水的设计，同时可以降低前端与服务端开发协作的成本。前端只需要得到服务端原子功能级别的数据，便可以根据UI的需要按照自己方便的方式定义最终输出的数据结构。

• 直出HTML页面（HTTP服务）。当用户访问某个URL时，Node应用获取页面构建产物，同时调用上条提到的首屏数据接口，将返回的数据用于生成页面的DOM树。

SSR应用网关

CDN边缘节点

CSR链路

CSR降级链路虽然不经常被用户覆盖到，但对于整个方案来说仍然很重要。用户访问CSR页面时，首先从air源站获取到html页面（此时页面中没有任何首屏内容），然后执行html页面中引入的JS脚本，调用获取首屏数据的mtop接口（阿里弹外异步请求数据获取接口）进行页面渲染。因而对于CSR链路的实现，我们只需要关心两件事情：

• 静态资源文件需要构建并推送到air。

• 需要有在Web端可以被调用的Ajax接口（在阿里一般被称为mtop接口）。

对于第一点，我们可以在应用构建和发布的时候，直接将只有layout内容的HTML模板发布。对于第二点，我们可以复用SSR链路时开发的首屏数据接口，直接将其对接集团对外的网关，无需二次开发，如下图所示。

•CDN 缓存命中时： HTML页面 RT。

• CDN缓存 未 命中时： Node服务直出页面执行时间 + HTML页面RT

CSR链路中，用户访问到首屏内容的时间为：

• HTML页面RT + JS文件下载&执行时间 + 首屏mtop接口 RT + 首屏内容DOM内容生 成时间

线上数据为：

稳定性高、运维成本低： 应用之间的研发、发布及运行的隔离，使得每个研发同学不需要担心自己应用的稳定性会受其他应用的影响；CDN对请求的缓存，使得即使缓存时间只有1分钟，Node应用也只在每60s才被CDN回源一次，大大降低了流量高峰时对Node服务稳定性的考验；以及CDN边缘程序的自动降级逻辑，使得SSR链路失败时，应用自动降级为CSR模式，不影响用户对页面的访问，不需要研发同学手动运维。

应用结构

我们在应用结构的设计上，尽可能降低了前端同学研发的成本。当CSR降级链路与请求转发的功能全部发布之后，每次前端新增一个新的项目，前端开发同学只需要根据应用模板开发相应的业务功能，无需关心稳定性保障链路。并且只需要开发一份前端源码，便可以构建出用于不同场景的产物。我们的应用结构设计如下图所示：

Node层接口在发布时会被部署到Serverless服务市场。网关的对接等功能均可以通过配置的方式直接完成。

后续

可灰度、可监控、可回滚是前端应用稳定性保障的三要素，SSR应用也不例外。目前闲鱼的SSR应用已经实现了可回滚与可监控，接下来我们将为它设计可靠性强、操作方便的灰度方案。