Renderst du schon Server-seitig?

 07. Mai 2020,  Team media.tel

 

Wer JavaScript-basierte Websites verwalten und hinsichtlich Suchmaschinen optimieren will, kann dies durch Server-Side Rendering erreichen. Suchmaschinen-Crawler können dabei die Website besser abgreifen. Hat das ganze aber nur Vorteile?

Wir haben uns dem Thema Server-Side Rendering gewidmet: Basics first

Was ist der Unterschied zwischen Client-seitigem (CSR) und Server-seitigem Rendering (SSR)?

Beim Client-seitigen Rendern lädt der Browser eine minimale HTML-Seite. Es rendert das JavaScript und füllt den Inhalt darin.

Userfeeling: Nach dem anfänglichen, langsamen Laden ist der Rest des Website-Renderings schneller. Die anfängliche Ladezeit kann aber frustrierend sein. Geeignet eher für interaktive Webanwendungen mit mehr statischem Inhalt.

Beim Server-seitigen Rendern werden die React-Komponenten auf dem Server gerendert. Die Ausgabe ist HTML-Inhalt. Das kann natürlich eine gewisse Geschwindigkeit bieten. Suchmaschinenoptimierte Seiten gehen deshalb lieber den SSR-Weg.

Userfeeling: Das anfängliche Laden der Seite ist schneller als beim Client-seitigen Rendern. In Spitzenzeiten zahlreicher Anfragen leidet allerdings die Leistung der Website darunter. Geeignet eher für statische Seiten.

Die Vor-  und Nachteile von Server-side Rendering (SSR)

  • deutliche Leistungsverbesserung (bei kleineren Anwendungen)
  • Suchmaschinenoptimierung
  • Leistungsbeeinträchtigung bei größeren Anwendungen
  • Erhöhte Antwortzeiten in Spitzenzeiten
  • Erhöhte Komplexität der Anwendung


Die goldene Mitte: isomorphes JavaScript

So nennt man die Kombination der beiden Rendering-Modelle. Hier wird versucht die Vorteile beider zu verbinden. In diesem Fall läuft der Code in zwei verschiedenen Umgebungen was eine der Herausforderungen beim Schreiben einer Anwendung mit Server-side Rendering darstellt.

Umgebung 1: JavaScript Browser-seitig. Der Browser führt bei Interaktionen den JavaScript-Code aus.

Umgebung 2: Node.js auf der Serverseite. Wenn der Benutzer eine erste Anforderung stellt, rendert der Server die Ansicht für ihn in der Node.js-Umgebung.

Die Seitenansicht wird beim ersten Aufruf des Clients vom Server berechnet (analog zu Server-seitigem Rendern) und an den Client übermittelt. Anschließend lädt die Seite im Hintergrund und nachfolgende Aktionen werden auf Seite des Client bearbeitet. Quelle: Wikipedia

Tja, haben wir uns schon gedacht, wo viel Sonne, da auch Schatten. Wer sich mit uns zu diesem oder anderen Themen austauschen möchte, nimmt gerne mit uns Kontakt auf!