クライアント側で最初の画面のレンダリングが遅くなり、SEOの問題が発生するのはなぜですか

日常生活では、クライアント側のレンダリングでもサーバー側のレンダリングでも、ある意味で速度の違いを検出するのは難しいようですが、ネットワークインフラストラクチャが遅い場合は特にこの問題が顕著になります。。

比較

ここに画像の説明を挿入
この方法でネットワークの読み込み速度を変更して、2つの違いを理解できます。

低速のネットワークの場合、ロードに
ここに画像の説明を挿入
は約6秒かかります。従来のサーバー側のレンダリングには、約2秒しかかかりません。

結論と分析

これはサーバーリクエストの結果です。サーバーレンダリングリクエストは非常にシンプルで、htmlはまっすぐで、ブラウザはドキュメントの読み込み後にレンダリングを開始できます。
クライアントレンダリングには少なくとも3回のhttpリクエストサイクルが必要です。

初めてはページのリクエストです
2回目はjsに対応するリクエストです
3番目の動的データ要求

SEOを助長しない理由

SEO：SearchEngineOptimization検索エンジン最適化。率直に言って、それはあなたのウェブページが何を含んでいるかをブラウザに知らせて、ウェブページのランキングを決定することです。

検索エンジンは、特定のプログラムを介してWebページのコンテンツを取得し、ノードを介してプログラムを介してブラウザがWebページのコンテンツを取得するプロセスをシミュレートできます。

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

実行結果
ここに画像の説明を挿入
次に、プログラムからssrWebページのコンテンツを取得します。

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

実行結果を見
ここに画像の説明を挿入
て、2つによって取得されたWebコンテンツを比較して以下を見つけます。

クライアントによってレンダリングされたWebページのコンテンツは空であり、コンテンツはjsスクリプトを解析して実行することでレンダリングできます。
サーバー側のレンダリングでは、ページのコンテンツを明確に確認できるため、コンテンツに応じて検索しやすくなります。

要約すると、クライアント側のレンダリングはSEOには適していません