如何检测Angular Universal预渲染？解决背景图闪烁问题

问题场景 #

我有一个Angular 16应用，原本通过以下代码在启动时随机设置背景图：

export class AppComponent implements OnInit {
  private readonly backgroundImagesCount = 8;

  constructor(@Inject(DOCUMENT) private readonly document: Document) {}

  ngOnInit(): void {
    const randomNum = Math.floor(Math.random() * this.backgroundImagesCount + 1);
    this.document.body.style.backgroundImage = `url('/assets/bg${randomNum}.jpg')`;
  }
}

添加Angular Universal实现路由预渲染后，预渲染阶段会把随机选中的背景图硬编码到HTML里。应用启动时会先显示这张预渲染的背景图，等到Angular客户端引导完成后，才会加载新的随机背景图，导致出现闪屏问题。

我需要检测应用是否处于预渲染状态，跳过预渲染时的背景图设置逻辑，只在客户端引导完成后执行，理想逻辑如下：

if(!isPrerendering){
  const randomNum = Math.floor(Math.random() * this.backgroundImagesCount + 1);
  this.document.body.style.backgroundImage = `url('/assets/bg${randomNum}.jpg')`;
}

解决方案 #

Angular Universal提供了平台环境判断工具，我们可以通过PLATFORM_ID和isPlatformBrowser来区分客户端与服务端（含预渲染）环境：

1. 导入所需依赖：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { DOCUMENT } from '@angular/common';

2. 修改组件代码，注入PLATFORM_ID并判断环境：

export class AppComponent implements OnInit {
  private readonly backgroundImagesCount = 8;

  constructor(
    @Inject(DOCUMENT) private readonly document: Document,
    @Inject(PLATFORM_ID) private readonly platformId: Object
  ) {}

  ngOnInit(): void {
    // 仅在浏览器客户端环境执行（跳过预渲染/服务端渲染阶段）
    if (isPlatformBrowser(this.platformId)) {
      const randomNum = Math.floor(Math.random() * this.backgroundImagesCount + 1);
      this.document.body.style.backgroundImage = `url('/assets/bg${randomNum}.jpg')`;
    }
  }
}

原理说明 #

• isPlatformBrowser会在当前环境为浏览器客户端时返回true，在预渲染/服务端渲染阶段返回false，确保背景图设置逻辑只在客户端执行。
• 预渲染生成的HTML中不会包含背景图样式，避免了启动时的闪屏问题，客户端引导完成后会直接加载随机背景图。

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