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

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变化、绑定事件 –> 二次渲染 (用户可交互)

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