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