Rendering op de server of in de browser
Waar de HTML van een pagina ontstaat, maakt veel uit voor snelheid en vindbaarheid. Dit zijn de gangbare vormen:
| Vorm | Wat gebeurt er | Let op |
|---|---|---|
| Server-side rendering (SSR) | De server maakt bij elke aanvraag de volledige HTML | Snel zichtbare inhoud, maar het maken kost servertijd |
| Client-side rendering (CSR) | De browser bouwt de pagina met JavaScript | Er gaat meer data naar het apparaat van de bezoeker |
| Statische rendering | De HTML per URL staat vooraf klaar, al bij het bouwen van de site | Snel, en goed te combineren met een CDN |
| Hydration | Scripts in de browser maken server-HTML interactief | Combineert snelle HTML met interactie |
Hoe rendert Google een pagina?
Google verwerkt pagina’s in drie stappen: crawlen, renderen en indexeren. Na het crawlen gaat een werkende pagina (statuscode 200) in een wachtrij voor rendering. Dat kan een paar seconden duren, maar ook langer. Daarna opent een Chromium-browser zonder scherm (headless) de pagina en voert de JavaScript-code uit. Google zoekt in de gerenderde HTML naar nieuwe links en gebruikt die HTML om de pagina te indexeren.
Er zijn grenzen. Bestanden die je in robots.txt blokkeert, rendert Google niet. Bij een andere statuscode dan 200, zoals een 404, kan Google het renderen overslaan. Google noemt server-side rendering of prerendering nog steeds een goed idee: je site wordt er sneller van en niet alle bots kunnen JavaScript uitvoeren.
Dynamic rendering was een tijd een noodoplossing. Daarbij kregen bots een vooraf gerenderde versie en bezoekers de JavaScript-versie. Google raadt dat niet meer aan en verwijst naar server-side rendering, statische rendering of hydration.
Voorbeeld: een vacaturesite die alleen in de browser rendert
Een recruitmentbureau uit Eindhoven bouwt een nieuwe vacaturesite als JavaScript-app. De HTML die de server stuurt, bevat alleen een lege schil. Titels, teksten en links naar vacatures verschijnen pas als de JavaScript-code draait. Google moet elke vacature dus eerst renderen voordat de inhoud zichtbaar is.
Het bureau zet de vacaturepagina’s om naar server-side rendering. Nu staat de volledige tekst al in de eerste HTML. Google en andere bots zien de inhoud direct, ook als ze geen JavaScript uitvoeren. Bezoekers zien de vacature sneller, en JavaScript maakt de zoekfilters daarna interactief.
Verwar rendering niet met
- Prerendering door de browser: sommige browsers laden een volgende pagina alvast op de achtergrond. Prerendering bij het bouwen van een site is iets anders. Daarbij draait de JavaScript-app vooraf en sla je de eerste weergave op als statische HTML.
- Renderen van video of 3D: daar betekent renderen het berekenen van beelden. Dat staat los van webpagina’s.
Veelgestelde vragen over Rendering
Wat betekent renderen?
Renderen betekent hier: van de code van een webpagina een zichtbare pagina maken. De browser doet dat voor bezoekers. Google doet het ook, om te zien wat er op de pagina staat.
Kan Google JavaScript lezen?
Ja. Google rendert pagina’s met een actuele versie van Chromium en voert daarbij JavaScript uit. Dat gebeurt wel via een wachtrij. Niet alle andere bots kunnen JavaScript uitvoeren.
Wat is beter voor SEO: SSR of CSR?
Google raadt server-side rendering, statische rendering of hydration aan. Dan staat de inhoud al in de HTML. Dat is sneller voor bezoekers en betrouwbaarder voor zoekmachines.