Angular 16+ 升级后，启用服务端渲染（SSR）与水合（Hydration）时，[innerHTML] 可能导致内容被重复插入两次；根本原因是水合过程与直接 DOM 操作（如 innerHTML）存在冲突，需通过禁用特定组件的水合或改用安全策略来解决。

angular 16+ 升级后，启用服务端渲染（ssr）与水合（hydration）时，`[innerhtml]` 可能导致内容被重复插入两次；根本原因是水合过程与直接 dom 操作（如 `innerhtml`）存在冲突，需通过禁用特定组件的水合或改用安全策略来解决。

在 Angular 16 及更高版本中，水合（Hydration）成为 SSR 的默认行为，其目标是复用服务端生成的 DOM 节点，提升首屏性能。但当模板中使用 [innerHTML]（尤其是配合自定义 SafeHtmlPipe）时，Angular 会在服务端渲染一次内容，客户端水合阶段又尝试“同步”该绑定——而 bypassSecurityTrustHtml 返回的是 SafeHtml 类型对象，不具可序列化语义，导致 Angular 无法准确比对 DOM 状态，最终触发重复插入：一个来自服务端 HTML，另一个由客户端动态写入。

典型表现：

• 浏览器开发者工具中可见两个 <p class="description"> 元素嵌套或并列；
• 服务端日志或 SSR 输出中仅存在一份原始 HTML，但客户端渲染后 DOM 节点翻倍；
• 仅在启用 provideClientHydration()（默认启用）时复现，禁用水合则恢复正常。

✅ 推荐解决方案：为使用 [innerHTML] 的组件禁用水合

在组件装饰器中添加 hybrid: false（Angular 17+）或使用 @defer + when 配合 hydration: false（兼容 16+），但最直接、稳定的方式是通过 ngSkipHydration 属性显式跳过该元素的水合：

立即学习“前端免费学习笔记（深入）”；

<!-- 在使用 innerHTML 的宿主元素上添加 ngSkipHydration -->
<p class="description" 
   [innerHTML]="standardData.details.description | safeHtml"
   ngSkipHydration>
</p>

⚠️ 注意：ngSkipHydration 是 Angular 16.2+ 引入的内置属性（无需导入），作用于单个元素及其子树，不会影响父组件或其他区域的水合行为。

? 补充建议与最佳实践：

• 避免在 SSR 组件中依赖 innerHTML 渲染关键结构：优先使用 Angular 模板语法（如 *ngIf, *ngFor, {{ }}）保证水合兼容性；
• 确保 SafeHtmlPipe 正确注入 DomSanitizer：你的 Pipe 实现无误，但需确认未在服务端环境（如 ServerModule）中意外调用 bypassSecurityTrustHtml（该方法仅应在浏览器端执行）；
• 验证水合状态：可通过 isPlatformBrowser 守卫延迟执行高风险操作：

  import { isPlatformBrowser } from '@angular/common';
  // 在 pipe transform 中（谨慎使用）：
  if (isPlatformBrowser(this.platformId)) {
    return this.sanitized.bypassSecurityTrustHtml(value) ?? '';
  }
  return value; // SSR 阶段返回原始字符串，由服务端直出

? 总结：[innerHTML] 重复渲染并非 Bug，而是水合机制与不可序列化 DOM 操作之间的设计约束。ngSkipHydration 是官方推荐的轻量级解法，兼顾安全性、可维护性与性能。升级至 Angular 17 后，亦可结合 @defer (on interaction) 延迟富文本内容加载，进一步优化水合体验。