如何判断Angular应用是否处于SSR运行状态？

你的现有代码本身是正确的——isPlatformServer(platformId)在服务器端渲染阶段返回true（对应VS Code控制台的输出），isPlatformBrowser(platformId)在客户端运行阶段返回true（对应浏览器控制台的输出）。这是Angular SSR的正常行为：SSR会先在服务器端执行一次组件逻辑生成HTML，再将HTML发送到客户端，客户端完成hydration后再次执行组件逻辑。

如果需要更精准的判断，可根据你的需求选择以下方案：

1. 判断当前代码是否正运行在服务器端SSR渲染阶段 #

你的现有代码已经满足这个需求，只需注意代码的执行时机：

• 服务器端渲染时，代码会在Node.js环境（VS Code控制台）执行，此时isPlatformServer为true
• 客户端hydration及后续运行时，代码会在浏览器环境执行，此时isPlatformBrowser为true

如果想避免客户端重复执行服务器端逻辑，可结合TransferState将服务器端的计算结果传递到客户端，避免重复运算。

2. 判断应用是否通过SSR模式部署（页面是否由服务器渲染生成） #

如果需要确认当前页面是否是经过SSR渲染后发送到客户端的，可通过两种方式：

方式一：检查页面的SSR标记 #

Angular SSR会自动在页面的<html>标签上添加ng-server-context属性，可在客户端通过DOM查询判断：

const isSSRDeployed = !!document.querySelector('html[ng-server-context]');
console.log('应用是否为SSR部署:', isSSRDeployed);

方式二：使用TransferState传递服务器端状态 #

在服务器端设置一个SSR标记，通过TransferState传递到客户端：

1. 服务器端代码：

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

const IS_SSR_KEY = makeStateKey<boolean>('isSSR');

// 在组件或服务中
const platformId = inject(PLATFORM_ID);
const transferState = inject(TransferState);

if (isPlatformServer(platformId)) {
  transferState.set(IS_SSR_KEY, true);
}

2. 客户端代码：

import { inject } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';

const IS_SSR_KEY = makeStateKey<boolean>('isSSR');

const transferState = inject(TransferState);
const isSSRDeployed = transferState.get(IS_SSR_KEY, false);
console.log('应用是否经过SSR渲染:', isSSRDeployed);

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