跳到主要内容

认识

一、认识


SSR(Sever Side Rendering) 服务端渲染, 就是将服务端生成好完整的 HTML 内容,直接返回给浏览器,浏览器能够根据 HTML 渲染出完整的首屏内容,而不需要依赖 JS 的加载,这样一方面能够降低首屏渲染的时间,另一方面也能将完整的页面内容展现给搜索引擎的爬虫,利于 SEO。当然,SSR 中只能生成页面的内容和结构,并不能完成事件绑定,因此需要在浏览器中执行 CSRJS 脚本,完成事件绑定,让页面拥有交互的能力,这个过程被称作hydrate(翻译为注水或者激活)。同时,像这样服务端渲染 + 客户端 hydrate 的应用也被称为同构应用。

二、机制


三、特点


3.1 优点

1. 首屏快速: 这种页面(html)直出的方式可以让页面首屏较快的展现给用户。 用户无需等待页面所有 JS 加载完成就可以看到页面视图。

2. 有利于SEO: 搜索引擎优先爬取页面 HTML 结构, 使用 SSR 时, 服务端已经生成了和业务相关联的 HTML, 有利于 SEO

3.2 缺点

1. 提高了项目的复杂度

2. 对服务端的访问造成压力: 所有页面的加载都需要向服务器请求完整的页面内容和资源,访问量较大的时候会对服务器造成一定的压力。所以服务端需要权衡哪些应用需要服务端渲染, 哪些交给客户端。

3. 页面之间频繁刷新跳转的体验并不是很友好

因此, 我们选择是否使用 SSR 前, 需要权衡:

  1. 需要 SEO 的页面是否是少数几个, 这些是否可以使用预渲染 Prerender SPA Plugin 实现

  2. 首屏的请求响应逻辑是否复杂, 数据返回是否大量且缓慢

四、对比