# Server-Side Rendering (SSR)

Kategorie: [Rendering & JavaScript](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/) › [Rendering-Verfahren](https://seo-geo-glossary.com/de/glossar/kategorie/rendering-javascript/rendering-verfahren/) · Auch genannt: SSR

**Server-Side Rendering (SSR)** bedeutet, dass der Server das HTML einer Seite bei jeder Anfrage selbst erzeugt und fertig an den Browser schickt, statt dem Browser nur JavaScript zum Aufbauen der Seite zu geben. web.dev definiert es als „Rendering an app on the server to send HTML, rather than JavaScript, to the client“.

## Ablauf

1. Der Browser ruft eine URL auf.
2. Der Server holt die benötigten Daten aus Datenbank oder API.
3. Er rendert die Vorlage mit den Daten zu HTML.
4. Der Browser zeigt das HTML an.
5. Bei Frameworks lädt danach JavaScript nach und macht die Seite interaktiv. Dieser Schritt heißt Hydration.

## Vor- und Nachteile

web.dev beschreibt die Eigenschaften so: SSR liefert schnell den ersten sichtbaren Inhalt (FCP) und spart dem Browser JavaScript-Arbeit. Weil der Server für jede Anfrage rendert, steigt jedoch die Wartezeit bis zum ersten Byte (TTFB) gegenüber statisch ausgelieferten Seiten. Zwischen dem Anzeigen und der Interaktion kann außerdem eine Lücke entstehen, in der die Seite fertig aussieht, aber nicht reagiert.

Weitere Nachteile nennen Zweitquellen: höhere Serverlast und mehr Komplexität in der Entwicklung.

## SSR und SEO

Das erste HTML enthält den Inhalt bereits. Suchmaschinen müssen dafür kein JavaScript ausführen. Google rät, Server-Side oder Pre-Rendering weiterhin einzusetzen, weil es die Website für Nutzer und Crawler schneller macht. Dynamic Rendering, bei dem Crawlern eine vorgerenderte Version ausgeliefert wird, bezeichnet Google als Workaround, nicht als empfohlene Lösung. Als Alternativen nennt Google Server-Side Rendering, Static Rendering und Hydration.

## Beispiel

```html
<!-- Antwort des Servers bei SSR -->
<h1>Laufschuhe</h1>
<p>Unser Sortiment für Straße und Trail …</p>
<script src="/client.js"></script>
```

Bei reinem Client-Side Rendering enthielte dieselbe Antwort nur ein leeres `<div id="app">`.

## Häufige Fehler

- **Wartezeit bis zum ersten Byte übersehen**: Rendert der Server jede Seite bei der Anfrage, kann sich laut web.dev die TTFB erhöhen.
- **Hydration-Lücke ignorieren**: Die Seite sieht fertig aus, reagiert aber erst, wenn die Skripte der Komponenten geladen und die Event-Handler angehängt sind.
- **Daten doppelt ausliefern**: Bei SSR mit Rehydration schickt der Server die Oberfläche und zusätzlich die Quelldaten sowie eine vollständige Kopie der Implementierung. web.dev nennt das als Nachteil.
- **Mit Dynamic Rendering gleichsetzen**: Dynamic Rendering liefert nur erkannten Crawlern eine eigene Version. SSR liefert allen dieselbe Antwort.

## Häufige Fragen

**Was bedeutet Server-Side Rendering?** Der Server erzeugt das HTML einer Seite und schickt es fertig zum Browser.

**Ist React CSR oder SSR?** Beides ist möglich. React kann im Browser rendern oder, etwa mit Next.js, auf dem Server.

## Rendering-Arten im Vergleich

| Art | Wo und wann entsteht das HTML? | Inhalt schon im ausgelieferten HTML? | Einordnung durch Google |
|---|---|---|---|
| Client-Side Rendering (CSR) | im Browser per JavaScript; Daten, Templates und Routing laufen auf dem Client | nein, erst nach Ausführen von JavaScript | Google rendert Seiten mit Status 200 in einem eigenen Schritt nach dem Crawlen und empfiehlt Server-Side- oder Pre-Rendering, weil nicht alle Bots JavaScript ausführen |
| Server-Side Rendering (SSR) | auf dem Server, bei jeder Anfrage | ja | von Google als Lösung empfohlen (statt Dynamic Rendering) |
| Static Site Generation (SSG, statisches Rendering) | beim Build; meist vorab eine HTML-Datei je URL | ja | von Google als Lösung empfohlen (statt Dynamic Rendering) |
| Incremental Static Regeneration (ISR) | beim Build vorgerendert; nach Ablauf der Revalidierungszeit erzeugt der Server die Seite im Hintergrund neu (Framework-Funktion, z. B. Next.js) | ja, aus dem Cache; bis zur Neuerzeugung wird die ältere Version ausgeliefert | keine eigene Angabe von Google |
| Prerendering | beim Build; die clientseitige App wird ausgeführt und ihr Startzustand als statisches HTML gespeichert | ja (Startzustand) | Google nennt Server-Side- oder Pre-Rendering weiterhin „eine gute Idee“, weil es Seiten für Nutzer und Crawler schneller macht |
| Dynamic Rendering | ein Rendering-Server erzeugt HTML nur für erkannte Crawler; Nutzer erhalten die clientseitig gerenderte Version | nur in der Version für Crawler | laut Google ein Workaround und keine dauerhafte Lösung; gilt nicht als Cloaking, solange Nutzer und Crawler ähnliche Inhalte sehen |

Quellen: [web.dev: Rendering on the Web](https://web.dev/articles/rendering-on-the-web); [Google Search Central: Understand JavaScript SEO basics (last updated 2026-03-04)](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics); [Google Search Central: Dynamic rendering as a workaround (last updated 2025-12-10)](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering); [Next.js Docs: How to implement Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/guides/incremental-static-regeneration). Stand: 8. Oktober 2026

*Grafik: Wo das HTML entsteht: CSR, SSR, SSG.* Entscheidend für Crawler ist, ob der Inhalt schon in der ersten HTML-Antwort steht. Google empfiehlt Server-Side Rendering oder Prerendering; Dynamic Rendering bezeichnet Google als Workaround, keine Dauerlösung.

## Nicht verwechseln

- [Client-Side Rendering (CSR)](https://seo-geo-glossary.com/de/glossar/client-side-rendering/index.md): baut das HTML im Browser mit JavaScript auf. Der Server liefert zunächst nur ein schlankes Dokument, der Inhalt erscheint erst nach Ausführung des Skripts.

## Verwandte Begriffe

- [Client-Side Rendering (CSR)](https://seo-geo-glossary.com/de/glossar/client-side-rendering/index.md)
- [Rendering](https://seo-geo-glossary.com/de/glossar/rendering/index.md)
- [Dynamic Rendering](https://seo-geo-glossary.com/de/glossar/dynamic-rendering/index.md)
- [Hydration](https://seo-geo-glossary.com/de/glossar/hydration/index.md)
- [Static Site Generation (SSG)](https://seo-geo-glossary.com/de/glossar/static-site-generation/index.md)
- [JavaScript-SEO](https://seo-geo-glossary.com/de/glossar/javascript-seo/index.md)

## Quellen

- [Rendering on the Web – web.dev](https://web.dev/articles/rendering-on-the-web)
- [Dynamic rendering as a workaround – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering)
- [JavaScript SEO Basics – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)

---

Stand: 8. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/server-side-rendering/
