Pourquoi le premier écran est-il lent du côté client et des problèmes de référencement

Dans la vie quotidienne, qu'il s'agisse du rendu côté client ou du rendu côté serveur, il semble qu'il soit difficile de détecter la différence de vitesse entre les deux dans les sens, mais ce problème sera particulièrement important si j'ai une infrastructure réseau lente .

Par rapport

Nous pouvons modifier la vitesse de chargement du réseau de cette manière pour comprendre la différence entre les deux.

Dans le cas d'un réseau lent, le chargement

prend environ 6 secondes . Le rendu traditionnel côté serveur ne prend qu'environ 2 secondes.

Conclusion et analyse

C'est le résultat de la requête du serveur. On constate que la requête de rendu du serveur est très simple, le html est tout droit, et le navigateur peut démarrer le rendu après le chargement du document.
Et le rendu du client nécessite au moins trois cycles de requête http.

1. La première fois est une demande pour la page
2. La deuxième fois est la requête correspondant à js
3. La troisième demande de données dynamiques

Raisons peu propices au référencement

SEO: SearchEngineOptimization optimisation des moteurs de recherche. Pour le dire franchement, il s'agit de faire savoir au navigateur ce que contient votre page Web, afin de déterminer le classement de la page Web.

Le moteur de recherche peut obtenir le contenu de la page Web via un certain programme, puis simuler le processus d'obtention du contenu de la page Web par le navigateur via le programme via le nœud .

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

Résultats de l'exécution

Ensuite, récupérez le contenu de la page Web SSR via le programme

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

Regardez les résultats de l'exécution et

comparez le contenu Web obtenu par les deux pour trouver:

1. Le contenu de la page Web rendue par le client est vide et le contenu peut être rendu en analysant et en exécutant le script js.
2. Le rendu côté serveur permet de voir clairement le contenu de la page, ce qui peut être plus propice à la recherche en fonction du contenu

En résumé, le rendu côté client n'est pas bon pour le référencement