TECHNISCHE SEO AI & AGENTS 06 feb. 2026 10 min leestijd

Server-side rendering versus client-side voor AI

Bas Vermeer SEO/AEO Specialist

Rendering en AI: waarom het uitmaakt

Wanneer een bezoeker je website opent, bouwt de browser de pagina op vanuit HTML, CSS en JavaScript. Bij server-side rendering (SSR) stuurt de server een volledig opgebouwde HTML-pagina naar de browser. Bij client-side rendering (CSR) stuurt de server een minimaal HTML-skelet en laat JavaScript de pagina in de browser opbouwen. Voor menselijke bezoekers is het verschil nauwelijks merkbaar, maar voor AI-crawlers is het fundamenteel.

De meeste AI-crawlers voeren geen JavaScript uit. GPTBot, PerplexityBot en ClaudeBot lezen de initieel geleverde HTML en negeren content die pas na JavaScript-uitvoering verschijnt. Dit betekent dat een React, Vue of Angular applicatie die volledig op client-side rendering leunt, voor AI-crawlers vrijwel leeg is. Alle content, alle structured data en alle meta-informatie die via JavaScript wordt geladen, blijft onzichtbaar. Dit is een van de meest onderschatte technische factoren in AEO-strategie.

BELANGRIJK

De meeste AI-crawlers voeren geen JavaScript uit. Content die alleen via client-side rendering beschikbaar is, bestaat niet voor AI-modellen. Dit geldt voor GPTBot, PerplexityBot, ClaudeBot en de meeste andere AI-crawlers.

Hoe AI-crawlers je pagina verwerken

Om te begrijpen waarom rendering zo belangrijk is, moet je weten hoe AI-crawlers technisch te werk gaan. Het proces verloopt in de meeste gevallen als volgt.

De crawler stuurt een HTTP GET-request naar je URL en ontvangt de initieel geleverde HTML (de "raw" response van de server).
De crawler parseert de HTML en extraheert tekst, meta tags, JSON-LD structured data, links en heading-hierarchie.
Content die pas verschijnt na het uitvoeren van JavaScript wordt niet gezien, tenzij de crawler beschikt over een rendering engine (zoals Googlebot).
De geextraheerde informatie wordt verwerkt, geindexeerd of direct gebruikt voor het genereren van antwoorden.

Googlebot is een uitzondering: Google beschikt over een volledige rendering pipeline die JavaScript uitvoert via een headless Chrome-instantie. Maar zelfs bij Googlebot vindt rendering met vertraging plaats (de "render queue"), waardoor SSR-content sneller wordt verwerkt. Bij alle bekende AI-crawlers is SSR de enige betrouwbare manier om ervoor te zorgen dat je content zichtbaar is.

Server-side rendering: de gouden standaard voor AI

Bij server-side rendering bouwt de server de volledige HTML-pagina op voordat deze naar de client wordt gestuurd. Dit is het traditionele model dat frameworks als Laravel met Blade templates, Ruby on Rails en Django gebruiken. Het is ook de aanpak die moderne meta-frameworks als Next.js (React) en Nuxt (Vue) standaard ondersteunen.

<!-- SSR: de server levert volledige HTML -->\n<!DOCTYPE html>\n<html lang="nl">\n<head>\n  <title>Server-Side Rendered Pagina</title>\n  <meta name="description" content="Alle content is direct beschikbaar in de HTML." />\n  <script type="application/ld+json">\n  {\n    "@context": "https://schema.org",\n    "@type": "Article",\n    "headline": "Server-Side Rendered Pagina",\n    "author": { "@type": "Person", "name": "Jan de Vries" }\n  }\n  </script>\n</head>\n<body>\n  <h1>Server-Side Rendered Pagina</h1>\n  <p>Deze content is direct zichtbaar voor AI-crawlers\n     zonder JavaScript-uitvoering.</p>\n</body>\n</html>

Voordelen van SSR voor AI-zichtbaarheid

Alle content is direct beschikbaar in de initieel geleverde HTML, ongeacht of de crawler JavaScript uitvoert.
Structured data (JSON-LD) is opgenomen in de server-response en wordt gegarandeerd geparsed.
Meta tags (title, description, Open Graph, canonical) zijn direct aanwezig en hoeven niet dynamisch te worden gegenereerd.
Snellere First Contentful Paint, wat niet alleen goed is voor gebruikerservaring maar ook voor crawlers met een tijdsbudget.
Eenvoudiger te debuggen: de HTML-broncode toont exact wat crawlers zien.

Client-side rendering: de valkuil voor AI-zichtbaarheid

Client-side rendering is populair geworden door frameworks als React, Vue en Angular. De aanpak biedt voordelen voor interactieve webapplicaties, maar is problematisch voor content die door AI-crawlers moet worden geindexeerd.

<!-- CSR: de server levert een leeg skelet -->\n<!DOCTYPE html>\n<html lang="nl">\n<head>\n  <title>Mijn App</title>\n</head>\n<body>\n  <div id="app"></div>\n  <!-- Al je content wordt pas geladen nadat dit script draait -->\n  <script src="/js/app.bundle.js"></script>\n</body>\n</html>\n\n<!-- Dit is wat een AI-crawler ziet: een lege pagina\n     met alleen een div en een script-referentie.\n     Geen tekst, geen structured data, geen meta tags. -->

Het bovenstaande voorbeeld illustreert het kernprobleem. Een AI-crawler ziet alleen de initieel geleverde HTML: een lege <div id="app"> en een verwijzing naar een JavaScript-bundel. Alle tekst, afbeeldingen, structured data en navigatie die JavaScript zou laden, zijn onzichtbaar. Dit is vergelijkbaar met het probleem bij dynamisch gegenereerde Schema.org markup: als het niet in de initieel geleverde HTML staat, bestaat het niet voor de meeste AI-crawlers.

Hybride oplossingen: het beste van twee werelden

Gelukkig hoef je niet te kiezen tussen pure SSR en pure CSR. Moderne frameworks bieden hybride oplossingen die server-side rendering combineren met client-side interactiviteit.

Static Site Generation (SSG)

Bij SSG worden pagina's vooraf gegenereerd als statische HTML-bestanden tijdens het buildproces. Dit is de snelste optie voor AI-crawlers, omdat de content direct beschikbaar is zonder enige serververwerking. Frameworks als Next.js (getStaticProps), Nuxt (nuxt generate) en Astro ondersteunen SSG standaard.

Incremental Static Regeneration (ISR)

ISR combineert de snelheid van SSG met de flexibiliteit van SSR. Pagina's worden statisch gegenereerd, maar kunnen op de achtergrond worden bijgewerkt na een ingesteld interval. Dit is ideaal voor content die regelmatig verandert maar niet real-time hoeft te zijn.

// Next.js: verschillende rendering strategieen\n\n// 1. Server-Side Rendering (SSR)\n// Pagina wordt bij elk verzoek op de server gerenderd\nexport async function getServerSideProps() {\n  const data = await fetchArticleData();\n  return { props: { data } };\n}\n\n// 2. Static Site Generation (SSG)\n// Pagina wordt eenmalig gegenereerd tijdens build\nexport async function getStaticProps() {\n  const data = await fetchArticleData();\n  return { props: { data } };\n}\n\n// 3. Incremental Static Regeneration (ISR)\n// Pagina wordt statisch gegenereerd en periodiek bijgewerkt\nexport async function getStaticProps() {\n  const data = await fetchArticleData();\n  return {\n    props: { data },\n    revalidate: 3600, // Hervalideer elk uur\n  };\n}

Laravel en Livewire: SSR met interactiviteit

Laravel met Livewire is een uitstekend voorbeeld van een framework dat SSR combineert met client-side interactiviteit. Blade templates worden server-side gerenderd, waardoor alle content direct beschikbaar is voor AI-crawlers. Livewire voegt interactiviteit toe via AJAX-calls, maar de initieel geleverde HTML bevat altijd de volledige content. Dit maakt Laravel met Livewire tot een van de meest AI-vriendelijke stacks die beschikbaar zijn. In combinatie met sterke E-E-A-T signalen en correcte structured data biedt dit een solide basis voor AI-zichtbaarheid.

Je rendering testen vanuit AI-perspectief

Hoe weet je of AI-crawlers je content daadwerkelijk kunnen zien? Er zijn verschillende manieren om dit te testen.

# Test 1: Bekijk de ruwe HTML-broncode\ncurl -s https://jouwsite.nl/pagina | head -100\n\n# Test 2: Vergelijk met een JavaScript-disabled browser\n# Chrome: Instellingen > Privacy > Site settings > JavaScript > Uit\n\n# Test 3: Gebruik een tool die JavaScript niet uitvoert\ncurl -A "GPTBot/1.0" -s https://jouwsite.nl/pagina \\n  | grep -c "<p>"\n\n# Als dit 0 retourneert, is je content\n# afhankelijk van JavaScript rendering\n\n# Test 4: Google Rich Results Test\n# Vergelijk "gerenderde HTML" met "broncode"\n# in de Google Rich Results Test

Bekijk de HTML-broncode (niet "Inspect Element") via Ctrl+U of curl. Dit is de ongerenderde versie die AI-crawlers ontvangen.
Schakel JavaScript uit in je browser en navigeer door je site. Alle content die verdwijnt, is onzichtbaar voor AI-crawlers.
Gebruik de Google Rich Results Test en vergelijk de broncode met de gerenderde versie. Grote verschillen wijzen op JavaScript-afhankelijkheid.
Controleer je structured data: is het JSON-LD blok aanwezig in de ruwe HTML, of wordt het dynamisch toegevoegd door JavaScript?

De simpelste test voor AI-zichtbaarheid: schakel JavaScript uit in je browser. Alles wat verdwijnt, is onzichtbaar voor de meeste AI-crawlers.

Samenvatting

De meeste AI-crawlers voeren geen JavaScript uit. Alleen content in de initieel geleverde HTML is gegarandeerd zichtbaar.
Server-side rendering (SSR) is de gouden standaard voor AI-zichtbaarheid: alle content, structured data en meta tags zijn direct beschikbaar.
Pure client-side rendering (CSR) maakt je content onzichtbaar voor AI-crawlers. Vermijd dit voor content die je wilt laten indexeren.
Hybride oplossingen zoals SSG, ISR en Laravel met Livewire combineren de voordelen van SSR met client-side interactiviteit.
Test je rendering door JavaScript uit te schakelen, de ruwe HTML-broncode te bekijken en tools als curl te gebruiken om te verifiereen wat crawlers zien.

Veelgestelde vragen

Voert Googlebot JavaScript uit?

Ja, Googlebot beschikt over een volledige rendering engine gebaseerd op headless Chrome. Maar dit rendering vindt plaats in een aparte stap (de "render queue") die dagen tot weken kan duren. Server-side gerenderde content wordt daarom sneller verwerkt. Bovendien zijn andere AI-crawlers (GPTBot, PerplexityBot, ClaudeBot) minder geavanceerd en voeren ze doorgaans geen JavaScript uit.

Kan ik dynamic rendering gebruiken als compromis?

Dynamic rendering (verschillende content serveren aan crawlers versus gebruikers) wordt door Google officieel ontraden en door sommige AI-crawlers als cloaking beschouwd. Het is een technisch complex en fragiel compromis dat beter kan worden vervangen door echte SSR of hybride oplossingen. Als je toch dynamic rendering overweegt, zorg er dan voor dat de content identiek is voor zowel crawlers als gebruikers.

Hoe werkt Livewire technisch voor AI-crawlers?

Livewire rendert de initieel staat van een component server-side als volledige HTML. Na het laden van de pagina neemt JavaScript het over voor interactieve updates via AJAX. Omdat de eerste render server-side plaatsvindt, zien AI-crawlers de volledige content inclusief alle tekst, structured data en meta tags. Latere interactieve wijzigingen (zoals formuliervalidatie of live zoeken) zijn niet zichtbaar voor crawlers, maar die zijn doorgaans ook niet relevant voor indexering.

Mijn React-app draait op Next.js met SSR. Is dat voldoende?

Als je Next.js correct configureert met getServerSideProps of getStaticProps, wordt je content server-side gerenderd en is deze zichtbaar voor AI-crawlers. Controleer dit door de ruwe HTML-broncode te bekijken: als je content daar aanwezig is, is je configuratie correct. Let er wel op dat sommige componenten alsnog client-side worden gerenderd (useEffect, dynamische imports met ssr: false). Test elke pagina individueel.

Heeft rendering invloed op mijn Core Web Vitals?

Ja, significant. Server-side rendering levert doorgaans betere Largest Contentful Paint (LCP) scores omdat de content direct in de HTML staat. Client-side rendering vereist dat de browser eerst JavaScript downloadt, parseert en uitvoert voordat content zichtbaar is, wat LCP vertraagt. SSG biedt de beste scores omdat de HTML volledig statisch is. Core Web Vitals zijn geen directe factor voor AI-citaties, maar Google gebruikt ze wel als kwaliteitssignaal voor AI Overviews.

Het mooiste JavaScript-framework ter wereld is waardeloos als AI-crawlers je content niet kunnen lezen. Kies altijd voor een rendering-strategie die server-side HTML levert.

Hoe scoort jouw website op AI-gereedheid?

Krijg binnen 30 seconden je AEO-score en ontdek wat je kunt verbeteren.

▸ Gratis scan

DEEL DIT ARTIKEL

LINKEDIN X