# Client-Side Rendering (CSR)

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: CSR, clientseitiges Rendering

**Client-Side Rendering (CSR)** bezeichnet in der Webentwicklung das Erzeugen von HTML-Inhalten per JavaScript im Browser. Das Kürzel CSR steht in der Suche auch für anderes, hier geht es um die Rendering-Technik. Sie steht dem Server-Side Rendering (SSR) gegenüber, beide lassen sich in einer Anwendung kombinieren.

## Wie funktioniert CSR?

Eine reine CSR-Anwendung liefert nur ein minimales HTML mit einem Wurzelelement und ein JavaScript-Bündel. Das Skript baut die eigentlichen Inhalte im Browser auf. Seitenwechsel laden danach oft nur noch Daten, ohne die ganze Seite neu zu holen. Single-Page-Anwendungen mit React, Vue oder Svelte sind nach MDN nicht zwingend CSR und können serverseitig rendern.

## CSR und SEO

Google verarbeitet JavaScript in drei Phasen. Googlebot crawlt die URL, ein Headless Chromium rendert sie, danach folgt die Indexierung. Seiten mit dem Status 200 kommen in eine Warteschlange für das Rendering, sofern kein noindex dagegen spricht. Dateien oder Seiten, die per robots.txt gesperrt sind, rendert Google nicht. Google empfiehlt weiterhin Server-Side Rendering oder Pre-Rendering, weil nicht alle Bots JavaScript ausführen. Einige Drittquellen behaupten, Google ranke CSR-Seiten schlechter, eine solche Aussage findet sich in Googles Doku nicht.

Bei Fehlerseiten in Single-Page-Anwendungen nennt Google echte 404-Statuscodes oder `noindex`, damit sie nicht indexiert werden.

## Beispiel

```html
<body>
  <div id="root">
  <script src="bundle.js"></script>
</body>
```

Im Quelltext fehlen Überschriften, Texte und Links. Sie erscheinen erst im gerenderten HTML, das sich in der Search Console mit der URL-Prüfung ansehen lässt.

## 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

- [Server-Side Rendering (SSR)](https://seo-geo-glossary.com/de/glossar/server-side-rendering/index.md): erzeugt das HTML auf dem Server, sodass Überschriften, Texte und Links schon in der ersten Antwort stehen.

## Verwandte Begriffe

- [Server-Side Rendering (SSR)](https://seo-geo-glossary.com/de/glossar/server-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)
- [Single-Page-Application (SPA)](https://seo-geo-glossary.com/de/glossar/single-page-application/index.md)
- [JavaScript-SEO](https://seo-geo-glossary.com/de/glossar/javascript-seo/index.md)
- [Hydration](https://seo-geo-glossary.com/de/glossar/hydration/index.md)
- [Pre-Rendering](https://seo-geo-glossary.com/de/glossar/pre-rendering/index.md)
- [Gerendertes HTML](https://seo-geo-glossary.com/de/glossar/gerendertes-html/index.md)

## Quellen

- [Client-side rendering (CSR) – MDN Glossary](https://developer.mozilla.org/en-US/docs/Glossary/CSR)
- [JavaScript SEO Basics – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
- [Fix Search-related JavaScript problems – Google Search Central](https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript)

---

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