Beim Rendern wird der Code erstellt, der für die Erstellung einer Seite erforderlich ist, mit der Endnutzer über ihren Browser interagieren können. Dazu gehören das Vorbereiten der Inhalte, das Anwenden der Logik und der Verarbeitung sowie das Einbeziehen aller UI-Elemente und anderer erforderlicher Komponenten, die zum Anzeigen der endgültigen Seite erforderlich sind. Bei inhaltsorientierten Anwendungen liegt der Schwerpunkt auf schnellen Ladegeschwindigkeiten, niedrigen Latenzen und kurzen Rendering-Zeiten.
Serverseitiges Rendering (SSR)
Beim serverseitigen Rendering (SSR) werden Webseiten auf dem Server gerendert und dann der vollständig gerenderte HTML-Code an den Browser des Clients gesendet. So wird er nicht clientseitig mit JavaScript gerendert. Wenn Nutzer auf eine Anwendung zugreifen, sendet ihr Browser eine Anfrage an den Server. Die Anwendung verarbeitet die Anfrage auf dem Server, einschließlich der Erfassung von Daten aus Datenbanken oder externen APIs, und rendert dann den HTML-Code für die angeforderte Seite. Der Server sendet dann den vollständig gerenderten HTML-Code der Seite zurück an den Browser des Nutzers. Wenn der Browser des Nutzers den HTML-Code empfängt, werden alle erforderlichen JavaScript-Dateien geladen.
Weitere Informationen zu HTML auf web.dev
Zu den Vorteilen der SSR gehören eine schnelle anfängliche Ladezeit, eine gute SEO-Leistung, Zuverlässigkeit und eine insgesamt hohe Nutzerfreundlichkeit. SSRs sind jedoch aufgrund des Leistungsaufwands und der erforderlichen Entwicklungsfähigkeiten für das Erstellen und Verwalten von SSR-fähigen Anwendungen komplexer als das clientseitige Rendering (CSR). SSRs sind besonders nützlich für inhaltsorientierte Webanwendungen, E-Commerce-Plattformen und alle Anwendungen, die eine gute SEO-Leistung und schnelle Erstreaktionsgeschwindigkeiten erfordern.
Statische Website-Erstellung (SSG)
Bei der statischen Websitegenerierung werden bei der Erstellung statische HTML-Dateien generiert und ohne server- oder clientseitiges Rendering für Nutzer bereitgestellt. Webinhalte werden normalerweise in einem strukturierten Format wie Markdown, JSON oder YAML erstellt und enthalten Text, Bilder und andere Assets. Ein Generator für statische Websites wie Hugo oder Jekyll verarbeitet die Inhalte und generiert HTML-, CSS- und JavaScript-Dateien. Die statische Ausgabe umfasst die gesamte Website und diese statischen Dateien werden auf einem Webserver, CDN oder Hostingdienst bereitgestellt.
Weitere Informationen zu CSS und HTML finden Sie unter web.dev.
Da die Dateien statisch sind, können sie im Cache gespeichert werden und daher sehr schnell geladen werden. SSG ist eine gute Option für Webanwendungen, die sich nicht häufig ändern oder die durch regelmäßige Website-Builds aktualisiert werden. Es ist keine geeignete Wahl für Webanwendungen mit dynamischer Interaktivität.
Clientseitiges Rendering (CSR)
Das clientseitige Rendering (CSR) erfolgt im Browser des Clients, nicht auf dem Server. Webanwendungen werden oft mit minimalen HTML-Vorlagen geladen und dann werden die Inhalte dynamisch mithilfe von JavaScript und Daten von Servern oder APIs bearbeitet. Nach einer Anwendungsanfrage sendet der Server ein minimales HTML-Dokument mit der grundlegenden Struktur und dem JavaScript-Code, die zum Rendern der Seite erforderlich sind. Der JavaScript-Code wird im Browser des Nutzers ausgeführt. Der Code verarbeitet dann die abgerufenen Daten und generiert die Inhalte, einschließlich CSS, HTML und aller interaktiven Elemente. Der JavaScript-Code reagiert dann auf Nutzerinteraktionen wie das Senden eines Formulars.
Zu den Vorteilen von CSR gehören schnelle Seitenübergänge und reaktionsschnelle Benutzeroberflächen. CSR-basierte Webanwendungen haben häufig lange Ladezeiten beim ersten Laden im Vergleich zu SSR und können bei der Suchmaschinenoptimierung eine Herausforderung darstellen. Mit zunehmender Anzahl von CSR-Anwendungen kann deren Entwicklung und Verwaltung recht komplex werden.