Eine eingehende Analyse des clientseitigen Renderings (CSR) und des serverseitigen Renderings (SSR)

Dieser Artikel vermittelt Ihnen Wissen über clientseitiges Rendering-CSR und serverseitiges Rendering-SSR. Ich hoffe, dass er Ihnen hilfreich sein wird.

Vorwort: Eine kurze Einführung in SEO

• SEO (Suchmaschinenoptimierung) bezieht sich auf Suchmaschinenoptimierung, also auf eine Zusammenfassung der Suchranking-Regeln von Suchmaschinen, also auf eine sinnvolle Optimierung der Website dass Ihre Website in Baidu gerankt wird Oder Ranking-Verbesserungen in Suchmaschinen wie Google, damit mehr Benutzer auf Ihre Website zugreifen können.

Clientseitiges Rendern:

• Clientseitiges Rendern (Client Side Render), dh wenn der Benutzer über eine URL-Anfrage auf die Website zugreift, gibt der Server ein HTML-Dokument zurück und lässt dann den Browser zu Um die Anzeigeseite zu analysieren und zu rendern, müssen die JS-, CSS-, Bilddateien usw. erneut Anforderungen an den Server senden, um das Laden der Daten anzufordern.

  

Serverseitiges Rendering:

• Entsprechend dem clientseitigen Rendering ist serverseitiges Rendering (SSR). Auf der Serverseite sind alle Front-End-Rendering-Anzeigeseiten eine Zeichenfolge , einschließlich HTML, JS, CSS. Beim serverseitigen Rendern wird eine verarbeitete HTML-Zeichenfolge an den Client zurückgegeben. In der zurückgegebenen HTML-Zeichenfolge müssen dem HTML-Dienst Informationen angezeigt werden direkt in diesen HTML-String geschrieben, damit der Client-Browser es direkt anzeigen kann.

  

Hier ist ein einfaches Beispiel für serverseitiges Rendern:

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")
})

Die vom oben genannten Server zurückgegebene HTML-Zeichenfolge wird direkt auf dem Client als entsprechende Webseite angezeigt, sodass der Client dies nicht tun muss mehrmals dorthin gehen Ständig den Server auffordern, Daten zu laden

Server-Rendering vs. Client-Rendering

• Der größte Unterschied zwischen CSR und SSR besteht darin, dass der Server beim Rendern der Seite durch CSR direkt HTML an den Client zurückgibt zum Rendern und Anzeigen, während SSR das Rendern der Seite an die JS-Ausführung auf der Serverseite übergibt.
• **Nachteile von herkömmlichem CSR => **

1. Da HTML zum Rendern direkt an den Client zurückgegeben wird, muss der Client AJAX mehrmals an den Server senden, um den JS-Code zur Ausführung abzurufen, was zum ersten Mal führt Bildschirm der Seite Die Ladegeschwindigkeit wird langsamer sein.
2. Es ist nicht SEO-freundlich, da unser Client JS zur Ausführung vom Server abruft und der Suchmaschinen-Crawler nur den Inhalt der HTML-Struktur erkennen kann, aber den JS-Code nicht erkennen kann.

Das Aufkommen von SSR kann also die Mängel des traditionellen CSR beheben, da die Client-Anfrage zu diesem Zeitpunkt den von unserem Server gerenderten HTML-Code erhält, der auch für SEO geeignet ist.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse des clientseitigen Renderings (CSR) und des serverseitigen Renderings (SSR). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!