| 1 | --- |
| 2 | title: Suppress Expected Hydration Mismatches |
| 3 | impact: LOW-MEDIUM |
| 4 | impactDescription: avoids noisy hydration warnings for known differences |
| 5 | tags: rendering, hydration, ssr, nextjs |
| 6 | --- |
| 7 | |
| 8 | ## Suppress Expected Hydration Mismatches |
| 9 | |
| 10 | In 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 |
| 11 | |
| 12 | **Incorrect (known mismatch warnings):** |
| 13 | |
| 14 | ```tsx |
| 15 | function Timestamp() { |
| 16 | return <span>{ |
| 17 | } |
| 18 | ``` |
| 19 | |
| 20 | **Correct (suppress expected mismatch only):** |
| 21 | |
| 22 | ```tsx |
| 23 | function Timestamp() { |
| 24 | return <span suppressHydrationWarning |
| 25 | } |
| 26 | ``` |