ssr免费节点(服务器节点购买)

背景

“让每一个用户在最短的时间内看到页面上的重要内容”一直是前端工程师精益求精的方向。对于一个H5源页面，我们已经有很多缩短首屏渲染时间的方法，比如数据预取、离线缓存等。但是目前由于数据预取和离线缓存都依赖于客户端的能力，所以往往会给我们带来一些限制。比如，我们无法知道第三方APP在用于推出业务增长的新页面时是否有这样的能力。比如使用离线缓存能力，我们受限于命中率和缓存对APP性能的负面影响。

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

方案要点

目前主流的前端框架，比如React，都已经提供了支持SSR的API。我们可以只用几行代码，将原本在客户端执行的一段UI逻辑，转换成可以在节点层直接输出HTML的函数。在此基础上，SSR技术方案应同时满足以下要求:

页面首屏(FMP)有效渲染时间缩短:从webview发送页面url请求到用户看到首屏有效内容的时间确实缩短了。

应用稳定性高，运维成本低:利用已经非常成熟的CDN cache前端静态资源+提供首屏数据的Java服务，保证节点应用提供的前端页面尽可能稳定。此外，一旦节点服务不可用，页面可以自动降级到稳定的CSR(H5页面的客户端渲染)模式，无需工程师手动降级。

R&D成本低:采用SSR后，前端工程师仍然只需要关心业务功能的实现，无需增加额外的开发成本来满足稳定性要求。

本文将围绕这三点重点介绍闲鱼的SSR方案是如何设计的。

技术架构

我们先来看看仙域目前SSR架构的整体设计，然后再分别重点介绍各个功能点的实现。

如图所示，架构设计考虑了用户正常访问的SSR链接(红色节点)和SSR应用不可用时自动降级的CSR链接(蓝色节点)。当SSR失败时，使用CSR链路作为自底向下方案是保证SSR方案稳定性的关键点。

SSR链路基于serverless的node应用

随着阿里无服务器生态建设的不断完善，前端学员不需要像传统节点应用那样，花费太多时间去运营维护节点应用。借助“功能即服务”的FaaS功能，我们可以专注于实现节点应用程序本身的功能。

为了实现SSR功能，我们需要在节点层实现两个服务:

数据聚合。一个首页第一屏需要的数据可能来自多个服务器的接口(Java)。我们在节点层实现一个服务，调用首屏所依赖的所有服务器接口，汇聚到一个接口，输出所有首屏数据。这种数据胶的设计是通过节点层实现的，也可以降低前端和服务器之间的开发协作成本。前端只需要获取服务器原子函数级的数据，就可以根据UI的需要，以自己方便的方式定义最终输出的数据结构。

直接进入HTML页面(HTTP服务)。当用户访问一个URL时，节点应用获取页面构造的产物，同时调用上一篇文章提到的首屏数据接口，利用返回的数据生成页面的DOM树。

SSR应用网关

当一个前端应用需要发布的时候，或者某个应用不可用的时候，我们当然不希望影响到其他应用。因此，在业务维度上，我们将与特定业务相关联的前端功能作为独立的节点应用来维护。那么，为什么我们需要一个公共网关为应用提供服务，而不是每个应用单独为用户提供服务呢？

原因是每一个对用户开放的HTTP服务都必须访问集团的“统一访问”机制。统一接入承载了许多基本功能，如转发、负载平衡、安全认证等。接入的全过程，包括应用架构审核、域名配置、其他安全机制的确认等。，需要1~2个工作日。因为我们会不断有新的业务和新的项目，这将消耗大量的人力成本，没有必要为每个新的应用程序进行统一访问。因此，我们在所有节点应用之上设置了一个网关应用，使用Nginx根据不同的访问路径将用户请求分发到不同的应用。网关本身作为CDN back source的源站。

CDN边缘节点

CDN可以将源站上的资源缓存到离客户端最近的CDN节点。用户访问静态资源时，直接从缓存中获取，避免了通过长链接返回源，提高了访问效率。这个过程叫做CDN加速。

除了资源加速，阿里云的CDN节点还提供基于无服务器的边缘计算能力。简单来说，除了缓存静态文件，CDN还可以作为JavaScript脚本的运行环境。当节点服务的稳定性还没有达到业务需求时，前端工程师可以在CDN节点上部署JavaScript代码，让CDN节点完成一定的功能。CDN边缘程序、边缘缓存和源站之间的链接如下。

对于SSR来说，CDN edge程序的作用很简单:当成功获取SSR页面(状态200)时，会将直页返回给用户；否则，用户总是可以通过访问降级页面的CSR地址来看到正确的页面。我们将CDN缓存周期设置为5分钟。缓存生效时，上图紫色部分显示的是用户访问链接，缓存失效时是红色链接。

此后，我们解释了前三个问题中的前两个:如何保证节点应用的稳定性和如何降级页面。

CSR链路

虽然CSR降级链路不经常被用户覆盖，但是它们对于整个方案仍然非常重要。用户访问CSR页面时，首先从气源站获取html页面(此时页面中没有首屏内容)，然后执行html页面中引入的JS脚本，调用mtop接口(阿里外部异步请求数据采集接口)渲染页面。因此，对于CSR环节的实现，我们只需要关心两件事:

需要构建静态资源文件并将其推送到空中。

需要有一个可以在Web端调用的Ajax接口(在阿里一般称为mtop接口)。

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

所以整个环节可以由前端同学来完成，不需要像传统CSR页面开发那样由服务器端同学提供mtop接口。

实施SSR链接和CSR链接后，我们已经满足了三个关键要素中的前两个要素:

FMP时间缩短:

在SSR链接中，用户访问首屏有效内容的时间为:

CDN缓存命中时间:HTML页面RT。

CDN缓存未命中时:节点服务直接页面的执行时间HTML页面的RT

在CSR link中，用户访问首屏内容的时间是:

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

在线数据有:

稳定性高，运行维护成本低；

应用之间R&D、发布、运行的隔离，使得每一个R&D学生都不需要担心自己应用的稳定性会受到其他应用的影响；缓存CDN的请求，使得节点应用每60s才被CDN回传一次源，即使缓存时间只有1分钟，大大降低了流量高峰时对节点服务稳定性的考验；以及CDN edge程序的自动降级逻辑，让SSR链接失效时，应用自动降级到CSR模式，不影响用户访问页面，不需要R&D同学手动运维。

应用结构

在应用结构的设计上，我们尽可能的降低了前端学生的研发成本。当CSR降级链接、请求转发等功能全部放开后，前端每增加一个新项目，前端开发学员只需要根据应用模板开发相应的业务功能，不需要关心稳定性保障环节。并且只需要开发一个前端源代码，就可以构建出针对不同场景的产品。我们的应用程序结构设计如下图所示:

节点层接口发布后将部署到无服务器服务市场。网关对接等功能可以直接通过配置完成。

后续

灰度、可监控、可回滚是保证前端应用稳定性的三要素，SSR应用也不例外。目前闲鱼的SSR应用已经被回滚并监控。接下来，我们将为它设计一个可靠且易于操作的灰度方案。

不能闲着？来闲鱼！

选我

闲鱼是阿里巴巴旗下品牌，也是国内最大的闲置交易平台。自2014年成立以来，使用闲鱼的用户已经超过2亿，其中超过一半是90后。闲鱼是继淘宝、天猫之后，阿里巴巴正在催生的第三个万亿平台。

闲鱼技术部不断推动业务转型，通过创新追求更多价值。从闲置业务的老业务，到打造“无忧购”和“新线下”社区，从出书和峰会发声，到开源专利和海外传播。闲着，闲鱼——技术团队对极致的探索和深耕，是我们的自信。

立即加入

1.聘请项目经理/客户端/服务器/前端/数据+算法/质量工程师。

2.给guicai.gxy@alibaba-inc.com寄简历

3、您还可以在头条、知乎、掘金、facebook、twitter找到我们