Hydration là gì? Lỗi hydration mismatch do đâu và tránh thế nào?

Hydration là bước biến HTML tĩnh do server render sẵn thành app tương tác: hydrateRoot(domNode, <App />) render component trên client, gắn kết quả vào HTML có sẵn thay vì dựng DOM mới, rồi attach event handler. Nhờ đó trang hiện nội dung ngay (HTML từ server) và trở nên tương tác sau khi JS tải xong.

Hydration mismatch xảy ra khi HTML server trả về khác với kết quả render đầu tiên trên client — React cảnh báo, và ở mức tệ nhất phải vứt HTML server để render lại từ đầu trên client (chậm, có thể nháy UI). Nguyên nhân phổ biến:

• Giá trị không ổn định giữa hai lần chạy: Date.now(), Math.random(), format ngày/số theo locale/timezone của máy.
• Rẽ nhánh theo dữ liệu chỉ có ở client: window, localStorage, kích thước màn hình.
• HTML lồng sai chuẩn (vd <p> trong <p>) — trình duyệt tự sửa DOM làm lệch với cây React.

Cách tránh: lần render đầu trên client phải giống hệt server — dồn phần phụ thuộc client vào useEffect (render placeholder trước, cập nhật sau khi mount); với giá trị chấp nhận lệch như timestamp, dùng suppressHydrationWarning.