Clientseitiges Rendering oder serverseitiges Rendering – was ist die beste Lösung für Ihre App?

Blog

Clientseitiges Rendering oder serverseitiges Rendering – was ist die beste Lösung für Ihre App?

Dieser Artikel wurde ursprünglich veröffentlicht unter https://www.blog.duomly.com/client-side-rendering-vs-server-side-rendering-vs-prerendering/


Einführung in das clientseitige Rendering im Vergleich zum serverseitigen Rendering

Wir können mit den Technologien, die wir derzeit haben, großartige Webanwendungen und Websites erstellen, aber es gibt immer noch eine Leistung, die berücksichtigt werden muss. Entwickler übertreffen sich gegenseitig, um in ihren Projekten die besten Ergebnisse in Bezug auf Ladegeschwindigkeit und Benutzererfahrung zu erzielen. Und an diesem Punkt gibt es viele Diskussionen darüber, wie Bewerbungen gerendert werden sollten.

Bevor moderne Front-End-Frameworks so häufig verwendet wurden, wurden Websites auf dem Server gerendert und fertige .html-Dateien an den Browser gesendet.

Als Entwickler anfingen, ReactJS oder Angular zu verwenden, wurden Webseiten im Browser gerendert. Andererseits wurden Frameworks für serverseitiges Rendering wie Next.js immer beliebter, um das Laden schneller und die Benutzererfahrung zu verbessern.

Und es gibt auch ein Pre-Rendering, ein weiterer Ansatz zum Rendern einer Webanwendung. Aber welches ist das Beste für Ihr nächstes Projekt?

In diesem Artikel möchte ich diese drei Konzepte, clientseitiges Rendering, serverseitiges Rendering und Pre-Rendering, durchgehen, sie einzeln erklären und vergleichen.

Wenn Sie lieber zuschauen, dann lesen, besuchen Sie uns auf unserem YouTube-Kanal.

Schauen wir uns an, was der Unterschied zwischen den verfügbaren Lösungen ist!

Was ist clientseitiges Rendering (CSR)?

Clientseitiges Rendering ist eine Möglichkeit zum Rendern von Webseiten auf der Browserseite. Dieser Ansatz wird häufig verwendet, seit moderne Frontend-Frameworks diese Lösung populär gemacht haben. Da die meisten Anwendungen mittlerweile mit ReactJS oder Angular erstellt werden, verwenden sie auch clientseitiges Rendering.

reagieren-native-fortschrittsschritte

Lassen Sie mich nun erklären, wie das clientseitige Rendering funktioniert, basierend auf der Grafik, die Sie unten sehen können.

Clientseitiges Rendering – CSR

Wenn der Benutzer eine Adresse im Browser eingibt, antwortet der Server mit einer leeren HTML-Datei, wobei Javascript für die Darstellung des gesamten Inhalts verantwortlich ist.

Bis das gesamte Javascript heruntergeladen ist, können Benutzer sehen, dass eine leere Seite oder ein Ladebildschirm von den Entwicklern abhängt. Wenn Javascript heruntergeladen wird, muss es alles kompilieren und der nächste Inhalt kann dem Benutzer angezeigt werden.

Es kann vorkommen, dass Javascript einige API-Aufrufe ausführt, wenn zusätzliche Daten erforderlich sind, um den Bildschirm anzuzeigen und die Webseite vollständig interaktiv zu gestalten.

Das anfängliche Laden beim clientseitigen Rendering ist etwas langsamer, aber danach ist jedes nächste Laden ziemlich schnell. Außerdem ist es nicht erforderlich, die gesamte Benutzeroberfläche neu zu rendern, sondern nur einzelne Elemente, die sich ändern.

wo kann man labra krypto kaufen

Wenn Sie wissen, wie das clientseitige Rendering funktioniert, ist es an der Zeit, einen Blick auf das serverseitige Rendering zu werfen.

Was ist serverseitiges Rendering?

Serverseitiges Rendering ist eine andere Möglichkeit zum Rendern von Webseiten, aber diese rendert Inhalte auf dem Server und sendet fertige .html-Dateien an den Browser. Schauen wir uns die Grafik an, die den Fluss veranschaulicht.

Serverseitiges Rendering - SSR

Wenn der Benutzer die Adresse in den Browser eingibt, wird die Anfrage an den Server gesendet. Als nächstes bereitet der Server die spezifische HTML-Datei vor, um die für die jeweilige Ansicht erforderlichen Daten zu erhalten.
Der Server sendet diese Datei an den Browser und rendert den Inhalt auf dem Bildschirm, damit der Benutzer sie sehen kann.
Der gesamte Prozess läuft vollständig auf dem Server ab und wiederholt sich jedes Mal, wenn der Benutzer eine Aktion auslöst.

Konzentrieren wir uns jetzt auf die dritte Möglichkeit, das Pre-Rendering.

Frameworks für serverseitiges Rendering

Eckig : Universalwinkel
ReagierenJS : ReactJS mit benutzerdefiniertem Setup, Next.js
VueJS : Nuxt.js

Flappy Bird Quellcode

Was ist Vorrendern?

Während in einigen Projekten serverseitiges Rendering großartig sein kann, kann es in anderen ein Albtraum sein. Die Vorteile beider Lösungen zu kombinieren, ist eine weitere Möglichkeit, Projekte zu rendern, das Vor-Rendering.

Pre-Rendering ist ein Kompromiss zwischen serverseitigem Rendering und clientseitigem Rendering. Wenn der Benutzer die Adresse des Browsers eingibt, sendet der Server das statische .html mit Javascript zurück, das im Hintergrund geladen wird. Der Benutzer kann die statische Website sehen, aber es gibt keine Interaktivität, bis Javascript vollständig heruntergeladen ist. Dann holt sich Javascript die notwendigen Daten für die jeweilige Ansicht und leitet den Benutzer zur richtigen Datei weiter, die jedoch nicht sichtbar ist.

Vorrendern

Das Vor-Rendering ist eine großartige Idee, insbesondere wenn Sie sich für die SEO Ihrer Seite interessieren, da Bots den vorgerenderten Inhalt lesen können.

Vergleich

Wenn wir wissen, wie jede Rendering-Methode funktioniert und wie sie sich voneinander unterscheidet, können wir ihre Vor- und Nachteile abwägen, so dass wir in der Lage sind, jede dieser Lösungen für verschiedene Projekte zu verwenden.

Clientseitiges Rendering

Vorteile:

  • schnelles Rendering nach dem ersten Laden
  • gut für Web-Apps mit viel Logik und dem großen Teil, der eine Autorisierung benötigt
  • viele Javascript-Frameworks und Bibliotheken, die CSR . unterstützen

Nachteile:

  • niedrige SEO
  • Das erstmalige Laden kann einige Zeit dauern

Wann sollte man clientseitiges Rendering verwenden?

  • wenn Ihre Anwendung viele dynamische Daten enthält
  • wenn Ihre Anwendung eine sehr komplexe Benutzeroberfläche hat
  • wenn Ihre Anwendung auf eine größere Anzahl von Benutzern ausgerichtet ist
  • wenn Ihre Anwendung für den Zugriff eine Autorisierung benötigt
  • wenn Ihre Anwendung nicht viele Inhalte enthält, die für SEO verwendet werden

Serverseitiges Rendering

Vorteile:

  • Suchmaschinen-Bots können für eine bessere SEO kriechen
  • Das anfängliche Laden ist schneller

Nachteile:

  • viele Serveranfragen
  • ganze Seite neu geladen
  • langsames Rendering, wenn die Anwendung viel Interaktivität hat

Wann sollte serverseitiges Rendering verwendet werden?

  • wenn die Benutzeroberfläche Ihrer Anwendung komplex ist, aber wenig Interaktivität aufweist
  • wenn Ihre Anwendung eine statischere Seite ist
  • wenn die Anzahl der Benutzer nicht groß ist

Vor-Rendern

Vorteile:

  • bessere Benutzererfahrung beim ersten Laden
  • bessere SEO
  • weniger Anfragen als bei SSR

Nachteile:

  • müssen auf Interaktivität warten, bis Javascript geladen ist
  • müssen beim ersten Laden benutzerfreundliches Design bieten, wenn Daten benötigt werden

Wann sollte Pre-Rendering verwendet werden?

  • wenn Ihre Anwendung eine Benutzeroberfläche mit Inhalten hat, die für SEO verwendet werden
  • wenn ein Teil Ihrer Anwendung für Benutzer ohne Authentifizierung verfügbar ist
  • wenn Sie SSR nicht verwenden möchten, aber die Ladezeit und SEO verbessern müssen
  • wenn Ihre Bewerbung mehr statischen Inhalt auf der ersten Seite hat

Abschluss

In diesem Artikel wurden drei Möglichkeiten zum Rendern der Anwendung beschrieben: clientseitiges Rendern, serverseitiges Rendern und Vorrendern. Ich habe erklärt, wie jede dieser Rendering-Methoden funktioniert, damit Sie die beste Lösung für Ihre Anwendung auswählen können.

Außerdem haben wir alle Möglichkeiten der Darstellung der Vor- und Nachteile durchgegangen und zusammengefasst, wann es sinnvoll ist, eine bestimmte Lösung zu verwenden.

Es gibt nicht den einen perfekten Rendering-Weg, viel hängt von der Anwendung ab, die Sie erstellen und dem Ergebnis, das Sie erzielen möchten. Wenn Sie eine statische App haben und sich um SEO und Ladezeit kümmern, wählen Sie einen anderen Weg, als wenn Ihre Anwendung dynamisch ist und viel Inhalt vom Server benötigt.

wie man efforce kauft

Ich hoffe, Sie finden diesen Artikel bei der Planung Ihrer nächsten Anwendung hilfreich.

Duomly - Programmieren Online-Kurse

Danke fürs Lesen,
Anna

#reagieren #Webentwicklung #javascript #node #html

www.blog.duomly.com

Clientseitiges Rendering oder serverseitiges Rendering – was ist die beste Lösung für Ihre App?

In diesem Artikel erkläre ich, was serverseitiges Rendering ist, was clientseitiges Rendering ist und was Pre-Rendering ist.