Clientseitiges oder serverseitiges Rendering: Warum ist nicht alles Schwarzweiß?

Seit jeher war die herkömmliche Methode, um HTML auf einen Bildschirm zu bringen, die Verwendung von serverseitigem Rendering. Es war der einzige Weg. Sie haben Ihre HTML-Seiten auf Ihren Server geladen, dann hat Ihr Server sie in nützliche Dokumente in den Browsern Ihrer Benutzer umgewandelt.

Das serverseitige Rendern funktionierte zu dieser Zeit ebenfalls hervorragend, da die meisten Webseiten hauptsächlich für die Anzeige statischer Bilder und Texte gedacht waren und nur wenig Interaktivität aufwiesen.

Schneller Vorlauf bis heute und das ist nicht mehr der Fall. Man könnte argumentieren, dass Websites heutzutage eher Anwendungen ähneln, die sich als Websites ausgeben. Sie können sie verwenden, um Nachrichten zu senden, Online-Informationen zu aktualisieren, einzukaufen und vieles mehr. Das Web ist nur viel weiter fortgeschritten als früher.

Daher ist es sinnvoll, dass das serverseitige Rendern langsam in den Hintergrund der ständig wachsenden Methode zum Rendern von Webseiten auf der Clientseite tritt.

Welche Methode ist die bessere Option? Wie bei den meisten Dingen in der Entwicklung hängt es wirklich davon ab, was Sie mit Ihrer Website vorhaben. Sie müssen die Vor- und Nachteile verstehen und dann selbst entscheiden, welche Route für Sie am besten geeignet ist.

Funktionsweise des serverseitigen Renderns

Das serverseitige Rendern ist die häufigste Methode zum Anzeigen von Informationen auf dem Bildschirm. Es konvertiert HTML-Dateien auf dem Server in verwendbare Informationen für den Browser.

Wenn Sie eine Website besuchen, sendet Ihr Browser eine Anfrage an den Server, der den Inhalt der Website enthält. Die Anfrage dauert normalerweise nur wenige Millisekunden, aber das hängt letztendlich von einer Vielzahl von Faktoren ab:

  • Ihre Internetgeschwindigkeit
  • den Standort des Servers
  • Wie viele Benutzer versuchen, auf die Site zuzugreifen?
  • und wie optimiert die Website ist, um nur einige zu nennen

Sobald die Verarbeitung der Anforderung abgeschlossen ist, erhält Ihr Browser den vollständig gerenderten HTML-Code zurück und zeigt ihn auf dem Bildschirm an. Wenn Sie sich dann entscheiden, eine andere Seite der Website zu besuchen, fordert Ihr Browser die neuen Informationen erneut an. Dies tritt jedes Mal auf, wenn Sie eine Seite besuchen, von der Ihr Browser keine zwischengespeicherte Version hat.

Es spielt keine Rolle, ob die neue Seite nur wenige Elemente enthält, die sich von der aktuellen Seite unterscheiden. Der Browser fragt nach der gesamten neuen Seite und rendert alles von Grund auf neu.

Nehmen Sie zum Beispiel dieses HTML-Dokument, das auf einem imaginären Server mit der HTTP-Adresse von abgelegt wurde example.testsite.com.

    Example Website   

My Website

This is an example of my new website

Link

Wenn Sie die Adresse der Beispielwebsite in die URL Ihres imaginären Browsers eingeben, sendet Ihr imaginärer Browser eine Anfrage an den von dieser URL verwendeten Server und erwartet, dass eine Antwort von Text auf den Browser gerendert wird. In diesem Fall würden Sie visuell den Titel, den Absatzinhalt und den Link sehen.

Angenommen, Sie möchten auf den Link auf der gerenderten Seite klicken, der den folgenden Code enthält.

    Example Website   

My Website

This is an example of my new website

This is some more content from the other.html

Der einzige Unterschied zwischen der vorherigen und dieser Seite besteht darin, dass diese Seite keinen Link und stattdessen einen anderen Absatz enthält. Die Logik würde vorschreiben, dass nur der neue Inhalt gerendert und der Rest in Ruhe gelassen werden soll. Leider funktioniert das serverseitige Rendern nicht so. Was tatsächlich passieren würde, wäre, dass die gesamte neue Seite gerendert würde und nicht nur der neue Inhalt.

Während es für diese beiden Beispiele keine große Sache zu sein scheint, sind die meisten Websites nicht so einfach. Moderne Websites haben Hunderte von Codezeilen und sind viel komplexer. Stellen Sie sich nun vor, Sie durchsuchen eine Webseite und müssen beim Navigieren auf der Website warten, bis jede einzelne Seite gerendert ist. Wenn Sie jemals eine WordPress-Site besucht haben, haben Sie gesehen, wie langsam sie sein können. Dies ist einer der Gründe dafür.

Auf der positiven Seite ist das serverseitige Rendern großartig für SEO. Ihr Inhalt ist vorhanden, bevor Sie ihn erhalten, sodass Suchmaschinen ihn indizieren und problemlos crawlen können. Etwas, das beim clientseitigen Rendern nicht der Fall ist. Zumindest nicht einfach.

Funktionsweise des clientseitigen Renderns

Wenn Entwickler über clientseitiges Rendern sprechen, sprechen sie über das Rendern von Inhalten im Browser mithilfe von JavaScript. Anstatt den gesamten Inhalt aus dem HTML-Dokument selbst abzurufen, erhalten Sie ein einfaches HTML-Dokument mit einer JavaScript-Datei, die den Rest der Site mithilfe des Browsers rendert.

Dies ist ein relativ neuer Ansatz zum Rendern von Websites, der erst dann wirklich populär wurde, wenn JavaScript-Bibliotheken damit begannen, ihn in ihren Entwicklungsstil einzubeziehen. Einige bemerkenswerte Beispiele sind Vue.js und React.js, über die ich hier mehr geschrieben habe.

Gehen Sie zur vorherigen Website zurück und example.testsite.comnehmen Sie an, dass Sie jetzt eine index.html-Datei mit den folgenden Codezeilen haben.

    Example Website 

Sie sehen sofort, dass sich beim Rendern mit dem Client einige wesentliche Änderungen an der Funktionsweise von index.hmtl ergeben.

Für den Anfang haben Sie anstelle des Inhalts in der HTML-Datei einen Container div mit der ID root. Sie haben auch zwei Skriptelemente direkt über dem schließenden Body-Tag. Eine, die die Vue.js-JavaScript-Bibliothek lädt, und eine, die eine Datei namens app.js lädt.

Dies unterscheidet sich grundlegend von der Verwendung des serverseitigen Renderns, da der Server nur noch für das Laden des Minus der Website verantwortlich ist. Die Hauptkesselplatte. Alles andere wird von einer clientseitigen JavaScript-Bibliothek, in diesem Fall Vue.js, und benutzerdefiniertem JavaScript-Code verwaltet.

Wenn Sie eine Anfrage an die URL nur mit dem obigen Code stellen, wird ein leerer Bildschirm angezeigt. Es muss nichts geladen werden, da der eigentliche Inhalt mit JavaScript gerendert werden muss.

Um dies zu beheben, fügen Sie die folgenden Codezeilen in die Datei app.js ein.

var data = { title:"My Website", message:"This is an example of my new website" } Vue.component('app', { template: ` 

{{title}}

{{message}}

Link `, data: function() { return data; }, methods:{ newContent: function(){ var node = document.createElement('p'); var textNode = document.createTextNode('This is some more content from the other.html'); node.appendChild(textNode); document.getElementById('moreContent').appendChild(node); } } }) new Vue({ el: '#root', });

Now if you visit the URL, you would see the same content as you did the server-side example. The key difference is that if you were to click on the link the page to load more content, the browser will not make another request to the server. You are rendering items with the browser, so it will instead use JavaScript to load the new content and Vue.js will make sure that only the new content is rendered. Everything else will be left alone.

This is much faster since you are only loading a very small section of the page to fetch the new content, instead of loading the entire page.

There are some trade offs with using client-side rendering, though. Since the content is not rendered until the page is loaded on the browser, SEO for the website will take a hit. There are ways to get around this, but it’s not as easy as it is with server-side rendering.

Another thing to keep in mind is that your website/application won’t be able to load until ALL of the JavaScript is downloaded to the browser. Which makes sense, since it contains all the content that will be needed. If your users are using slow internet connection, it could make their initial loading time a bit long.

The pros and cons of each approach

So there you have it. Those are the main differences between server-side and client-side rendering. Only you the developer can decide which option is best for your website or application.

Below is a quick breakdown of the pros and cons for each approach:

Server-side pros:

  1. Search engines can crawl the site for better SEO.
  2. The initial page load is faster.
  3. Great for static sites.

Server-side cons:

  1. Frequent server requests.
  2. An overall slow page rendering.
  3. Full page reloads.
  4. Non-rich site interactions.

Client-side pros:

  1. Rich site interactions
  2. Fast website rendering after the initial load.
  3. Great for web applications.
  4. Robust selection of JavaScript libraries.

Client-side cons:

  1. Low SEO if not implemented correctly.
  2. Initial load might require more time.
  3. In most cases, requires an external library.

If you want to learn more about Vue.js, check out my website at juanmvega.com for videos and articles!