SSR/SSG content khác client-side, hydration mismatch?

Hydration mismatch xảy ra khi HTML render từ server khác với kết quả render lần đầu trên client, khiến React báo warning và có thể gây lỗi UI. Nguyên nhân phổ biến nhất là dùng browser-only APIs như window hay localStorage trong quá trình server render (server không có window), hoặc dùng Date/time mà timezone server khác client, hay random values cho mỗi lần render ra kết quả khác nhau.

Cách fix: đặt code phụ thuộc browser vào useEffect vì nó chỉ chạy trên client, dùng dynamic import với option ssr: false cho component cần browser APIs, hoặc thêm suppressHydrationWarning cho trường hợp biết trước sẽ khác nhau như timestamp.

Nguyên tắc quan trọng là HTML server trả về phải khớp chính xác với kết quả initial render trên client.