跳到主要内容

SSR服务端渲染

  • SPA：页面的渲染完全由前端去控制
  • SSR：页面的逻辑处理及结构基本由服务端负责，前端拿到结果以后执行渲染逻辑即可

什么场景需要服务端渲染​

  • 有SEO诉求，用在搜索引擎检索以及社交分享，用在前台类应用。
  • 内容网站、新闻、博客、电影、电商这样的需要搜索引擎提供流量的项目
    • 对于这些网站，SEO就是流量的直接提供者，生命线
  • 首屏渲染时长有要求，常用在移动端、弱网情况下
  • SSR给我们带来了两大特性：
    • 更友好的SEO优化
    • 首屏加载用户体验
  • 服务端渲染通常用于C端，面向用户群体比较大的，比如淘宝、京东

实时性要求较高​

  • 例如新闻网站、电子商务网站等需要实时更新内容
  • 服务端渲染可以在每次渲染页面时候获取最新的数据
  • 服务器端动态生成页面内容并返回给客户端的渲染方式，因此每次请求都会在服务器端重新生成HTML，服务端在这个过程中获取最新的数据给到客户端

首屏渲染速度​

  • 需要快速展示内容给用户的网站，
  • 尤其是移动端用户访问的网站，使用SSR可以提高首屏加载速度。
  • 因为服务器端渲染可以直接生成完整的HTML响应并发送给浏览器，减少了客户端渲染所需的额外请求和渲染时间

搜索引擎SEO优化​

  • 需要在搜索引擎中获得良好排名的网站
  • 使用SSR可以更好地支持搜索引擎抓取和索引页面内容
  • 通过SEO可以带来流量

内容安全性​

  • 利用SSR保护敏感数据
  • 可以避免将敏感数据直接暴露给客户端，数据请求都在服务端处理， 客户端只会接收到已经渲染好的HTML，而不会直接访问敏感数据或服务器端的代码
  • 可以减少客户端对敏感数据的直接访问，提供一定的保护

SSR解决什么问题？​

为了解决单页应用的问题，出现了SSR解决方案，服务端渲染出完整的首屏的dom结构返回，前端拿到的内容带上首屏， 后续的页面操作，再用单页的路由跳转和渲染，称之为服务端渲染 (server side render) 简单来说就是在服务器上把数据和模板拼接好返回给客户端显示，客户端获取可直接渲染的完整html文件 即服务器渲染页面，返回给客户端显示

  • 简单来说就是服务端读取模板，解析成DOM节点，返回HTML结构，返回给客户端显示

优点：​

  • 解决了SPA单页面页面首次加载慢，提高加载速度
    • 可以省去浏览器端首次渲染的工作，加快首屏显示加载速度。
  • 更好的SEO搜索引擎优化

缺点：​

  • 服务器端压力：在 SSR 中，服务器需要处理更多的请求，承担更多的渲染工作，从而增加了服务器的负担
  • 服务端渲染不利于实现动态交互：由于 SSR 的页面是在服务器端渲染的，因此无法在客户端实现一些需要动态交互的功能
  • 整体页面加载

SPA的问题​

  • SPA: 单页面应用

优点：

  • 页面之间切换快；减少了服务器压力；
  • 用户体验好，当内容改变的时候不需要整体加载，只是部分加载
  • 减轻服务端压力，服务端不需要处理页面模板的逻辑与拼接

缺点：

  • 不利于 SEO 搜索引擎。
    • 不利于 SEO，由于是采用前端渲染的方式，搜索引擎不会去解析 Js
  • 首次加载速度慢，SPA单页应用通常首次加载页面时就会将相应的 HTML、JavaScript、CSS文件全部加载，通常可以通过采取缓存措施以及懒加载即按需加载组件的方式来优化
  • 单页应用则需要自行进行计算和组装，中间过程很可能还涉及数据的二次请求，因此会比多页应用慢

SPA为什么慢​

  • 需要加载对应的资源文件，比如js，css等
  • 请求数据接口，有些数据可能还涉及到二次或者多次请求处理

SSR的难点​

  • 打包代码的差异
  • 异步数据的获取

SSR注意的地方​

  • 路由代码的差异
    • 服务器端需要通过请求路径，找到路由组件，而在客户端需通过浏览器中的网址，找到路由组件，是完全不同的两套机制，所以这部分代码无法公用
  • 生命周期的调用
    • 有些方法在服务端渲染中无法调用，比如componentDidMount，因为服务端没有DOM

为什么服务端渲染可以提高首屏优化,减少白屏​

  • 减少请求，服务端已经处理好数据请求和页面内容的生成，直接将完整的 HTML 结构返回给客户端。直接返回给客户端显示，无需等待js脚本下载执行之后才显示
  • 减少浏览器渲染，服务端已经处理好HTML结构，返回给客户端浏览器

SSR和SPA单页应用的区别​

  • SPA单页应用会直接返回html只带一个空的div
  • SSR服务端渲染会把当前页面所有的dom元素都拿到返回

app内嵌h5的ssr页面的优缺点​

  • 优点：
    • 需求的迭代，通过H5可开发快，成本低， 客户端无需发版审核等过程
    • 对于客户端的某些页面，需要经常变动，可考虑用H5，会更灵活
      • 如活动页面
  • 缺点：
    • 对审核会有一定的影响 （审核时，会对嵌入的页面会更加严格）
    • 对流量带宽消耗大
    • 一些交互的用户体验没有原生好
    • H5更多依赖网络的加载，而使用原生的话部分信息可通过本地缓存加载