Hvad er Hydration mismatch?
Hydration mismatch opstår, når HTML-indholdet, der serveres fra serveren, ikke stemmer overens med det, der genereres af JavaScript på klienten under “hydrering” af en webapplikation. Dette sker ofte i frameworks, der bruger server-side rendering (SSR) sammen med client-side rendering. Hydration mismatch kan føre til uforudsigelig opførsel på websiden og påvirke både brugeroplevelse og SEO.
Hvornår bruges det?
Termen bruges især ved teknisk SEO, når man arbejder med JavaScript-baserede websteder, der implementerer SSR, f.eks. med Next.js eller Nuxt. Her er det vigtigt at sikre, at indholdet, søgemaskiner læser fra serveren, matcher det, brugeren ser efter JavaScript er kørt. En hydration mismatch kan gøre indeksering vanskeligere og skabe crawl-problemer, fordi Googlebot kan opleve forskelle mellem server-side og client-side versioner.
Eksempel: En webshop viser produktpriser via server-renderet HTML, men JavaScript loader en anden pris ved hydrering på klienten. Googlebot kan indekserer den ene pris, mens brugeren ser en anden, hvilket forvirrer både brugere og søgemaskiner.
Typiske fejl
- Inkonsistent data mellem server-side og client-side rendering.
- Brug af ikke-deterministisk indhold under server-side rendering.
- Manglende håndtering af asynkrone data før hydrering.
Relaterede begreber: Server-side rendering, client-side rendering, JavaScript SEO
