Hydration és eltérések

Miért egyezik a szerver HTML-je a kliens első renderjével, és mitől tör el.

19. Hydration és eltérések

A hydration az a lépés, amikor a React a böngészőben „életre kelti” a szerveren legenerált HTML-t. Ha a kliens első renderje nem egyezik a DOM-mal, hydration hiba jön – fejlesztői módban figyelmeztetés, productionben rejtett inkonzisztencia.

Gyakori okok

Időfüggő érték a komponens első renderjén: Date.now(), new Date().toLocaleString(), véletlen szám – szerveren más, kliensen más.
Böngésző-only API guard nélkül: window, localStorage, matchMedia közvetlenül a renderben.
Rossz HTML szerkezet: pl. <p> belsejében <div> – a böngésző kijavítja a DOM-ot, a React fa eltér.
Böngésző bővítmények módosítják a DOM-ot (ritkább, de előfordul).
Külső embed scriptje a React fa alatt máshogy fut.

Mit csinálj helyette?

Időt propsból vagy kliens-only komponensből add meg, useEffect után állítsd be a dinamikus szöveget, vagy használj szerver oldali formázást egyező időzónával.
Böngésző API-hoz: 'use client' + useEffect, vagy dinamikus import ssr: false-szal, ha tényleg csak kliensen kell.
Érvényes HTML – a DevTools Elements panel segít ellenőrizni a beágyazást.

suppressHydrationWarning

Egyes szándékos eltérésekhez (pl. idő megjelenítése, ahol elfogadod az első eltérést) a React ad suppressHydrationWarning attribútumot csomópont szinten. Ne használd takarítás nélkül – csak ha tudod, miért biztonságos.

Debug

A Next fejlesztői overlay megmutatja a hydration hibát. A Chrome DevTools Components / Profiler és a konzol üzenetek gyakran rámutatnak a problémás komponensre.

📝 Összefoglaló – 19. fejezet

Hydration = szerver HTML + kliens első render egyezése
Kerüld a nem determinisztikus első rendert és a hibás beágyazást
suppressHydrationWarning csak tudatos, szűk esetekben