SSR, CSR, SSG, ISR khác nhau thế nào? Hydration mismatch là gì?

Mismatch nguy hiểm không phải vì cảnh báo trong console mà vì hậu quả hiệu năng: React 18 xử lý bằng cách bỏ toàn bộ HTML đã nhận và render lại phía client, nên bạn mất sạch lợi ích của SSR trên đúng trang đó — LCP tệ đi rõ rệt, và người dùng thấy nội dung nhấp nháy. Nghĩa là một dòng code vô hại có thể xoá bỏ toàn bộ chiến lược render của trang.

Nguyên nhân gần như luôn là một trong bốn: dùng Date.now() hoặc new Date() trong render, dùng Math.random(), đọc window/localStorage trong lần render đầu, hoặc HTML không hợp lệ khiến trình duyệt tự sửa cấu trúc (<div> bên trong <p> là ví dụ kinh điển — trình duyệt tự đóng thẻ <p> và cây DOM khác hẳn cây React mong đợi).

Cách xử lý đúng cho dữ liệu chỉ có ở client là render nó ở lần render THỨ HAI: giữ một state mounted bật lên trong effect, hoặc dùng useSyncExternalStore với server snapshot là giá trị mặc định. Cách sau tốt hơn vì nó diễn đạt đúng ý định — “giá trị này khác nhau giữa server và client, và đây là giá trị server” — thay vì lách bằng một cờ.