服务端渲染(SSR)

由于参与一个SSR项目的开发,之前并没有参与过相关工作,因此记录下过程中所学到的东西~

目前已知使用的技术栈:Vue.jsNuxt.js

一、相关理论

本部分参考:浅谈服务端渲染(SSR)Vue.js-服务端渲染

1、什么是SSR?

SSR(server side render)服务端渲染,是指在服务端将html基本内容完整生成之后再传递给浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序

具体示例可以参考上面那篇博文。

2、SSR的优劣之处

优势

(1)更方便于SEO。

在使用MVVM框架之后,页面大多数DOM元素是js动态渲染的,爬虫只会爬取源码,不会执行网站的任何脚本,也不会等待页面的数据加载完成之后再去抓取页面数据,因此可供爬虫抓取分析的内容大大减少。而服务器渲染是将html的完整内容(包括一些需要异步获取的数据)在服务端生成之后再发送过来的,因此爬虫可以捕捉到网页内容,更方便于SEO(Search Engine Optimization 搜索引擎优化)

(2)更方便于首屏渲染。

首屏的渲染是node发送过来的html字符串,并不依赖于js文件了,这就会使用户更快的看到页面的内容。尤其是针对大型单页应用,打包后文件体积比较大,普通客户端渲染加载所有所需文件时间较长,首页就会有一个很长的白屏等待时间(这个确实是有切身体会的,打包后文件体积过大,一些性能比较差的电脑就会加载很慢,导致首屏之前会出现较长的白屏时间)。

劣势

(1)服务器压力会变大

原本客户端会完成渲染,现在一并交给服务器去渲染,必然会使服务器压力变大。在高并发的情况下,会占用较多的服务器CPU

(2)开发条件会受限

以react为例,在服务端渲染中,只会执行到componentDidMount之前的生命周期钩子,因此项目引用的第三方的库也不可用其它生命周期钩子,这对引用库的选择产生了很大的限制

之后会考虑Vue的相关生命周期钩子使用

(3)开发难度加大

以vue为例,官方指南上说明“份指南非常深入,适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读”。相对于客户端渲染,项目构建、部署过程更加复杂。

3、相关耗时比较

引用上面提到的那篇博文,服务端渲染和客户端渲染的路线区别如下:

 

 (1)请求耗时

服务端渲染会更快。由服务端请求首屏数据,而不是客户端请求首屏数据,这是“快”的一个主要原因。服务端在内网进行请求,数据响应速度快。客户端在不同网络环境进行数据请求,且外网http请求开销大,导致时间差。

(2)HTML渲染

服务端渲染是先向后端服务器请求数据,然后生成完整首屏html返回给浏览器;而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染,等待的过程页面是什么都没有的,就是用户看到的白屏。就是服务端渲染不需要等待js代码下载完成并请求数据,就可以返回一个已有完整数据的首屏页面。如下图:

客户端渲染(Chrome为例)

服务端渲染

 

posted @ 2019-08-19 10:47  sue7  阅读(493)  评论(0编辑  收藏  举报