Clientseitiges Rendering (CSR)

Client-Side Rendering (CSR) ist eine gängige Technik in der modernen Webentwicklung, die zur Erstellung interaktiver und dynamischer Anwendungen verwendet wird. Mit dieser Technik nehmen wir die Verantwortung für das Rendern der Seite vom Server ab und übertragen sie auf die Clientseite, sodass sich der Server um das kümmert, was für ihn am wichtigsten ist: die Geschäftsregeln. Diese Trennung ermöglichte ein flüssigeres und dynamischeres Benutzererlebnis und ermöglichte die Erstellung neuer Arten von Anwendungen. Die Vorteile sind vielfältig, aber gleichzeitig gibt es Kompromisse, die bei jedem Projekt evaluiert werden müssen, ob sich der Einsatz dieser Technik lohnt oder nicht.

Was ist Client-Side Rendering (CSR)?

Clientseitiges Rendering oder einfach CSR ist eine dynamische Anwendungsentwicklungstechnik, bei der das Schnittstellen-Rendering auf der Clientseite (Browser) erfolgt. Dies unterscheidet sich von der Vorgehensweise vor der Verbreitung dieser Technik, bei der der Server für das Rendern der Seite verantwortlich war und eine HTML-Datei mit dem gesamten bereits zusammengestellten Inhalt an den Client zurücksendete.

Mit CSR übergeben wir die Rolle des Renderns der Seite an den Browser (Client). Der Server sendet lediglich eine einfache HTML-Datei, die intern Links zu Javascript-Dateien enthält. Beim Empfang dieses HTML lädt der Browser die referenzierten Javascript-Dateien herunter, die für die Darstellung des Seiteninhalts verantwortlich sind. Der Vorteil von CRS besteht darin, dass der Inhalt nach dem Laden der Javascript-Dateien dynamisch aktualisiert werden kann, ohne von neuen Anfragen an den Server abhängig zu sein. Das Surferlebnis für den Benutzer flüssiger gestalten. CSR wird im Allgemeinen in Anwendungen eingesetzt, bei denen Echtzeitinteraktionen oder sehr dynamische Inhalte erforderlich sind, beispielsweise in Single-Page-Anwendungen (SPA). Als Lösung für interne Seiten, Dashboards oder Systeme, bei denen kein SEO erforderlich ist.

Wie funktioniert Clientseitiges Rendering?

Ein Beispiel für einen Rendering-Ablauf mit Clientseitigem Rendering wäre:

1. Der Benutzer greift auf eine Webseite zu, die intern eine Anfrage an den Server sendet.
   

2. Der Server empfängt die Anfrage und antwortet, indem er einfaches HTML sendet, das praktisch nur Links zu JavaScript- und CSS-Dateien enthält.
   

3. Der Browser lädt diesen HTML-Code herunter und sendet, sobald er fertig ist, neue Anfragen zum Herunterladen der JavaScript- und CSS-Dateien, auf die im HTML verwiesen wurde.
   

4. Nachdem die JavaScript-Dateien heruntergeladen wurden, werden sie ausgeführt und der Prozess des Renderns der Seite wird durchgeführt.
   

5. Von diesem Zeitpunkt an steuert JavaScript die gesamten Anwendungs- und Benutzerinteraktionen und aktualisiert den Seiteninhalt dynamisch, ohne neue Anfragen an den Server.

Vorteile von Clientseitigem Rendering

• Geschwindigkeit: Die Navigation zwischen Seiten innerhalb eines CSR ist extrem schnell, da nach dem ersten Laden nicht mehrere Anfragen an den Server gestellt werden müssen.
• Benutzererfahrung: Die CSR-Nutzung ist sehr verständlich und leistungsstark und bietet ein ähnliches Erlebnis wie native Anwendungen.
• Trennung von Belangen: CSR ermöglicht die Trennung zwischen Front-End und Back-End, sodass das Front-End vollständig von JS verwaltet werden kann, während sich das Back-End nur um die Daten und die Geschäftslogik kümmert.

Nachteile von Clientseitigem Rendering

• Hohe JS-Last: In großen Anwendungen können JS-Dateien sehr schwer werden, was die Benutzererfahrung beeinträchtigen kann, insbesondere beim ersten Laden der Anwendung.
• SEO-Probleme: Da der Seiteninhalt auf der Clientseite gerendert wird, haben Suchmaschinen Schwierigkeiten, den Inhalt zu indizieren, da sie den gerenderten HTML-Code benötigen und in einer Anwendung mit CSR der HTML-Code praktisch leer ist. Dies kann ein Nachteil für Anwendungen sein, die auf SEO angewiesen sind, wie z. B. Landingpages und E-Commerce.
• Clientabhängig: Da die Anwendung auf der Clientseite ausgeführt wird, besteht eine Abhängigkeit davon, wie viele Ressourcen sie hat, was sich negativ auf die Benutzererfahrung auswirken kann, wenn ihr Gerät über wenige Ressourcen verfügt. Darüber hinaus funktioniert die Anwendung nicht, wenn auf dem Gerät die Ausführung von JavaScript deaktiviert ist.

Abschluss

In diesem Artikel stellen wir die wichtigsten Punkte zum Einsatz von CSR vor und stellen die Grundlagen sowie seine Vor- und Nachteile vor. Durch den CSR-Flow kennen wir die Hauptphasen des CSR-Lebenszyklus. Wir erkennen die Bedeutung von JavaScript bei der Bereitstellung von Anwendungen, die vollständig auf der Clientseite ausgeführt werden. Trotz der Vorteile von CSR im Hinblick auf die Benutzererfahrung ist klar, dass diese Rendering-Technik einige Nachteile im Zusammenhang mit einer hohen JavaScript-Last und SEO-bezogenen Problemen hat.

Um die Einschränkungen von CSR zu überwinden, bieten wir Lösungen wie Static Site Generation (SSG) und Server-Side Rendering (SSR) an. In SSG werden Seiten während des Build-Zeitraums statisch generiert, sodass HTML zur Bereitstellung an den Client bereitsteht. Und im Fall von SSR erfolgt das Rendering auf der Serverseite, die mit bereits gerendertem HTML an den Client antwortet.

Das obige ist der detaillierte Inhalt vonClientseitiges Rendering (CSR). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!