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.
| Art | Wo und wann entsteht das HTML? | Inhalt schon im ausgelieferten HTML? | Einordnung durch Google |
|---|---|---|---|
| Client-Side Rendering (CSR) (dieser Begriff) | 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 |
Als Ersatz für Dynamic Rendering nennt Google Server-Side Rendering, statisches Rendering und Hydration. Der ältere web.dev-Artikel „Rendering on the Web“ bezeichnet Dynamic Rendering noch als erwägenswerte Option; die Tabelle folgt der aktuellen Google-Search-Central-Doku. ISR ist kein Webstandard, die Beschreibung stammt aus der Next.js-Dokumentation. Prerendering hat im Sprachgebrauch weitere Bedeutungen; hier ist die Definition von web.dev gemeint. Quellen: web.dev: Rendering on the Web; Google Search Central: Understand JavaScript SEO basics (last updated 2026-03-04); Google Search Central: Dynamic rendering as a workaround (last updated 2025-12-10); Next.js Docs: How to implement Incremental Static Regeneration (ISR). Stand: .
Beispiel
<body>
<div id="root"></div>
<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.
Quellen
- Client-side rendering (CSR) – MDN Glossarydeveloper.mozilla.org
- JavaScript SEO Basics – Google Search Centraldevelopers.google.com
- Fix Search-related JavaScript problems – Google Search Centraldevelopers.google.com
Stand: