Hydration

technical-seo

Hydration is het proces waarbij de browser een server-gerenderde HTML-pagina "activeert" door JavaScript event handlers aan de DOM-elementen te koppelen. De pagina is al zichtbaar (vanuit SSR), maar pas na hydration interactief — knoppen werken, formulieren reageren, navigatie functioneert.

Wat is hydration?

Bij SSR stuurt de server complete HTML. De browser toont dit direct (snel FCP). Maar de HTML is "dood" — zonder JavaScript-event handlers. Hydration is het proces dat React, Vue of Angular's virtual DOM synchroniseert met de bestaande HTML en event listeners toevoegt.

Moderne varianten:

  • Full hydration — het hele framework wordt geladen en alle componenten worden gehydrateerd
  • Partial hydration (Astro Islands) — alleen interactieve componenten worden gehydrateerd
  • Progressive hydration — componenten worden gehydrateerd wanneer ze in de viewport komen
  • Resumability (Qwik) — geen hydration nodig, event handlers worden lazy geladen

Waarom belangrijk

Hydration heeft drie SEO-risico's:

  1. Content mismatch — als client-side hydration andere content produceert dan de server-render (bijv. via useEffect), ziet Google een discrepantie
  2. CLS — hydration kan layout shifts veroorzaken als de client-side render afwijkt van de server-render
  3. INP — volledige hydration blokkeert de main thread, waardoor de pagina niet reageert op interacties

Partial hydration (Astro) en resumability (Qwik) minimaliseren deze problemen door alleen het strikt noodzakelijke JavaScript te laden.

Voorbeeld

In React kan useEffect SEO-problemen veroorzaken:

// Fout: content alleen zichtbaar na hydration function Price() { const [price, setPrice] = useState(null) useEffect(() => { fetchPrice().then(setPrice) }, []) return <span>{price || 'Laden...'}</span> } // Goed: content via server-side props function Price({ price }) { return <span>{price}</span> }

Gerelateerd