您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识

ssr链接怎么用(安卓手机ssr怎么添加节点)

页面,节点,缓存ssr链接怎么用(安卓手机ssr怎么添加节点)

发布时间：2016-12-08加入收藏来源：互联网点击：

很多朋友想了解关于cdn的一些资料信息，下面是小编整理的与cdn相关的内容分享给大家，一起来看看吧。很多朋友想了解关于缓存服务器的一些资料信息，下面是小编整理的与缓存服务器相关的内容分享给大家，一起来看看吧。

背景

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

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

方案要点

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

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

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

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

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

技术架构

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

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

SSR链路

基于serverless的node应用

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

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

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

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

SSR应用网关

当需要发布某一个前端应用，或者当某一个应用不可用时，我们肯定不希望影响到其他的应用。所以我们在业务维度，将跟某个特定业务相关联的前端功能作为独立的Node应用单独维护。那么，为什么我们还需要一个公共的网关为应用提供服务，而不是每一个应用单独向用户提供服务呢？

原因是每一个对用户开放的HTTP服务，都必须接入集团的「统一接入」机制。统一接入承载了转发、负载均衡、安全认证等多种必不可少的功能。接入的整个流程，包括应用架构的评审、域名的配置、其他安全机制的确认等等需要1~2个工作日。而由于我们不断会有新的业务、新的项目，为每一个新应用都走一遍统一接入是要消耗大量人力成本且没有必要的。因而我们在所有Node应用之上，架设网关应用，利用Nginx根据访问path的不同，将用户的请求分发到不同的应用上。网关本身作为CDN回源的源站。

CDN边缘节点

CDN可以将源站上的资源缓存到距离客户端最近的CDN节点上。当用户访问该静态资源时，直接从缓存中获取，避免通过较长的链路回源，提高访问效率。这个过程被称为「CDN加速」。

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

对于SSR来说，CDN边缘程序实现的功能非常简单：当获取SSR页面成功时（status 200）,将直出的页面返回给用户，否则访问降级页面CSR的地址，保证用户永远能够看到正确的页面。我们将CDN缓存周期设置为5分钟。缓存生效时，用户访问链路为上图紫色部分所示，缓存失效时，为红色链路。

自此，我们就解释了开始时3个问题的前2个：怎么保障Node应用稳定性，以及怎么进行页面降级。

CSR链路

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

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

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

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

由此可以让整个链路全部由前端同学完成，无需像传统CSR页面开发那样由服务端同学提供mtop接口。

实现SSR链路和CSR链路之后，我们已经满足了3个关键要素中的前2个：

 1/2    1 2 下一页 尾页