HouYunFei
fb79a15508
- 添加 sections 定义文件，包含性能优化各领域分类 - 添加规则模板文件，规范文档结构和标签定义 - 添加异步操作优化规则，包括防止瀑布流、并行化、延迟等待等 - 添加包大小优化规则，包括避免桶式导入、动态导入、预加载等 - 添加服务端性能优化规则，包括 API 路
31 lines
872 B
Markdown
31 lines
872 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>
|
||
)
|
||
}
|
||
```
|