Angular SSR移除自动生成的{{project-name}}-state脚本标签方法咨询

为什么不能直接移除{{project-name}}-state脚本标签 #

这个脚本标签是Angular Universal TransferState机制的核心部分，它负责将服务器端渲染时预获取的数据状态传递给客户端。客户端初始化时会读取该脚本中的状态，避免重复请求数据，同时保证SSR生成的内容与客户端 hydrated（水合）后的内容完全一致。如果直接移除，客户端无法获取预渲染的状态，会重新发起数据请求，导致SSR渲染的动态内容被客户端新渲染的内容覆盖，最终在源代码中丢失。

正确的优化方案（而非移除） #

如果觉得该脚本体积过大或需要调整位置，可以通过以下方式优化：

1. 压缩状态内容 #

使用压缩库（如lz-string）压缩TransferState的数据，减少脚本体积：

• 安装依赖：

npm install lz-string

• 修改server.ts中的状态序列化逻辑：

import { compress } from 'lz-string';
import { TRANSFER_STATE_KEY } from './src/app/shared/transfer-state-key'; // 自定义状态键

// 渲染HTML时生成压缩后的状态脚本
const state = transferState.toJson();
const compressedState = compress(state);
const stateScript = `<script id="${APP_NAME}-state">window['${TRANSFER_STATE_KEY}'] = '${compressedState}';</script>`;

// 将stateScript插入到HTML的合适位置（如head或body末尾，不要删除）
const html = this.renderer.renderToString(app);
return html.replace('</body>', `${stateScript}</body>`);

• 在客户端app.module.ts中解压状态：

import { TransferState, makeStateKey } from '@angular/platform-browser';
import { decompress } from 'lz-string';
import { TRANSFER_STATE_KEY } from './shared/transfer-state-key';

export function initTransferState(transferState: TransferState) {
  return () => {
    const storedState = window[TRANSFER_STATE_KEY];
    if (storedState) {
      const decompressedState = decompress(storedState);
      const state = JSON.parse(decompressedState);
      Object.keys(state).forEach(key => {
        transferState.set(makeStateKey(key), state[key]);
      });
    }
  };
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initTransferState,
      deps: [TransferState],
      multi: true
    }
  ]
})
export class AppBrowserModule {}

2. 过滤不必要的状态 #

检查TransferState中存储的数据，只保留客户端必需的关键数据（如页面渲染依赖的接口数据），移除冗余状态，减少脚本体积。

3. 调整脚本插入位置 #

如果不想将脚本放在body末尾，可以修改server.ts中的插入逻辑，将其移到head标签内，但绝对不能删除。

关键提醒 #

保留该状态脚本是保证SSR内容与客户端水合一致性的核心，直接移除会破坏SEO效果——搜索引擎抓取的可能是客户端重新渲染后的空内容或不一致内容，完全失去SSR的意义。

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