1---
2title: Suppress Expected Hydration Mismatches
3impact: LOW-MEDIUM
4impactDescription: avoids noisy hydration warnings for known differences
5tags: rendering, hydration, ssr, nextjs
6---
7 
8## Suppress Expected Hydration Mismatches
9 
10In SSR frameworks (e.g., Next.js), some values are intentionally different on server vs client (random IDs, dates, locale/timezone formatting). For these *expected* mismatches, wrap the dynamic text in an element with `suppressHydrationWarning` to prevent noisy warnings. Do not use this to hide real bugs. Don’t overuse it.
11 
12**Incorrect (known mismatch warnings):**
13 
14```tsx
15function Timestamp() {
16  return <span>{new Date().toLocaleString()}</span>
17}
18```
19 
20**Correct (suppress expected mismatch only):**
21 
22```tsx
23function Timestamp() {
24  return (
25    <span suppressHydrationWarning>
26      {new Date().toLocaleString()}
27    </span>
28  )
29}
30```
31