JavaScript Design Patterns lernen, 2. Auflage

Kapitel 13. Rendering-Muster

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Als wir zu interaktiveren Websites übergingen, wuchs die Anzahl der verarbeiteten Ereignisse und die Menge der auf der Client-Seite gerenderten Inhalte, was zu SPAs führte, die hauptsächlich auf dem Client gerendert werden, wie im Fall von React.js.

Webseiten können jedoch so statisch oder dynamisch sein wie die Funktion, die sie erfüllen. Wir stellen nach wie vor viele statische Inhalte im Web bereit, z. B. Blog-/Nachrichtenseiten, die du auf dem Server erstellen und unverändert an die Clients weitergeben kannst. Statische Inhalte sind zustandslos, lösen keine Ereignisse aus und müssen nach dem Rendern nicht rehydriert werden. Im Gegensatz dazu müssen dynamische Inhalte (Schaltflächen, Filter, Suchleiste) nach dem Rendern mit ihren Ereignissen neu verdrahtet werden. Das DOM muss auf der Client-Seite neu generiert werden (virtuelles DOM). Diese Regenerierungs-, Rehydrierungs- und Ereignisbehandlungsfunktionen tragen zu dem JavaScript bei, das an den Client gesendet wird.

Ein Rendering-Muster bietet die ideale Lösung für die Darstellung von Inhalten für einen bestimmten Anwendungsfall. Die Rendering-Muster in dieser Tabelle sind beliebt:

Rendering-Muster
Client-seitiges Rendering (CSR)	HTML wird vollständig auf dem Client gerendert
Server-seitiges Rendering (SSR)	Dynamisches Rendering von HTML-Inhalten auf dem ...