Client-Side Rendering (CSR, deutsch: Rendering auf der Client-Seite) ist ein Ansatz, bei dem der Browser die Webseite erst zur Laufzeit aus JavaScript-Code zusammensetzt. Der Server liefert nur ein schlankes HTML-Grundgerüst mit, den eigentlichen Inhalt erzeugt JavaScript im Browser – oft mit Daten, die per AJAX oder fetch() nachgeladen werden.
Wie funktioniert CSR?
Beim ersten Aufruf lädt der Browser das HTML-Gerüst, die Styles und das JavaScript-Bundle. Das Skript startet die Anwendung, baut den Seiteninhalt im DOM auf und übernimmt von da an auch die Navigation: Klicks auf Links werden abgefangen, neue Ansichten entstehen direkt im Browser, ohne dass der Server eine neue Seite schickt.
Dieses Muster steckt hinter Single Page Applications (SPAs). Typische Werkzeuge sind die Frameworks React, Vue und Angular.
Vorteile und Nachteile
- Vorteile: Nach dem ersten Laden wirkt die Anwendung flüssig und app-artig, weil nur noch Daten statt ganzer Seiten übertragen werden. Die Server-Last sinkt, da das Rendering auf die Nutzer-Geräte verlagert wird.
- Nachteile: Die Erste-Ladezeit ist oft länger, weil erst ein großes JavaScript-Bundle geladen und ausgeführt werden muss. Suchmaschinen-Crawler ohne JavaScript-Unterstützung sehen zunächst leeres HTML – ein Thema für die SEO. Ohne aktiviertes JavaScript bleibt die Seite leer.
Abgrenzung zu anderen Rendering-Ansätzen
Beim Server-Side Rendering (SSR) erzeugt der Server das fertige HTML bereits bei jeder Anfrage; bei der Static-Site-Generation (SSG) entstehen die Seiten sogar schon zur Buildzeit als statische Dateien. CSR verschiebt diese Arbeit bewusst in den Browser. In der Praxis kombinieren viele moderne Frameworks die Ansätze, damit die Seite schnell sichtbar ist und trotzdem interaktiv bleibt.
Verwandte Grundlagen: Frontend, JavaScript, DOM, PWA.