Server-Side Rendering
Het genereren van HTML op de server zodat crawlers en AI-bots de volledige content direct kunnen lezen.
Server-Side Rendering (SSR) is een techniek waarbij de HTML van een webpagina op de server wordt gegenereerd voordat deze naar de browser wordt gestuurd. Dit in tegenstelling tot Client-Side Rendering (CSR), waarbij JavaScript in de browser de pagina opbouwt.
SSR en vindbaarheid
Google kan JavaScript renderen, maar met vertragingen. Andere zoekmachines en AI-bots hebben vaak beperkte of geen JavaScript-ondersteuning. SSR garandeert dat alle content direct beschikbaar is voor elke crawler.
SSR als AEO-basis
AI-bots als GPTBot en ClaudeBot voeren geen JavaScript uit. Als je content alleen via CSR beschikbaar is, missen deze bots je content volledig. SSR is daarom een basisvereiste voor AEO — bibliotheekterm-gereedheid. Overweeg SSR of static site generation als je site zwaar leunt op JavaScript-frameworks.
SSR vs CSR vs SSG vs ISR
| Kenmerk | SSR (Server-Side Rendering) | CSR (Client-Side Rendering) | SSG (Static Site Generation) | ISR (Incremental Static Regeneration) |
|---|---|---|---|---|
| HTML-generatie | Op de server bij elk verzoek | In de browser via JavaScript | Build-time (vooraf) | Build-time + on-demand regeneratie |
| Time to First Byte | Hoger (server moet renderen) | Laag (leeg HTML-skelet) | Zeer laag (statisch bestand) | Zeer laag (gecached) |
| SEO — bibliotheekterm-vriendelijk | Uitstekend | Problematisch | Uitstekend | Uitstekend |
| AI-bot-vriendelijk | Ja (volledige HTML) | Nee (lege DOM) | Ja (volledige HTML) | Ja (volledige HTML) |
| Dynamische content | Ja (real-time) | Ja (real-time) | Nee (verouderd tot rebuild) | Ja (met revalidatie-interval) |
| Serverbelasting | Hoog (per request) | Laag (client doet het werk) | Minimaal (statische bestanden) | Laag tot gemiddeld |
| Geschikt voor | Dynamische sites, dashboards, gepersonaliseerde content | Web-apps, SPA's achter login | Blogs, docs, marketingsites | E-commerce, nieuwssites |
| Frameworks | Next.js, Nuxt, SvelteKit, Laravel Blade | React SPA, Vue SPA, Angular | Next.js, Gatsby, Hugo, Astro | Next.js, Nuxt 3 |
Hoe test je of een site SSR gebruikt?
- View Page Source: klik rechts op de pagina en kies "Paginabron bekijken" (of Ctrl+U). Als je de volledige content ziet in de HTML, is het SSR of SSG. Als je alleen een leeg
<div id="app"></div>ziet met een JavaScript-bundel, is het CSR. - JavaScript uitschakelen: schakel JavaScript uit in je browser (Chrome DevTools > Settings > Debugger > Disable JavaScript). Als de pagina nog steeds content toont, is het SSR. Als de pagina leeg of kapot is, is het CSR.
- curl commando: gebruik
curl -s https://example.com | head -100in de terminal. curl voert geen JavaScript uit, dus je ziet precies wat crawlers zien. - Google Cache: bekijk de gecachte versie van de pagina in Google. Als de content ontbreekt, heeft Googlebot mogelijk moeite met de JavaScript-rendering.
Veelgestelde vragen
Kan Googlebot JavaScript renderen?
Ja, Googlebot kan JavaScript renderen, maar met vertraging (de "second wave of indexing"). Complexe JavaScript-applicaties worden soms niet volledig gerenderd, en andere zoekmachines zoals Bing hebben beperktere JavaScript-ondersteuning.
Is Laravel met Blade SSR?
Ja. Laravel met Blade templates genereert HTML op de server. De volledige pagina-inhoud is direct beschikbaar voor crawlers en AI-bots. Livewire voegt interactiviteit toe via AJAX, maar de initiiele HTML is server-gerenderd.
Moet ik SSR gebruiken als ik een SPA (Single Page Application) heb?
Voor publieke, vindbare pagina's is SSR sterk aanbevolen. Voor pagina's achter een login (dashboards, admin panels) maakt het minder uit omdat deze toch niet geindexeerd hoeven te worden. Frameworks als Next.js en Nuxt maken het eenvoudig om SSR per pagina in te schakelen.
Wat is het verschil tussen SSR en prerendering?
SSR genereert HTML bij elk verzoek. Prerendering genereert HTML vooraf (build-time) voor specifieke routes en servereert het als statische bestanden. Prerendering is eenvoudiger maar minder geschikt voor dynamische content.
Heeft SSR impact op Core Web Vitals — bibliotheekterm?
SSR kan TTFB verhogen (de server moet de pagina renderen), maar verbetert meestal LCP en CLS omdat de content direct beschikbaar is. CSR heeft vaak een betere TTFB maar slechtere LCP door de JavaScript-laadtijd. De ideale oplossing hangt af van je specifieke situatie.
Wat checkt onze scanner?
Onze scanner vergelijkt de HTML die de server levert (zonder JavaScript) met de volledig gerenderde pagina. We berekenen een SSR Coverage-percentage: hoeveel van de zichtbare content is direct beschikbaar in de server-response? Een laag percentage betekent dat je site afhankelijk is van JavaScript en mogelijk onzichtbaar is voor AI-bots. Test je SSR coverage.
