为什么客户端渲染首屏渲染慢和SEO问题

在日常生活中，无论是客户端渲染还是服务端渲染，在感官上我们似乎很难发现二者在速度上的区别，但是我如果在网络基础速度较慢的情况下这个问题就会尤为突出。

对比

我们可以通过这个方式来改变网络加载速度，来体会二者的区别。

在慢速网络的情况下，大约加载了6s左右的时间

传统的服务端渲染只花费了2秒左右。

结论与分析

这是服务端请求的结果，发现服务端渲染请求很简单,html 直出,浏览器加载到文档就可以开始渲染.
而客户端渲染，至少要经历三次http请求周期

1. 第一次是页面的请求
2. 第二次是js对应的请求
3. 第三次动态数据的请求

不利于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)
    })
})

看一下执行结果

对比二者获取的网页内容可以发现：

1. 客户端渲染网页内容是空的，内容通过解析执行js脚本才能渲染出来网页内容
2. 服务端渲染可以清晰的看到页面的内容，根据内容可以更有利于搜索

综上所述，客户端渲染不利于SEO