AngeloooooandDraculabo
8ed4593f73
* Refactor Gemini model display: filter old versions, group low/high pro, and improve naming * Fix potential negative minutes and refine Gemini 3 Pro grouping logic based on PR feedback * The account change process has been sped up * Address PR review: enhance error message and parameterize polling interval in process handler * Address PR review: fix potential race condition in database backup logic * fix: prevent renderer white screen and harden sentry gating * feat: localize model labels * chore: enable hoisted node-linker * chore: ignore .agent/.claude/.codex in prettier --------- Co-authored-by: Draculabo <[email protected]>
27 lines
852 B
Markdown
27 lines
852 B
Markdown
---
|
||
title: Suppress Expected Hydration Mismatches
|
||
impact: LOW-MEDIUM
|
||
impactDescription: avoids noisy hydration warnings for known differences
|
||
tags: rendering, hydration, ssr, nextjs
|
||
---
|
||
|
||
## Suppress Expected Hydration Mismatches
|
||
|
||
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 `suppressHydrationWarning` to prevent noisy warnings. Do not use this to hide real bugs. Don’t overuse it.
|
||
|
||
**Incorrect (known mismatch warnings):**
|
||
|
||
```tsx
|
||
function Timestamp() {
|
||
return <span>{new Date().toLocaleString()}</span>;
|
||
}
|
||
```
|
||
|
||
**Correct (suppress expected mismatch only):**
|
||
|
||
```tsx
|
||
function Timestamp() {
|
||
return <span suppressHydrationWarning>{new Date().toLocaleString()}</span>;
|
||
}
|
||
```
|