Une analyse approfondie du rendu côté client (CSR) et du rendu côté serveur (SSR)

Cet article vous apporte des connaissances sur le rendu CSR côté client et le rendu SSR côté serveur. J'espère qu'il vous sera utile.

Préface : Une brève introduction au référencement

• Le référencement (Search Engine Optimization) fait référence à l'optimisation des moteurs de recherche. En termes simples, cela signifie résumer les règles de classement des moteurs de recherche, optimiser raisonnablement le site Web, donc. que votre site Web sera classé dans Baidu ou des améliorations de classement dans les moteurs de recherche comme Google, permettant à davantage d'utilisateurs d'accéder à votre site Web.

Rendu côté client :

• Rendu côté client (Client Side Render), c'est-à-dire que lorsque l'utilisateur accède au site Web via une requête URL, le serveur renvoie un document html, puis autorise le navigateur pour analyser et restituer la page d'affichage, les fichiers js, css, image, etc. doivent à nouveau envoyer des requêtes au serveur pour demander le chargement des données.

  

Rendu côté serveur :

• Le rendu côté client correspond au rendu côté serveur (SSR). Du côté serveur, toutes les pages d'affichage du rendu frontal sont une chaîne de chaînes. , y compris html, js, css. Le rendu côté serveur consiste à renvoyer une chaîne html traitée au client. Dans la chaîne html renvoyée, les connaissances côté serveur devront être affichées au service html. directement écrit dans cette chaîne HTML afin que le navigateur client puisse l'afficher directement.

  

Voici un exemple simple de rendu côté serveur :

import Koa from 'koa'
import Router from 'koa-router'
const app = new Koa()
const router = new Router()
router.get('/', async (ctx) => {
	ctx.body = `		
		  
		    <title>服务端渲染返回</title>
		  
		  
		    <h1 id="Hello-World">Hello World!</h1>
		  
		
	`
})
app.use(router.routes())

app.listen(3000, () => {
	console.log("koa server listening on 3000")
})

La chaîne html renvoyée par le serveur ci-dessus est directement affichée sur le client comme une page web correspondante, afin que le client n'ait pas y aller plusieurs fois Demander constamment au serveur de charger des données

Rendu du serveur VS rendu du client

• La plus grande différence entre CSR et SSR est que lorsque CSR rend la page, le serveur renvoie directement le HTML au client pour le rendu et l'affichage, tandis que SSR confie le rendu de la page à l'exécution JS côté serveur.
• **Inconvénients du CSR traditionnel => **

1. Étant donné que le HTML est directement renvoyé au client pour le rendu, le client doit envoyer AJAX plusieurs fois au serveur pour extraire le code JS pour l'exécution, ce qui entraîne le premier écran de la page La vitesse de chargement sera plus lente.
2. Ce n'est pas convivial pour le référencement, car notre client extrait JS du serveur pour l'exécution, et le robot du moteur de recherche ne peut reconnaître que le contenu de la structure html, mais ne peut pas reconnaître le code js.

Ainsi, l'émergence de la SSR peut résoudre les défauts de la RSE traditionnelle, car à ce moment-là, la demande du client obtiendra le HTML rendu par notre serveur, qui est également assez convivial pour le référencement.

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!