Client-Side Rendering (CSR)

technical-seo

Client-Side Rendering (CSR) is een rendering-strategie waarbij de browser al het JavaScript downloadt, parst en uitvoert om de pagina te renderen. De server stuurt een minimaal HTML-document met een JavaScript-bundle. CSR is het standaard gedrag van React (Create React App), Angular, en Vue SPA's.

Wat is CSR?

Bij CSR ontvangt de browser dit:

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

Pas nadat de browser het JavaScript-bestand downloadt en uitvoert, verschijnt de content. Gebruikers merken dit nauwelijks (hun browser doet het automatisch), maar crawlers zien alleen de lege HTML.

Google rendert CSR-content via headless Chrome, maar met beperkingen: vertraging (seconden tot dagen), extra crawlbudget-kosten, en niet alle JavaScript-features worden ondersteund.

AI-crawlers renderen geen JavaScript. Een CSR-site is volledig onzichtbaar voor ChatGPT, Claude en Perplexity.

Waarom belangrijk

CSR heeft het hoogste SEO-risicoprofiel van alle rendering-strategieën. AI-bots renderen geen JavaScript, waardoor CSR-sites volledig onzichtbaar zijn voor AI-zoekmachines. Google kan CSR renderen, maar het is onbetrouwbaar en kostbaar.

CSR is alleen acceptabel voor content die niet geïndexeerd hoeft te worden: dashboards, admin-panels, applicaties achter login.

Voorbeeld

Een typisch CSR-probleem diagnosticeren:

# Simuleer wat een crawler zonder JS ziet curl -s https://jouwsite.nl | grep -c "<div id=\"root\"></div>" # Resultaat 1 = CSR, je content is onzichtbaar voor bots

De oplossing: migreer naar SSR (Next.js, Nuxt, SvelteKit) of SSG (Astro, Next.js static export).

Gerelateerd