Angular构建时预渲染页面后，如何阻止浏览器重复渲染

要阻止Angular在浏览器中重写服务端预渲染的内容并避免重复请求数据库，核心是启用**水合作用（Hydration）**并复用预渲染阶段的数据，具体步骤如下：

1. 启用客户端水合 #

Angular的水合机制会复用服务端生成的DOM节点，而非销毁后重新渲染。

• 在项目启动配置中添加provideClientHydration()：

  // main.ts
  import { bootstrapApplication } from '@angular/platform-browser';
  import { AppComponent } from './app/app.component';
  import { provideClientHydration } from '@angular/platform-browser';
  
  bootstrapApplication(AppComponent, {
    providers: [provideClientHydration()]
  });
  

• 注意事项：

  • 禁止在组件构造函数或ngOnInit中依赖window、document等浏览器专属API，服务端预渲染时这些API不可用，会导致水合失败。
  • 如需操作DOM，移至ngAfterViewInit钩子（水合完成后触发），避免初始化阶段修改DOM结构。

2. 复用预渲染数据（避免重复请求数据库） #

使用Angular的TransferState服务，将预渲染阶段从数据库获取的数据传递到浏览器端：

预渲染阶段：存储数据 #

在预渲染流程中获取数据并存入TransferState：

// 组件或服务代码
import { TransferState, makeStateKey } from '@angular/platform-browser';

const PAGE_DATA_KEY = makeStateKey<any>('page-specific-data');

constructor(private transferState: TransferState, private dbService: DbService) {}

async ngOnInit() {
  // 预渲染时从数据库拉取数据
  const pageData = await this.dbService.getPageData();
  // 将数据存入TransferState
  this.transferState.set(PAGE_DATA_KEY, pageData);
  this.renderContent(pageData);
}

浏览器端：读取复用数据 #

浏览器加载时优先读取TransferState中的缓存数据，无需再次请求：

// 同上述组件或服务代码
async ngOnInit() {
  const cachedData = this.transferState.get(PAGE_DATA_KEY, null as any);
  if (cachedData) {
    // 直接使用预渲染的缓存数据
    this.renderContent(cachedData);
  } else {
    // 兜底逻辑：仅在非预渲染场景下请求数据
    const pageData = await this.dbService.getPageData();
    this.renderContent(pageData);
  }
}

TransferState会自动将数据序列化为页面内的<script>标签，浏览器加载时直接读取，无需手动处理全局变量。

3. 组件兼容性优化 #

• 确认第三方组件支持服务端渲染（SSR）和水合，部分组件可能在水合阶段破坏DOM结构，需替换或添加兼容处理。
• 避免使用Renderer2在初始化阶段修改DOM，水合时Angular会保留服务端生成的DOM，手动修改易引发冲突。

内容的提问来源于stack exchange，提问作者Tomasz