Vermoordt JavaScript onze AI-zichtbaarheid? AI-crawlers lijken onze dynamische content te missen

Je vermoeden klopt. De meeste AI-crawlers VOEREN GEEN JavaScript uit.

Hoe verschillende crawlers omgaan met JS:

Waarom dit belangrijk is: Als je content wordt gerenderd door client-side JS, zien AI-crawlers:

<div id="app"></div>

Niet je daadwerkelijke content.

De oplossingshiërarchie:

1. Server-Side Rendering (SSR) - Content in initiële HTML-respons
2. Static Site Generation (SSG) - Vooraf gebouwde HTML-pagina’s
3. Prerendering service - Service rendert JS voor bots
4. Hybride rendering - SSR voor belangrijke content, client voor interacties

Je React-app kan een van deze implementeren. Met Next.js is SSR/SSG eenvoudig te realiseren.

Wij hebben exact deze migratie gedaan. Hier onze praktische ervaring:

Voor (React SPA):

• Client-side rendering
• Content via API-calls
• AI-zichtbaarheid: Nul

Na (Next.js SSR):

• Server-side rendering voor alle contentpagina’s
• Statische generatie voor documentatie
• AI-zichtbaarheid: Groeit wekelijks

Implementatietips:

1. Gebruik App Router met Server Components Standaard is SSR – content werkt direct

2. Data fetching aan serverzijde

   // Dit draait op de server, content in HTML
   async function Page() {
     const data = await fetch('...');
     return <Article data={data} />;
   }
   

3. Vermijd ‘use client’ voor contentcomponenten Alleen voor interactiviteit client components gebruiken

4. Metadata API voor SEO/AI

   export const metadata = {
     title: '...',
     description: '...',
   };
   

Migratie-inspanning: Ongeveer 3 weken voor een middelgrote site. Elke uur waard.

Resultaten: Eerste AI-citaties verschenen binnen 6 weken na livegang van SSR-site.

Als migratie niet haalbaar is, is prerendering een optie:

Wat prerendering doet:

• Service rendert jouw JS voor botverzoeken
• Levert volledige HTML aan crawlers
• Echte gebruikers krijgen nog steeds je SPA

Populaire services:

• Prerender.io
• Rendertron
• Puppeteer-based oplossingen

Implementatie: Middleware detecteert bot user agents en leidt door naar prerender-service.

Voordelen:

• Geen wijzigingen aan codebase
• Werkt met elk framework
• Snelle implementatie

Nadelen:

• Extra kosten
• Latentie voor botrequests
• Complexiteit in caching
• Afhankelijkheid van derden

Wanneer gebruiken:

• Grote legacy codebase
• Migratie op korte termijn niet haalbaar
• Snel AI-zichtbaar willen zijn

Wanneer NIET gebruiken:

• Nieuwe projecten (gebruik gewoon SSR)
• Kleine sites (migratie is eenvoudiger)
• Beperkt budget (prerendering kost geld)

Prerendering is een tijdelijke oplossing, geen ideaal lange-termijnbeleid.

Framework-opties voor AI-vriendelijke sites:

Aanbeveling per situatie:

• Nieuw project: Next.js, Nuxt of SvelteKit
• React-migratie: Next.js
• Vue-migratie: Nuxt
• Contentrijke site: Gatsby of Astro
• Blog/docs: Hugo, Eleventy of Astro

Voor AI-zichtbaarheid werkt alles met SSR/SSG. Pure client-side rendering werkt niet.

Hybride rendering voor complexe apps:

De uitdaging: Sommige delen van je app HEBBEN client-side rendering nodig (dashboards, interactieve tools). Maar content heeft SSR nodig.

Oplossing: Hybride rendering

1. Contentpagina’s: Volledige SSR

   • Blogposts, documentatie
   • Marketingpagina’s
   • FAQ’s en kennisbank

2. Interactieve features: Client-side

   • Dashboards
   • Formulieren en tools
   • Gebruikersspecifieke content

Next.js App Router maakt dit eenvoudig:

• Server Components voor content
• Client Components voor interactiviteit
• Vrij combineren op dezelfde pagina

Voorbeeldstructuur:

// Pagina wordt server-gerenderd
export default function Page() {
  return (
    <>
      <ServerRenderedContent /> {/* AI ziet dit */}
      <ClientInteractiveWidget /> {/* AI heeft dit niet nodig */}
    </>
  );
}

Het principe: Alles wat je door AI gezien wilt hebben: server-renderen. Alles daarbuiten: client-side is prima.

Testen of je content AI-zichtbaar is:

Methode 1: Bron weergeven

• Rechtsklik → Paginabron weergeven
• Als content zichtbaar is = AI kan het zien
• Als alleen <div id="root"></div> te zien is = AI kan het niet zien

Methode 2: JavaScript uitschakelen

• Browser DevTools → Instellingen → JavaScript uitschakelen
• Herlaad pagina
• Als content verdwijnt = AI kan het niet zien

Methode 3: curl-test

curl -A "GPTBot" https://jouwsite.com/pagina | grep "jouw content"

Als content terugkomt, zit je goed.

Methode 4: Google Rich Results Test

• Test gerenderde content
• Laat zien wat Googlebot ziet
• Vergelijkbaar met wat AI-bots zien

Na implementatie van SSR: Voer deze tests opnieuw uit. Content moet in alle methodes zichtbaar zijn.

Pro tip: Zet monitoring op om regressies te signaleren. SSR kan stukgaan zonder duidelijke symptomen.

Performance-overwegingen bij SSR:

SSR voegt serverbelasting toe:

• Elke aanvraag vereist server-rendering
• Meer compute dan statische bestanden serveren
• Caching wordt cruciaal

Mitigatiestrategieën:

1. Statische generatie waar mogelijk

   • Blogposts, documentatie = statisch
   • Dynamische content = SSR

2. Incremental Static Regeneration (ISR)

   • Statische pagina’s periodiek opnieuw opbouwen
   • Beste van beide werelden

3. Edge rendering

   • Renderen aan de rand van het CDN
   • Snellere TTFB wereldwijd

4. Caching-lagen

   • Full-page caching
   • Component-level caching

De trade-off: SSR kost meer in compute, maar levert AI-zichtbaarheid op. Voor de meeste bedrijven is die zichtbaarheid de investering in infrastructuur waard.

Monitoring: Houd TTFB in de gaten na implementatie van SSR. Als die traag is, kunnen bots time-outs krijgen vóór ze de content zien.

Dit bevestigt het probleem en geeft duidelijke oplossingen. Ons actieplan:

Direct (deze week):

1. Huidige rendering auditen met curl-tests
2. Contentpagina’s identificeren die belangrijk zijn voor AI-zichtbaarheid
3. robots.txt controleren op AI-bottoegang

Korte termijn (volgend kwartaal):

1. Starten met Next.js-migratie voor contentpagina’s
2. SSR/SSG implementeren voor blog, docs en marketingpagina’s
3. Dashboard/app client-side gerenderd houden

Implementatie-aanpak:

1. Beginnen met de meest waardevolle contentpagina’s
2. AI-zichtbaarheid na elke batch testen
3. ISR gebruiken voor vaak geüpdatete content
4. TTFB blijven monitoren

Technische keuzes:

• Next.js App Router met Server Components
• Statische generatie voor documentatie
• SSR voor blog en marketing
• Client components alleen waar nodig

Testplan:

1. curl-tests na elke deployment
2. Bronweergave-verificatie
3. AI-citaties in de tijd monitoren
4. Bijhouden welke pagina’s geciteerd worden

Belangrijkste inzicht: Client-side rendering = onzichtbaar voor AI. SSR/SSG = zichtbaar. De migratie is niet optioneel voor AI-zichtbaarheid.

Bedankt allemaal – het pad is nu duidelijk!