Angular 17 SSR如何仅在服务端运行代码并避免hydration清除数据？

一、仅在服务器端运行代码的方法 #

• 组件内平台标识过滤：在组件构造函数或初始化钩子中，用isPlatformServer(platformId)判断运行环境，仅在服务器端执行目标逻辑。
• server.ts全局逻辑：直接在服务器入口文件server.ts中添加专属代码，这些逻辑只会在SSR渲染阶段运行，适合全局初始化、前置数据处理场景。
• APP_INITIALIZER结合平台判断：通过APP_INITIALIZER注册初始化函数，在函数内判断平台后仅执行服务器端初始化操作，适合全局数据预加载。

二、阻止Hydration清除服务器端数据的解决方案 #

核心是利用Angular官方的TransferState服务，将服务器端获取的数据传递到客户端，避免客户端hydration时覆盖原有数据。

具体实现步骤 #

1. 导入依赖：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { TransferState, makeStateKey } from '@angular/platform-browser';

2. 组件内实现数据传递：

// 定义唯一状态键，用于标记要传递的数据
const SERVER_DATA_KEY = makeStateKey<any>('server-fetched-data');

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html'
})
export class TargetComponent {
  serverData: any;

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private transferState: TransferState
  ) {
    if (isPlatformServer(this.platformId)) {
      // 服务器端：获取数据并存入TransferState
      this.serverData = this.fetchServerData();
      this.transferState.set(SERVER_DATA_KEY, this.serverData);
    } else {
      // 客户端：从TransferState读取数据，避免重新请求或清空
      this.serverData = this.transferState.get(SERVER_DATA_KEY, null);
      // 可选：读取后移除状态，释放内存
      this.transferState.remove(SERVER_DATA_KEY);
    }
  }

  private fetchServerData() {
    // 替换为你的服务器端数据获取逻辑（如API调用、数据库查询）
    return { content: '服务器端预加载的数据内容' };
  }
}

3. 额外注意事项

• 客户端初始化钩子（如ngOnInit）中不要随意覆盖serverData，除非已确认TransferState无数据需要兜底处理。
• 服务器端获取的数据不要包含客户端专属对象（如window相关引用），否则会导致hydration匹配失败。

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