Definitie
Bij client-side rendering krijgt de browser een bijna lege HTML-pagina en bouwt JavaScript de content op. Zoekmachines moeten dan eerst renderen om iets te zien.
Wat is client-side rendering?
Bij client-side rendering (CSR) stuurt de server een kale HTML-pagina met een container en een JavaScript-bundel. De browser downloadt de bundel, haalt data op via een API en bouwt daarna de pagina op. Dit is het klassieke model van een single-page application (SPA) in React, Vue of Angular.
Voor de gebruiker kan dat na de eerste keer laden vlot aanvoelen. Voor zoekmachines en de eerste paginaweergave is het een omweg.
Waarom het riskant is voor webshops
Google rendert JavaScript met een actuele versie van Chromium, maar in een aparte stap na het crawlen. Gaat daar iets mis, zoals een time-out, een geblokkeerd script in robots.txt of een API die voor Googlebot faalt, dan indexeert Google een lege pagina. Andere zoekmachines en de meeste AI-crawlers renderen voor zover bekend minder of helemaal niet.
Typische problemen in een webshop:
Een categoriepagina die de productgrid pas na een API-call toont, waardoor de links naar producten niet in de HTML staan. Filters die alleen JavaScript-state zijn, zonder eigen URL. Infinite scroll zonder gepagineerde URL's. Title en canonical die pas met JavaScript worden gezet. En een niet-bestaand product dat gewoon een 200-statuscode geeft met een 'niet gevonden'-melding, een klassieke soft 404.
Ook de eerste weergave lijdt. De bezoeker ziet een witte pagina of skeleton tot de bundel geladen, geparsed en uitgevoerd is én de API heeft geantwoord. Dat schuift je LCP op, zeker op mobiel.
Waar je het tegenkomt
Volledige CSR zie je vooral bij oudere headless-frontends en zelfgebouwde SPA's. Magento en Shopify renderen standaard server-side. Toch sluipt CSR binnen via onderdelen: zoek- en merchandisingtools die de productgrid op categoriepagina's in de browser opbouwen, reviewwidgets, 'vaak samen gekocht'-blokken en configurators.
Dat hoeft geen probleem te zijn voor een widget die niet hoeft te ranken. Het is wel een probleem als de belangrijkste content en interne links van een pagina uit JavaScript komen.
Wat wij adviseren
Alles wat moet ranken of gelinkt moet worden, staat in de server-HTML: productnaam, prijs, beschrijving, H1, title, canonical, structured data en links naar categorieën en producten. Interactie mag daarna in JavaScript.
Bouw je headless, kies dan een framework met SSR of static generation en test elke template met de URL-inspectie in Search Console. Bekijk daar de gerenderde HTML en de screenshot, niet alleen de melding dat de pagina geïndexeerd kan worden.
Moet je een bestaande CSR-frontend houden, dan is prerendering of SSR per route vaak haalbaarder dan een complete herbouw. Begin bij de templates met het meeste organische verkeer: categorie- en productpagina's.
Wat een crawler ziet bij pure CSR
<!doctype html>
<html>
<head><title>Shop</title></head>
<body>
<div id="root"></div>
<script src="/assets/app.4f2a9c.js"></script>
</body>
</html>Verder lezen
Gerelateerde begrippen
Veelgestelde vragen
Kan Google client-side gerenderde pagina's indexeren?+
Ja, Google rendert JavaScript. Maar het kost een extra stap, kan later gebeuren en kan mislukken. Andere crawlers renderen vaak niet.
Is dynamic rendering een oplossing?+
Google noemt dynamic rendering een tijdelijke workaround en geen aanbevolen oplossing. Kies liever voor SSR of static generation.