JavaScript-framework SEO: Next.js, React en Vue zonder rankingverlies

JavaScript-frameworks zoals Next.js, React en Vue maken snelle, interactieve sites mogelijk. Maar dezelfde technologie die je app vlot laat aanvoelen, kan je rankings stilletjes uithollen. Het korte antwoord: het framework rankt niet, de renderingstrategie wel. Zodra een zoekmachine of AI-crawler je pagina ophaalt en alleen een lege <div id="root"> ziet, mis je zichtbaarheid die je nooit meer terugverdient met linkbuilding of content. In dit artikel lees je waar de framework-specifieke valkuilen zitten en hoe je ze vermijdt.

Waarom JavaScript-frameworks een SEO-probleem zijn

Een klassieke server-gerenderde pagina stuurt kant-en-klare HTML terug: een bot fetcht de URL en leest meteen je titels, tekst en links. Een typische single-page app doet het omgekeerd. De server stuurt een vrijwel lege HTML-shell, en pas wanneer de browser de JavaScript-bundel downloadt en uitvoert, verschijnt de content.

Google kan JavaScript renderen, maar doet dat in een tweede ronde nadat de HTML al is opgehaald. Die renderronde kost tijd en rekenkracht, en wordt niet voor elke pagina gegarandeerd snel uitgevoerd. Andere crawlers, waaronder een deel van de bots achter AI-zoekmachines zoals ChatGPT en Perplexity, renderen JavaScript helemaal niet of veel beperkter. Voor een B2B-site die niet alleen wil ranken maar ook geciteerd wil worden, is dat een dubbel risico: wat niet in de eerste HTML staat, bestaat voor een groot deel van het zoeklandschap simpelweg niet.

Dit is geen abstract debat. Het raakt de kern van SEO: kan een bot je content lezen, begrijpen en linken naar je dienstpagina’s? Bij ons begint elke technische audit daar, omdat een framework-keuze die de eerste crawl saboteert elke andere inspanning verzwakt.

Hydration: de stille killer

Hydration is het proces waarbij je framework de statische HTML die de server stuurde “tot leven wekt” door er JavaScript-event-listeners aan te koppelen. Het probleem: een pagina kan er volledig geladen uitzien terwijl ze nog niet interactief is, omdat de hydration nog bezig is.

Voor gebruikers voelt dat als een pagina die kort bevriest. Voor je Core Web Vitals is het schadelijker. Zware hydration verschuift werk naar de main thread en duwt je Interaction to Next Paint en Largest Contentful Paint de verkeerde kant op. En precies die signalen wegen mee in hoe Google de gebruikerservaring van je pagina inschat.

Er speelt nog iets subtielers: hydration mismatches. Wanneer de HTML die de server rendert niet exact overeenkomt met wat de client verwacht, gooit het framework de servervariant weg en rendert opnieuw vanaf nul op de client. Het netto-effect is dat je het SEO-voordeel van server-rendering verliest precies op de pagina’s waar je het nodig hebt. Deze fouten zie je zelden in je eigen browser, omdat die alles netjes afwerkt. Een bot die de pagina maar één keer en sneller ophaalt, ziet vaak de half afgewerkte versie.

De praktische les: minder JavaScript naar de client sturen is bijna altijd beter voor SEO dan meer. Elk framework dat hieronder aan bod komt biedt manieren om dat te doen, maar je moet ze bewust kiezen.

Next.js: krachtig, maar configuratie beslist alles

Next.js wordt vaak aangeraden als “de SEO-vriendelijke React-keuze”, en terecht, op voorwaarde dat je de juiste renderingmodus per pagina kiest. Next.js geeft je per route de keuze tussen static generation, server-side rendering en client-side rendering, plus nieuwere server components die standaard op de server draaien en minder JavaScript naar de client sturen.

De valkuil is dat die flexibiliteit ook de manier is waarop het misgaat. Een veelgemaakte fout is content in een useEffect laden, waardoor die pas na de hydration verschijnt en dus buiten de eerste HTML valt. Een tweede is verkeerd omgaan met fouten tijdens server-rendering: een onafgevangen fout op de server laat Next.js terugvallen op client-rendering, en je server-gerenderde HTML verdwijnt geruisloos. Een derde is metadata die dynamisch op de client wordt gezet in plaats van server-side, waardoor je title- en meta-tags niet betrouwbaar door crawlers worden opgepikt.

Voor B2B raden we doorgaans static generation of server-rendering aan voor alles wat moet ranken: dienstpagina’s, kennisartikelen, casepagina’s. Bewaar pure client-side rendering voor wat echt achter een login of interactie zit. Zo houd je je commerciële pagina’s leesbaar bij de allereerste fetch.

React: standaard client-side, en dat is het risico

Een kale React-app (denk aan een Create React App-opzet of een client-only Vite-build) rendert standaard volledig in de browser. De server levert een lege shell, en zonder uitgevoerde JavaScript ziet een bot geen content. Voor een marketingsite is dat de slechtst denkbare uitgangspositie.

React lost dit niet zelf op; je hebt een framework of renderlaag eromheen nodig. In de praktijk betekent dat React inzetten via een meta-framework zoals Next.js of Remix, of server-side rendering toevoegen met renderToString en een eigen server. Wie React puur client-side houdt, kiest impliciet voor pre-rendering of dynamic rendering als pleister, en dat zijn extra bewegende delen die kunnen breken.

Het zwaarste signaal: als je belangrijkste content alleen verschijnt nadat een API-call vanuit de browser is teruggekomen, gok je erop dat elke crawler je JavaScript uitvoert én op je API wacht. Dat is een gok die je op je geldpagina’s niet wilt nemen. Wil je weten of je site dit probleem heeft, dan helpt het om te controleren of Google je pagina’s wel correct indexeert en hoe de gerenderde HTML eruitziet.

Vue: dezelfde scheidslijn, andere namen

Vue kent precies dezelfde tweedeling. Een standaard Vue-app rendert client-side, met dezelfde lege-shell-problemen als React. De oplossing heet hier Nuxt, het meta-framework dat server-rendering, static generation en hybride rendering naar Vue brengt, vergelijkbaar met wat Next.js voor React doet.

De valkuilen lopen parallel: client-only data fetching die content buiten de eerste HTML duwt, hydration mismatches wanneer server- en clientstatus uiteenlopen, en metadata die niet server-side wordt gezet. De namen verschillen, het denkraam niet. Kies je voor Vue, kies dan bewust voor Nuxt met server- of static rendering voor alles wat zichtbaarheid moet opleveren.

Hoe je een framework op pipeline beoordeelt

Een framework-keuze is geen smaakkwestie van het developmentteam alleen. De vraag die telt: kan een bot je commerciële pagina’s lezen bij de eerste fetch, zonder JavaScript uit te voeren? Een eenvoudige test is de broncode van een pagina ophalen zonder rendering (bijvoorbeeld via “view source” of een fetch zonder JavaScript) en kijken of je kerncontent, koppen en interne links erin staan.

Een paar vuistregels die we hanteren:

• Render alles wat moet ranken op de server of vooraf (SSR of SSG), niet in de browser.
• Houd metadata server-side, zodat title, meta description en canonical betrouwbaar worden gelezen.
• Beperk client-side JavaScript: minder hydration betekent betere Core Web Vitals en minder kans op mismatches.
• Test met de echte gerenderde HTML, niet met wat je eigen browser uiteindelijk afwerkt.
• Behandel je redesign of migratie als risicomoment, want een framework-switch is precies waar rankings sneuvelen na een website-redesign.

Het diepere punt: SEO is bij ons de acquisitielaag van één gestuurde groeimachine, niet een aparte technische checklist. Een framework dat mooie demo’s geeft maar je dienstpagina’s onleesbaar maakt voor crawlers, kost je pipeline, niet alleen posities in een rapport. Daarom betrekken we de technische renderingkeuze altijd bij de bredere strategie, samen met aanverwante beslissingen zoals je headless CMS-opzet. Werk je bovendien zonder vast bezoekadres en wil je toch lokaal gevonden worden, dan telt naast rendering ook je aanpak voor lokale SEO zonder fysiek adres.

Twijfel je of je Next.js-, React- of Vue-site bij de eerste crawl wel leesbaar is, en of je content ook door AI-zoekmachines wordt opgepikt? Onze seo specialist brengt je rendering, hydration en indexering in kaart en koppelt dat aan concrete groei. Neem contact op en we kijken samen waar je zichtbaarheid lekt.