Why is the first screen rendering slow on the client side and SEO issues

In daily life, whether it is client-side rendering or server-side rendering, it seems that it is difficult to detect the difference in speed between the two in the senses, but this problem will be particularly prominent if I have a slow network infrastructure.

Compared

We can change the network loading speed in this way to understand the difference between the two.

In the case of a slow network, it

takes about 6 seconds to load. The traditional server-side rendering only takes about 2 seconds.

Conclusion and analysis

This is the result of the server request. It is found that the server rendering request is very simple, the html is straight out, and the browser can start rendering after loading the document.
And the client rendering requires at least three http request cycles.

1. The first time is a request for the page
2. The second time is the request corresponding to js
3. The third dynamic data request

Reasons not conducive to SEO

SEO: SearchEngineOptimization search engine optimization. To put it bluntly, it is to let the browser know what your web page contains, so as to determine the ranking of the web page.

The search engine can obtain the content of the webpage through a certain program, and then simulate the process of obtaining the content of the webpage by the browser through the program through 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)
    })
})

Execution results

Next, get the content of the ssr webpage through the program

// 以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)
    })
})

Look at the execution results and

compare the web content obtained by the two to find:

1. The content of the webpage rendered by the client is empty, and the content can be rendered by parsing and executing the js script.
2. Server-side rendering can clearly see the content of the page, which can be more conducive to search according to the content

In summary, client-side rendering is not good for SEO