Was wählt man für eine Website? Server-seitiges Rendering vs. Client-seitiges Rendering
In diesem Artikel werden wir die Unterschiede, Vor- und Nachteile beider Lösungen besprechen. Bevor dies jedoch geschieht, erinnern wir Sie kurz daran, wie Webseiten funktionieren und wie es möglich ist, dass wir unabhängig vom Gerät, das wir zum Surfen im Internet verwenden, nur eine Internetverbindung und ein beliebiges Gerät mit einem Browser benötigen.
Anfänge von HTML
In den frühen 1980er Jahren, als das Internet noch in den Kinderschuhen steckte (in Form von ARPANET) und lange bevor die ersten Webseiten auftauchten, arbeiteten Wissenschaftler an der Schaffung eines Systems, das die Fernanzeige von Dokumenten auf einem anderen Computer ermöglichen würde. Dieses System musste zuverlässig sein und auf jedem Computer funktionieren, unabhängig von Betriebssystem und Spezifikationen. Es stellte sich heraus, dass die einfachsten Lösungen die besten sind, und das Versenden von Daten mithilfe von Text mit den entsprechenden Tags wie header, footer oder strong ist die beste Option. So entstand HTML, das noch immer in unseren Browsern verwendet wird, um Webseiten darzustellen.
Was ist serverseitiges Rendering?
Da wir nun wissen, was HTML ist, müssen wir die Frage beantworten, woher es kommt. Wie ist es möglich, dass ein Server beim Besuch einer bestimmten Website einen spezifischen Code zurückgibt?
In dem Moment, in dem der Server eine Anfrage von unserem Browser erhält, muss er viele Informationen verarbeiten, einschließlich der Überprüfung, ob wir zusammen mit der Anfrage Cookies gesendet haben. Falls ja, überprüft der Server:
- welche Dateien das sind,
- ob sie Informationen enthalten, dass wir eingeloggt sind,
- ob sie Informationen enthalten, dass wir die gegebene Website in der Vergangenheit besucht und deren Einstellungen beibehalten haben.
Dann sammelt der Server Informationen aus anderen Quellen (z. B. einer Datenbank), um festzulegen, was dem Nutzer angezeigt werden soll. Im Falle eines Blogs umfasst dies den Inhalt der neuesten oder hervorgehobenen Artikel.
Mit allen notwendigen Informationen ausgestattet, sendet der Server uns als Antwort den HTML-Code, den unser Browser von Text in grafische Form umwandelt.
Quelle: Duomly
Wenn wir auf einen Link klicken, um einen anderen Blogartikel zu öffnen, senden wir eine weitere Anfrage an den Server und der ganze Prozess beginnt von vorn.
Vor- und Nachteile
Der oben beschriebene Standard zur Generierung von HTML-Code ist fast seit 1991 in Kraft, also seit dem Moment, als die erste Website der Welt präsentiert wurde. Es ist eine alte, aber auch bewährte Lösung. Mit der Wahl des serverseitigen Renderings können wir fast sicher sein, dass unsere Webseite jederzeit und überall korrekt angezeigt wird, unabhängig vom Betriebssystem oder Browser.
Aufmerksame Leser könnten jedoch bereits einen gravierenden Nachteil dieser Lösung erkannt haben. Kehren wir zum Beispiel mit der Artikelseite zurück. Nachdem wir den Beitrag gelesen haben, interessierte uns ein anderer Text im Abschnitt Empfohlen für Sie. Wir klicken auf den Link, und was passiert? Wir senden eine Anfrage an den Server, um den HTML-Code der gesamten Seite zu generieren, zusammen mit dem Inhalt des neuen Artikels. Tatsächlich brauchten wir nur den Inhalt eines neuen Artikels! Der Rest des HTML-Codes wurde unnötigerweise erneut generiert. Dies führt zu einer zusätzlichen Belastung des Servers, was im Fall von hohem Traffic auf der Website zu Leistungsproblemen führen kann.
Wann sollten Sie serverseitiges Rendering wählen?
Es ist sinnvoll, eine solche Lösung zu wählen, wenn wir sicherstellen möchten, dass unsere Website korrekt angezeigt wird, unabhängig davon, wer sie ansieht. Denken wir daran, dass heutzutage nicht nur echte Menschen im Internet surfen. Täglich werden Webseiten von Google-Bots besucht, deren Aufgabe es ist zu bestimmen, ob der Inhalt wertvoll ist und wie hoch er in den Suchergebnissen rangieren sollte. Bis vor kurzem konnten diese Roboter überhaupt nicht mit clientseitig gerenderten Webseiten umgehen (was wir weiter unten im Text beschreiben werden), und Facebook-Bots sind dazu immer noch nicht in der Lage.
Was ist clientseitiges Rendering?
In diesem Fall führt der Server, der die Anfrage bearbeitet, nur das Nötigste der erforderlichen Arbeit aus und sendet als Antwort JavaScript-Code anstelle von HTML-Code zurück. Wichtig ist, dass der JS-Code nicht „on the fly“ vom Server generiert wird. Es handelt sich um eine statische Datei, die dort zuvor gespeichert wurde.
Der zurückgegebene Code enthält die Informationen darüber, welches HTML generiert werden soll. Diesmal generiert unser Browser diesen Code lokal und zeigt die Website grafisch an.
Quelle: Duomly
Vor- und Nachteile
Wie Sie wahrscheinlich erraten können, ist der erste Vorteil die Entlastung des Servers. Es muss nicht jedes Mal den ganzen HTML-Code generieren. Jetzt macht das unser Browser. Dies ermöglicht es dem Server, mehr Anfragen gleichzeitig zu bearbeiten. Es ermöglicht uns auch, die Kosten für die Infrastruktur zu reduzieren.
Da alle Informationen darüber, wie der HTML-Code generiert werden soll, in unserem Browser zu finden sind, erfordert das Navigieren zu einer neuen Unterseite kein Neuladen. Der HTML-Code wird lokal von unserem Browser geändert, wodurch der Nutzer den Eindruck hat, dass die Website viel schneller funktioniert und mehr wie eine Desktop- oder Mobile-Anwendung als eine traditionelle Website wirkt.
Der JavaScript-Code, den unser Browser beim clientseitigen Rendering erhält, ähnelt sehr dem Code in mobilen oder Desktop-Anwendungen. Dank dessen sind wir in den meisten Fällen in der Lage, den Betrieb unserer Webseite auf sehr einfache Weise und zu niedrigen Kosten zu erweitern. Sie wird sowohl zu einer Website als auch zu einer mobilen Anwendung (PWA).
Leider ist diese Lösung nicht ohne Nachteile. Da wir in der Antwort vom Server JavaScript-Code erhalten, müssen wir diesen Code im Browser aktiviert haben. Ohne ihn werden wir keinen Inhalt sehen. Zwar unterstützen heutzutage alle neueren und älteren Browser solchen Code, aber wie bereits erwähnt, wird das Internet nicht nur von Menschen durchsucht. Die Verarbeitung solchen Codes ist für Bots immer noch ein Problem. Wenn wir möchten, dass die Website in den Suchergebnissen so hoch wie möglich gerankt wird, und dass die geteilten Links zu unserer Webseite modern präsentiert werden (mit Grafiken, Titel und Seitenbeschreibung), ist clientseitiges Rendering möglicherweise nicht die beste Lösung.
In welchen Fällen ist es besser, clientseitiges Rendering zu wählen?
Clientseitiges Rendering ist perfekt für reaktive Webseiten, auf denen der Nutzer viele Aktionen ausführen kann. Google Kalender oder Gmail sind gute Beispiele für solche Webseiten. Diese Lösung funktioniert auch gut, wenn wir Wert darauf legen, dass die Nutzer mobile Geräte verwenden, die die Website in Form einer Anwendung auf einem Smartphone installieren können.
Client- und serverseitiges Rendering
Beide hier vorgestellten Lösungen haben ihre Vor- und Nachteile. Das bedeutet jedoch nicht, dass wir, wenn wir eine wählen, auf die Vorteile der anderen verzichten müssen. Es ist möglich, diese Methoden zu kombinieren.
Wenn Sie eine Webseite zum ersten Mal besuchen, wird der HTML-Code in traditioneller Weise auf der Serverseite generiert und in dieser Form an den Client zurückgegeben. Allerdings wird zusammen mit diesem Code auch JavaScript gesendet. Weitere Interaktionen auf der Webseite erfolgen über den hochgeladenen JS-Code, genau wie beim clientseitigen Rendering.
Dank dessen können wir die Vorteile kombinieren und die Nachteile beider oben genannten Lösungen eliminieren. Ist es dann die perfekte Option? Leider nicht. Die hier vorgestellte Hybridlösung ist wesentlich schwieriger umzusetzen und erfordert daher mehr qualifizierte Mitarbeiter und nimmt mehr Zeit in Anspruch. Dies führt wiederum zu höheren Implementierungskosten.
Serverseitiges Rendering vs. clientseitiges Rendering - Zusammenfassung
Clientseitiges Rendering ermöglicht es uns, moderne Webseiten zu erstellen, deren Funktionalität eher Anwendungen als traditionellen Webseiten ähnelt. Leider hat dies negative Auswirkungen auf die Suchergebnisse. Auch die Kompromisslösung ist nicht ohne Nachteile. Daher ist es, wenn Sie planen, eine dieser Lösungen auf Ihrer Webseite zu implementieren, am besten, sich mit Webentwicklungsspezialisten zu beraten. Nach einer gründlichen Analyse Ihrer Bedürfnisse und Spezifikationen werden sie in der Lage sein, die beste Lösung für Sie zu wählen.
