Next.js Preventing Flash Before Hydration

Expert guidance on preventing visible flash when hydrating — inline scripts for dates, themes, persisted state, and suppressHydrationWarning.

@doc-version: 16.2.6

Core Concepts

Server ไม่มี access ถึง user preferences (locale, timezone, theme, localStorage) — render ด้วย default แล้ว client ต้อง correct ก่อน user เห็น

ปัญหา:

• Client Component re-render → hydration error
• useEffect → flash (user เห็น server value ก่อน)
• Server-only → ไม่ได้ client-specific formatting

Solution: Inline <script> ที่รัน synchronously ระหว่าง HTML parsing — ก่อน first paint

Guidelines