Các lỗi hydration mismatch phổ biến trong Angular là gì?

Các lỗi phổ biến: render dựa vào Date.now()/random, đọc window hoặc localStorage khi server render, format ngày theo timezone khác nhau, mutate DOM bằng library ngoài Angular trước hydration, hoặc API trả data khác giữa server và client.

Guard browser-only code:

const platformId = inject(PLATFORM_ID)
if (isPlatformBrowser(platformId)) {
  localStorage.setItem("seen", "true")
}

Cách fix là làm render deterministic, dùng transfer cache/data, platform checks và defer DOM-dependent widgets.

Common issues include rendering from Date.now()/random values, reading window or localStorage during server rendering, formatting dates in different time zones, mutating DOM with non-Angular libraries before hydration, or getting different API data on server and client.

Guard browser-only code:

const platformId = inject(PLATFORM_ID)
if (isPlatformBrowser(platformId)) {
  localStorage.setItem("seen", "true")
}

Fix by making rendering deterministic, using transfer cache/data, platform checks and deferring DOM-dependent widgets.