Server-Side Rendering (SSR) is een rendering-strategie waarbij de server het JavaScript uitvoert en complete HTML naar de browser stuurt. Elke crawler — inclusief AI-bots die geen JavaScript renderen — ontvangt een volledig gerenderde pagina. SSR is de aanbevolen aanpak voor dynamische content die geïndexeerd moet worden.
Wat is SSR?
Bij SSR voert de server het JavaScript-framework (React, Vue, Angular) uit bij elk request. De browser ontvangt complete HTML met alle content, in plaats van een leeg <div> met een JavaScript-bundle.
| Aspect | SSR | CSR |
|---|---|---|
| Wie rendert | Server | Browser |
| Wat crawler ziet | Complete HTML | Lege div + JS-bundle |
| TTFB | Hoger (server moet renderen) | Lager (stuurt alleen statische files) |
| FCP | Sneller (HTML is direct bruikbaar) | Trager (wacht op JS) |
| AI-bot compatibiliteit | Volledig | Geen |
Waarom belangrijk
AI-crawlers (GPTBot, ClaudeBot, PerplexityBot) renderen geen JavaScript. Zonder SSR of SSG is je content onzichtbaar voor AI-zoekmachines. Google rendert JavaScript via headless Chrome, maar met vertraging en extra crawlbudget-kosten.
SSR is essentieel voor dynamische content die geïndexeerd moet worden: e-commerce productpagina's, zoekresultaten, user-generated content. Voor statische content is SSG efficienter.
Voorbeeld
In Next.js gebruik je getServerSideProps voor SSR:
export async function getServerSideProps() {
const products = await fetchProducts()
return { props: { products } }
}
In Nuxt gebruik je useAsyncData:
const { data } = await useAsyncData('products', () => $fetch('/api/products'))
Gerelateerd
- JavaScript SEO: rendering en indexering
- Gerelateerde termen: CSR, SSG, Hydration, TTFB