Server side Rendering

Gute Nachrichten für dich, wenn das Thema Server Side Rendering schon immer ein Rätsel für dich war. In diesem Artikel wird es detailliert erläutert, von grundlegenden Definitionen bis hin zu tiefer gehenden Betrachtungen. Es wird darüber hinaus das Server Side Rendering mit dem Client Side Rendering verglichen und wann das eine gegenüber dem anderen bevorzugt wird. Abschließend wird auf nützliche Lernhilfen und Ressourcen hingewiesen, die dir dabei helfen, dein Wissen über Server Side Rendering zu vertiefen.

Einführung in das Server Side Rendering

Bei der Erstellung von Websites und Webanwendungen stehen Entwickler immer wieder vor der Entscheidung, ob sie Client-Side Rendering oder Server-Side Rendering verwenden sollten. In diesem Artikel konzentrieren wir uns auf das Server Side Rendering (SSR), ein Prozess, der für ein schnelleres Laden von Webseiten sorgen und Vorteile für die Suchmaschinenoptimierung (SEO) bieten kann.

Server Side Rendering Definition

Server Side Rendering einfach erklärt

Um zu verstehen, wie Server Side Rendering funktioniert, stell dir vor, du besuchst eine Webseite. Dein Browser sendet eine Anfrage an den Server der Webseite. Statt darauf zu warten, dass jeder Browser die gesamte Arbeit des Renderings übernimmt, vollzieht der Server einen Großteil dieser Arbeit. Er erstellt das HTML, CSS und eventuelle JavaScript und schickt es volständig renderfertig zurück an deinen Browser.

Server Side Rendering Technik

Die Technik hinter dem Server Side Rendering kann recht komplex sein, da sie eine effiziente Bereitstellung von Inhalten unter Berücksichtigung der Serverleistung erfordert. Typischerweise wird SSR in Frameworks wie React.js, Vue.js oder Angular.js verwendet, die dafür spezielle Methoden bereitstellen.

Server Side Rendering Beispiel

Code
const express = require('express');
const React = require('react');
const renderToString = require('react-dom/server').renderToString;
const Home = require('./client/components/Home').default;
const app = express();

app.get('/', (req, res) => {
  const content = renderToString();

  res.send(content);
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

Server Side Rendering im Vergleich: Client Side Rendering vs Server Side Rendering

Mit modernen Webtechnologien wie JavaScript können Webseiten direkt im Browser (das ist Client Side Rendering) oder auf dem Server (das ist Server Side Rendering) gerendert werden. Diese beiden Ansätze haben ihre individuellen Vorteile und Unterschiede.

Vorteile und Nachteile von Server Side Rendering

Server Side Rendering hat einige signifikante Vorteile, aber auch einige Nachteile. Hier gehen wir auf diese ein:

• Schnellere Ladezeit: Bei Server Side Rendering ist die erste Seitendarstellung oft schneller, da der Server die gesamte Seite rendert und an den Client sendet.
• SEO freundlich: Da der vollständige HTML-Code direkt vom Server geladen wird, können Suchmaschinen die Seiten leichter crawlen. Dies kann sich positiv auf das Ranking in den Suchmaschinen auswirken.
• Bessere Performance auf älteren Geräten: Da das Rendern der Seite serverseitig erfolgt, sind ältere Geräte nicht auf leistungsfähige Prozessoren angewiesen.

Aber Server Side Rendering hat auch einige Nachteile:

• Höhere Serverlast: Da der Server die gesamte Seite rendert, kann dies zu einer höheren Serverlast führen, was insbesondere bei einer großen Anzahl von Anfragen zu Problemen führen kann.
• Weniger interaktiv: Da der gesamte Inhalt vom Server geladen wird, kann die Interaktivität eingeschränkt sein, bis der gesamte Inhalt geladen ist.

Wann ist Server Side Rendering die bessere Wahl?

Ob Server Side Rendering die bessere Wahl ist, hängt von verschiedenen Faktoren ab, unter anderem von der Art der Anwendung, den Anforderungen an die Performance und dem geplanten Publikum.

Frameworks für Server Side Rendering

Es gibt viele verschiedene Frameworks, die den Server Side Rendering Prozess unterstützen und den Entwicklern dabei helfen, performante, serverseitig gerenderte Anwendungen zu erstellen. Diese Frameworks bieten Tools und Methoden, die speziell dafür entwickelt wurden, um den SSR Prozess zu vereinfachen. In den folgenden Abschnitten werden wir einen Blick auf React und Angular werfen und erfahren, wie sie Server Side Rendering implementieren.

React Server Side Rendering

In der Welt von JavaScript-Frameworks und -Libraries ist React ein Name, der oft für seine Flexibilität und Effizienz gelobt wird. React bietet serverseitiges Rendering mit der Funktion ReactDOMServer.renderToString().

Der folgende Code gibt eine einfache React-Komponente wieder, die serverseitig gerendert wird:

Code
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString();
console.log(html);

Angular Server Side Rendering

Eines der stärksten und am häufigsten verwendeten Frameworks für Webentwicklung ist Angular. Server Side Rendering ist besonders wichtig in Angular, da es die Leistung verbessert und die Optimierung für Suchmaschinen vereinfacht.

Für das Server Side Rendering bietet Angular eine Plattform namens Angular Universal. Es handelt sich dabei um eine Technologie, die speziell dafür entwickelt wurde, Angular-Anwendungen serverseitig zu rendern.

Angular Universal Server Side Rendering

Angular Universal generiert statisches HTML für deine Angular-Web-App auf dem Server und liefert dieses dann an den Client aus. Diese Vorgehensweise kann die erste Zeichnung der Seite beschleunigen und macht die App SEO-freundlich, da Suchmaschinen das vorgerenderte HTML leichter indizieren können.

Tiefergehende Betrachtung von Server Side Rendering

Im vorherigen Abschnitt erhieltst du einen allgemeinen Überblick über Server Side Rendering (SSR), seine Vorteile und wie es in verschiedenen Frameworks implementiert ist. Nun wird eine tiefere Untersuchung von SSR vorgenommen, um besser zu verstehen, warum es in der Webentwicklung häufig verwendet wird und in welchen spezifischen Anwendungsbereichen es zum Tragen kommt.

Warum wird Server Side Rendering in der Webentwicklung verwendet?

Server Side Rendering wird in der Webentwicklung verwendet, um mehrere Ziele zu erreichen. Hier sind einige der Hauptgründe für die Verwendung von SSR:

• Performance: SSR kann die Ladezeiten von Websites erheblich reduzieren. Da der Server die gesamte Seite rendert und an den Client sendet, muss der Client nicht auf den Download aller Quellen warten und die Seite selbst rendern.
• SEO: Websites, die Server Side Rendering verwenden, sind für Suchmaschinen wesentlich sichtbarer. Da die vollständige Seite vom Server gerendert und an den Client gesendet wird, können Suchmaschinen die Seite vollständig crawlen und indizieren.
• Zugänglichkeit: SSR verbessert die Zugänglichkeit, da alle Inhalte vor der Auslieferung an den Client auf dem Server gerendert werden. Dadurch sind die Inhalte auch für Nutzer mit älteren Geräten oder langsamen Internetverbindungen zugänglich.

Anwendungsbereiche von Server Side Rendering in der Praxis

Server Side Rendering eignet sich besonders gut für Anwendungen, bei denen die Erstladegeschwindigkeit wichtig ist oder bei denen ein hoher Durchsatz erwartet wird. Hierbei handelt es sich in der Regel um Anwendungen mit viel dynamischem Inhalt, komplexe Anwendungen oder Anwendungen mit hoher Nutzerzahl. Dies könnten z.B. Nachrichtenseiten, Social Media Plattformen oder E-Commerce-Seiten sein.

SSR wird auch in situationen eingesetzt, in denen es eine Menge Interaktion und Echtzeitupdates gibt, wie z.B. bei Live-Streaming-Diensten, Kommunikationsplattformen oder Online-Multiplayer-Spielen.