能让你纵享丝滑的SSR技术,转转这样实践

标签: ssr 技术 转转 | 发表时间:2021-04-22 15:56 | 作者:大转转FE
出处:https://juejin.cn/frontend

SSR最佳实践

秒开率对于用户的留存率有直接的影响,数据表明, 网页加载时间过长会直接导致用户流失.转转集团作为一家电商公司, 对于H5页面的秒开率有着更加严格的需求, 在主要的卖场侧页面(手机频道页、3c频道页、活动页)等重要流量入口我们都采用了SSR(服务端渲染)技术来构建页面,今天就带大家了解一下我们摸索出来的一些最佳实践.

网页的前世今生

在早期的web应用中,实际上我们都是用的服务端渲染技术, 像jsp、asp、php等各种后台模板生成的页面,前端都是拿到整张页面,不用自己去拼接DOM.后来随着前后端分离开发模式,衍生出了最主要的两种渲染方式CSR以及SSR.

  • CSR : 客户端渲染,整个渲染流程是: 浏览器请求url --> 服务器返回index.html(空body、白屏) --> 再次请求bundle.js、路由分析 --> 浏览器渲染 bundle.js体积越大, 就会导致白屏的时间越长,给用户的体验就越差(当然,这可以借助打包构建工具来优化这部分)

    交互流程图如下

图1-1客户端渲染流程图
  • SSR : 服务端渲染, 服务端渲染分为两个步骤:

  • 阶段一: 浏览器请求url --> 服务器路由分析、执行渲染 --> 服务器返回index.html(实时渲染的内容,字符串) --> 浏览器渲染 (此时是一个静态页面, 不可交互, 依赖于服务端的能力, 这就是快的原因)

  • 阶段二:浏览器请求bundle.js --> 服务器返回bundle.js --> 浏览器路由分析、生成虚拟DOM --> 比较DOM变化、绑定事件 --> 二次渲染 (用户可交互)

我们来看看整个交互流程图 :

图片名称 图片名称
图 1-2 服务端渲染交互流程图

SSR构建逻辑

理解了两种渲染模式的异同,我们来看看SSR整个构建逻辑(主要以Vue-SSR为例)

我们以官网的图片为例:

图 2-1 SSR构建逻辑

从图中我们可以知道 :

在整个构建过程中, 我们有两个入口, 一个是server-entry.js, 执行server端的逻辑, 一个是client.js, 执行client端的逻辑, 然后通过会将webpack打包分成两个Bundle: 服务端bundle; 客户端bundle. Node.js会处理服务端bundle用于SSR, 客户端bundle会在用户请求时和已经由SSR渲染出的页面一起返回给用户, 然后在浏览器执行”注水”( hydrate), 接管Vue接下来的业务逻辑.

理解了整个构建逻辑,接下来我们来看看我们是怎么运用SSR来服务我们的项目的.

SSR构建项目的背景

卖场侧业务首页组成大同小异: 主要分首屏和第二屏, 首屏有多个模块组成, 第二屏是商品Feed流,便于读者理解, 我们抽象出了页面结构图:

图片名称 图片名称
图 2-2 页面结构图

(欢迎大家下载转转app体验)

而且这些页面都有一个共同的特点:

  • 只用于展示, 和用户的状态不强绑定(不需要用户登录)
  • 页面状态稳定,内容不会经常变更
  • 都是重要流量的第一个入口(首页)

由于对于秒开率有着极高的要求,又承载了主要流量入口,结合以上页面特点,所以我们使用了SSR来提升用户体验.

经过一系列的探索和探究, 我们最终使用Nuxt.js来作为我们的技术选型.

这里提下为啥使用Nuxt.js作为我们的技术选型, 主要原因有以下几点:

  1. 集团内部C端业务是以Vue技术栈为主,B端技术栈是以React为主, 所以不考虑React服务端渲染技术栈;
  2. Nuxt.js是开箱即用的服务端渲染框架,不用开发人员自己去搭建Vue+ Vue-server-renderer + vuex来集成服务端渲染框架, 接入成本比较低.

SSR运用的最佳实践

目前我们使用SSR实现的主要能力有:

  • 首屏使用服务端渲染,第二屏使用客户端渲染,首屏模块数据可调整,即优化了性能, 又丰富了页面配置.
  • 合理化使用缓存, 进一步提升用户体验.
  • 实现css注入,达到按需换肤的效果.
  • 使用ErrorBoundary拦截错误,使得组件错误不会影响整个页面白屏.
  • 按需加载第二屏数据,只有滑动到可见范围, 才加载第二屏数据
  • 针对大促场景, 结合服务端能力, 以及各种监控,docker扩容,保证页面稳定.

接下来就和大家探索其中几种能力的主要思路:

怎样实现首屏使用服务端渲染,第二屏使用客户端渲染

这种实现方式主要是结合asyncData在服务端异步获取数据,使用vue动态组件component的特性,来调整模块的渲染顺序; mounted生命钩子只会在客户端执行, 使用仅在客户端渲染组件的特性来实现的.

示例代码:

       
  
  "(e, i) in structureOrder">
    
      "activityState.structure[e]"
                 :is="Mutations.name2Component(e)"
                 class="anchor"
                 :id="e"
                 :key="i" :name="e" v-if="activityState.structure[e] || e === 'bar' "/>
    
  
  
  
    
    
"listComponent" :tab="labelFilter"/>
  


复制代码

获取数据:

   //服务端渲染数据    
async asyncData({app, route, req}) {
  const initData = await app.$axios.$get(host, {
    params: {
      name: key, from, smark, keys: `structure,base,labelFilter,navigate,redPack,${elements}`
    }, headers
  })
  const {structureInfo, structureOrder, restStructure, anchors} = Mutations.initStructure(initData)
  return {
    structureInfo,
    restStructure,
    structureOrder, //动态返回对应模块的名称
    useVideo: Mutations.checkUseVideo(req),
    theme,
    pageFrom: route.query.from,
    isPOP,
    anchors,
    ...formInfo
  }
},
async mounted() {
    //获取客户端渲染的数据
   const res = await this.initData()
},
复制代码

怎样使用ErrorBoundary捕获组件级别错误,避免整个页面白屏

关于ErrorBoundary这个捕获错误的组件,这个组件的主要功能是使得组件级的错误不会蔓延到页面级,不会造成整个页面的白屏,考虑到服务端渲染可能会发生偶发性错误,状态容易变的不可控, 所以使用这个能力还是很有必要的, 这个组件主要使用vue提供的 errorCaptured 来捕获组件级的错误, 想详细了解这个api的作用可以去看官方文档,具体的实现如下:

   const errorBoundary = Vue => {    
  Vue.component('ErrorBoundary', {
    data: () => ({ error: null }),
    errorCaptured(err, vm, info) {
      this.error = `${err.stack}\n\nfound in ${info} of component`
      SentryCapture(err, 1) //异常上报到sentry
      return false
    },
    render() {
      return (this.$slots.default || [null])[0] || null
    }
  })
}

// 全局注册errorBoundary
Vue.use(errorBoundary)
复制代码

怎样实现css注入,实现页面换肤

这个功能的主要作用是 : 可以根据配置json文件定制化活动页面的样式, 做到"千人千面" (一个会场的key可以配置一种样式, 但是底层代码是一套),使得元素多样化,在视觉上给用户体验带来很大提升.

我们先来看看效果示意图: 图片名称

以上就是展示效果, 借住CSS注入, 我们可以根据不同的json文件来定制化页面的样式, 只需要维护一套代码, 简单高效.

实现逻辑也很简单,主要是运用了Nuxt.js框架提供的head方法:

   head() {    
            //this.baseInfo.additionStyle是从json文件拿到的样式
      //通过css权重, 可以实现样式覆盖
      return {
        style: [
          {cssText: this.baseInfo?.additionStyle || '', type: 'text/css'}
        ],
        __dangerouslyDisableSanitizers: ['style']  // 防止对一些选择器的特殊字符进行转义
      }
    },
复制代码

不仅如此, 还可以实现js注入, 感兴趣的小伙伴可以自己去了解,底层原理可以了解下 vue-meta 这个库

但是, 随着业务的不断迭代, 这种注入方式还是存在很多可优化的点:

  • 每个活动页运营同学都要维护一份json文件,里面包含冗长的css配置字段, 活动规则等等, 特别是css配置字段,就是一段冗长的css, 给运营和开发同学带来很大的不便;
  • 运营同学维护成本高,学习成本高,操作成本高;
  • 对于UI同学成本也大, 每次都需要UI同学来设计活动页面样式;

目前, 集团内部正在使用 魔方 一步一步去替代这种方式, 魔方 只需要运营同学拖拖拽拽, 就能生成一个活动页, 简单高效, 想要了解魔方的同学, 可以 继续关注我们的公众号

怎样实现组件滑动到可见范围,才加载数据

其实这种优化页面的方法并不是说只适用于SSR, 其他非SSR页面也可以使用这种方式来优化;

看看我们的实现方式 :

   function asyncComponent({componentFactory, loading = 'div', loadingData = 'loading', errorComponent, rootMargin = '0px',retry= 2}) {    
  let resolveComponent;
  return () => ({
    component: new Promise(resolve => resolveComponent = resolve),
    loading: {
      mounted() {
        const observer = new IntersectionObserver(([entries]) => {
          if (!entries.isIntersecting) return;
          observer.unobserve(this.$el);

          let p = Promise.reject();
          for (let i = 0; i < retry; i++) {
            p = p.catch(componentFactory);
          }
          p.then(resolveComponent).catch(e => console.error(e));
        }, {
          root: null,
          rootMargin,
          threshold: [0]
        });
        observer.observe(this.$el);
      },
      render(h) {
        return h(loading, loadingData);
      },
    },
    error: errorComponent,
    delay: 200
  });
}

export default {
  install: (Vue, option) => {
    Vue.prototype.$loadComponent = componentFactory => {
      return asyncComponent(Object.assign(option, {
        componentFactory
      }))
    }
  }
}
复制代码

实现原理主要是使用vue高阶组件, 元素到达可见范围内, 延迟加载组件;

看看效果图:

图片名称

我们可以看到,只有到底部商品Feed流出现在可视范围,才去请求对应的接口

针对大促场景怎样保证页面稳定

所谓大促场景,是指像 6.18, 双11,这种场景下, 面对大流量, 如何保证页面稳定? SSR是CPU密集型任务, 意味着很耗费服务器资源,集团目前主要采取的策略是:

  • 对接口进行压测, 模拟高并发场景下页面性能, 接口响应速度;
  • 集团内部实现了一套监控系统, 可以实时监控CPU,内存的消耗情况;
  • 需要有服务器扩容方案, 比如接入docker, 可以实现服务器实时扩容

怎样利用缓存

请大家移步集团一位前端大佬写的公众号文章: Nuxt实现的SSR页面性能优化的进一步探索与实践

最终,看看我们最终的实现效果:

图片名称

可以看到, 首屏渲染时间在 594ms, 秒开率在 百分之87左右;

SSR的不足

ssr的使用过程并不是一帆风顺的, 在使用的过程中, 也总结几点不足之处:

  • 对于开发人员的要求更高, 要学习其他的额外知识,例如: Linux , node相关知识, 需要具备一定的后端思维;
  • 服务端渲染接口抓包不方便, 我们在客户端抓取不到服务端的接口请求, 不过对于使用Mac电脑开发的同学,可以使用 proxychains-ng 来抓取服务端请求的接口
  • 冗长的配置环境过程, 每次开发联调需要配置后端host
  • 对于服务器资源有要求,并发量越大, 资源消耗的越多
  • 服务端渲染可能会发生偶发性错误, 需要有一套降级方案

至于如何取舍, 看各位同学的项目需求,以及运用场景;

总结

SSR的使用有利有弊, 我们应该结合自己的业务特性去制定合适的方案, 它的优点就是快, 有利于SEO, 缺点也很明显, 比较耗费服务器资源, 对于亿级流量的超巨app来说, 理论上是不太合适的, 集团内部也有自己的一套方案来优化客户端渲染, 使得用户体验尽量向SSR靠齐.每一种技术的运用只有实践了才知道利弊,才能产生碰撞. 本文只是简单的带大家了解一条业务线上对SSR的运用, 所阐述的方面也只是冰山一角, 希望给广大开发者带来一定的启发, 前人栽树, 后人乘凉, 感谢转转FE前辈们留下的宝贵财富.

最后

最后,感谢您的阅读,有任何问题,欢迎评论区留言讨论,互相学习~ 本月我们将推出更多实践相关文章及有奖留言活动,也欢迎扫描下方二维码关注我们的微信公众号及时获取 图片名称

参考资料

nuxt官网: https://www.baidu.com/link?url=xy0d8KPUgTmiVoGge6g-FgdeqjJSTjxdpT0tpxZzBG_&wd=&eqid=db50cacf00052e5e000000066081587d

Vue SSR指南: https://ssr.vuejs.org/zh/guide/

相关 [ssr 技术 转转] 推荐:

能让你纵享丝滑的SSR技术,转转这样实践

- - 掘金 前端
秒开率对于用户的留存率有直接的影响,数据表明, 网页加载时间过长会直接导致用户流失.转转集团作为一家电商公司, 对于H5页面的秒开率有着更加严格的需求, 在主要的卖场侧页面(手机频道页、3c频道页、活动页)等重要流量入口我们都采用了SSR(服务端渲染)技术来构建页面,今天就带大家了解一下我们摸索出来的一些最佳实践..

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

- -

带你五步学会Vue SSR - 前端学习 - SegmentFault 思否

- -
SSR大家肯定都不陌生,通过服务端渲染,可以优化SEO抓取,提升首页加载速度等,我在学习SSR的时候,看过很多文章,有些对我有很大的启发作用,有些就只是照搬官网文档. 通过几天的学习,我对SSR有了一些了解,也从头开始完整的配置出了SSR的开发环境,所以想通过这篇文章,总结一些经验,同时希望能够对学习SSR的朋友起到一点帮助.

ssr vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering

- -
This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. #install dependenciesnpm install#or yarn#serve in dev mode, with hot reload at localhost:8080npm run dev#build for productionnpm run build#serve in production modenpm start.

从0开始微操SSR之nextjs项目实践

- - 掘金前端
这是一个电商类的网站,对于这种电商类的网站,我们一般会想要的效果是:. 1、用户从百度或者一些搜索引擎直接搜索关键字,就能够导流到我的网站上,这就是SEO(Search Engine Optimization). SEO(Search Engine Optimization):汉译为搜索引擎优化. 是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名.

助力ssr,使用concent为nextjs应用加点料

- - SegmentFault 最新的文章
开源不易,感谢你的支持, ❤ star concent^_^. 这里我们将使用 create-next-app命令来安装一个基础的next示例应用. 执行完毕后,可以看到一个如下的目录结构. |____public |____pages | |____ _app.js // next应用默认的根组件 | |____index.js // 默认首页 | |____api.

React服务端渲染(ssr)之Next.js框架

- - 掘金前端
Nextjs是 React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见 Next.js入门). 本文的案例代码来自于 前端标准模板项目. 提供了便捷强大的服务端渲染功能—— getInitialProps(),通过这个方法可以简单为服务端和前端同时处理异步请求数据:.

[转][转] 淘宝技术发展

- - heiyeluren的Blog
来源:http://blog.sina.com.cn/s/blog_633219970100x9cc.html.   三、 Oracle/支付宝/旺旺.   四、 淘宝技术发展(Java时代:脱胎换骨).   五、 淘宝技术发展(Java时代:坚若磐石).   六、 淘宝技术发展(Java时代:创造技术-TFS).

电信 ss/ssr 速度慢 电信国际出口速度慢 被 QoS 限速

- - DiyCode - 致力于构建开发工程师高端交流分享社区社区
很多人跟我反应,同一条线路, 电信用户的国际出口速度很慢,而移动/联通用户却还不错,可能移动/联通可以流畅看1080P,而电信卡的连国外网页都打不开. 明明电信的国际出口宽带是三家中最高的,为什么只有电信的速度慢呢. 本文简单分析下电信运行商慢的原因( QoS限速),并推荐下针对电信用户优化的CN2线路来提升国际出口速度.

[转][转]内容匹配广告投放技术

- - heiyeluren的blog(黑夜路人的开源世界)
ps: 本文是百度文库课程 《计算广告学之内容匹配广告&展示广告原理、技术和实践》的课程笔记,感谢百度. 内容匹配广告投放技术1:网盟概述&工程架构. 课程地址 http://wenku.baidu.com/course/view/1488bfd5b9f3f90f76c61b8d. 第一章:内容匹配广告投放技术:网盟概述&工程架构.