如何在Ionic服务端渲染（SSR）中处理document与localStorage错误？

1. 处理document的替代方案 #

• 用Angular官方Renderer2操作DOM：这是Angular推荐的跨环境DOM操作方式，会自动适配SSR场景，避免直接调用document。
  示例代码：

  import { Renderer2, Inject } from '@angular/core';
  import { DOCUMENT } from '@angular/common';
  
  constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {}
  
  updateElement() {
    const targetEl = this.document.getElementById('target-element');
    this.renderer.addClass(targetEl, 'highlight');
  }
  

• 环境判断后再调用document：如果必须直接使用document，先通过平台标识判断当前是否在浏览器环境：

  import { isPlatformBrowser } from '@angular/common';
  import { Inject, PLATFORM_ID } from '@angular/core';
  
  constructor(@Inject(PLATFORM_ID) private platformId: object) {}
  
  safeDomOperation() {
    if (isPlatformBrowser(this.platformId)) {
      document.getElementById('target-element')?.style.display = 'block';
    }
  }
  

2. 处理localStorage的替代方案 #

• 用AngularTransferState传递跨环境数据：SSR时服务端无法访问localStorage，TransferState可以在服务端和浏览器间同步数据，同时在浏览器端兼容localStorage。
  示例代码：

  import { TransferState, makeStateKey } from '@angular/platform-browser';
  import { isPlatformBrowser } from '@angular/common';
  import { Inject, PLATFORM_ID } from '@angular/core';
  
  // 创建唯一状态键
  const USER_DATA_KEY = makeStateKey<string>('user-data');
  
  constructor(
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: object
  ) {}
  
  saveUserData(data: string) {
    if (isPlatformBrowser(this.platformId)) {
      localStorage.setItem('user', data);
    } else {
      // 服务端暂存数据，传递到浏览器
      this.transferState.set(USER_DATA_KEY, data);
    }
  }
  
  getUserData(): string | null {
    if (isPlatformBrowser(this.platformId)) {
      // 优先读取服务端传递的数据，再回退到localStorage
      const transferredData = this.transferState.get(USER_DATA_KEY, null);
      if (transferredData) {
        this.transferState.remove(USER_DATA_KEY);
        localStorage.setItem('user', transferredData);
        return transferredData;
      }
      return localStorage.getItem('user');
    } else {
      return this.transferState.get(USER_DATA_KEY, null);
    }
  }
  

• 直接规避服务端调用：如果不需要服务端处理存储数据，仅在浏览器环境下使用localStorage：

  if (isPlatformBrowser(this.platformId)) {
    localStorage.setItem('theme', 'dark');
  }
  

3. 额外注意事项 #

• 若第三方库内置了document或localStorage调用，优先选择该库的SSR兼容版本；无兼容版本时，可通过环境判断包裹库的初始化逻辑。
• Ionic官方组件大多已适配SSR，但自定义组件中涉及浏览器API的部分，需按上述方法处理。

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