在日常生活中,无论是客户端渲染还是服务端渲染,在感官上我们似乎很难发现二者在速度上的区别,但是我如果在网络基础速度较慢的情况下这个问题就会尤为突出。
对比
我们可以通过这个方式来改变网络加载速度,来体会二者的区别。
在慢速网络的情况下,大约加载了6s左右的时间
传统的服务端渲染只花费了2秒左右。
结论与分析
这是服务端请求的结果,发现服务端渲染请求很简单,html 直出,浏览器加载到文档就可以开始渲染.
而客户端渲染,至少要经历三次http请求周期
- 第一次是页面的请求
- 第二次是js对应的请求
- 第三次动态数据的请求
不利于SEO的原因
SEO:SearchEngineOptimization 搜索引擎优化。说白了就是让浏览器知道你的网页有什么内容,从而确定网页的排名。
搜索引擎可以通过某个程序来获取网页内容,接下来通过node模拟一下浏览器通过程序获取网页内容的过程
// 以node 为例
const http = require('http')
// 通过程序获取指定的网页内容 csr
http.get('http://localhost:8080/', res => {
let data = ''
res.on('data', chunk => {
data += chunk
})
res.on('end', () => {
console.log(data)
})
})
执行结果
接下来通过程序获取一下ssr的网页内容
// 以node 为例
const http = require('http')
// 通过程序获取指定的网页内容 ssr
http.get('http://localhost:3000/', res => {
let data = ''
res.on('data', chunk => {
data += chunk
})
res.on('end', () => {
console.log(data)
})
})
看一下执行结果
对比二者获取的网页内容可以发现:
- 客户端渲染网页内容是空的,内容通过解析执行js脚本才能渲染出来网页内容
- 服务端渲染可以清晰的看到页面的内容,根据内容可以更有利于搜索
综上所述,客户端渲染不利于SEO