Angular 17 SSR启用Hydration时AWS URL前缀重复添加问题求助

问题现象 #

为API返回的banner URL添加AWS S3存储桶URL前缀时，未启用SSR功能正常，但启用SSR后前缀被重复添加：

• 未启用SSR的结果：

  https://shm-stg.s3.ap-south-1.amazonaws.com/dshm-dev/65708131bbcf697cb1c3ac9b/hd/image/thumbnail_watermark/1.jpeg

• 启用SSR的结果：

  https://shm-stg.s3.ap-south-1.amazonaws.com/dshm-dev/https://shm-stg.s3.ap-south-1.amazonaws.com/dshm-dev/65708131bbcf697cb1c3ac9b/hd/image/thumbnail_watermark/1.jpeg

问题原因 #

启用provideClientHydration()后，服务端渲染阶段会执行一次tap中的URL拼接逻辑；客户端在hydration（水合）过程中，会再次执行该逻辑，导致前缀被重复添加。

解决方案 #

方案1：检查URL前缀，避免重复拼接（推荐） #

修改tap中的处理逻辑，先判断banner URL是否已包含目标前缀，仅当不包含时才添加：

override get(params: Partial<EntityParams>): Observable<APIResponse<CollectionHeadingListModel[]>> {
  const httpParams = this.createHttpParamsFromPartial(params);
  return this.http.get<APIResponse<CollectionHeadingListModel[]>>(this.getEndpoint(), { params: httpParams }).pipe(
    tap(res => {
      res.data.forEach((heading) => {
        // 检查banner是否存在且未包含前缀时，再执行拼接
        if (heading.banner && !heading.banner.startsWith(this.awsUrl)) {
          heading.banner = `${this.awsUrl}${heading.banner}`;
        }
      });
    })
  );
}

这个方法最稳健，无论代码执行多少次，都不会出现重复前缀的问题。

方案2：使用TransferState传递服务端处理结果 #

利用Angular的TransferState将服务端处理好的数据传递到客户端，避免客户端再次请求和处理：

1. 导入依赖：

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

2. 在服务中注入TransferState：

constructor(
  private http: HttpClient,
  private transferState: TransferState
) {}

3. 修改get方法：

// 定义唯一的状态键
private readonly COLLECTION_HEADING_KEY = makeStateKey<APIResponse<CollectionHeadingListModel[]>>('collection-heading');

override get(params: Partial<EntityParams>): Observable<APIResponse<CollectionHeadingListModel[]>> {
  // 优先读取TransferState中存储的数据
  const storedData = this.transferState.get(this.COLLECTION_HEADING_KEY, null);
  if (storedData) {
    return of(storedData);
  }

  const httpParams = this.createHttpParamsFromPartial(params);
  return this.http.get<APIResponse<CollectionHeadingListModel[]>>(this.getEndpoint(), { params: httpParams }).pipe(
    tap(res => {
      res.data.forEach((heading) => heading.banner = `${this.awsUrl}${heading.banner}`);
      // 将处理好的数据存入TransferState，供客户端使用
      this.transferState.set(this.COLLECTION_HEADING_KEY, res);
    })
  );
}

方案3：区分服务端/客户端环境，仅执行一次拼接 #

通过平台判断工具，让拼接逻辑只在服务端或客户端执行一次：

1. 导入依赖：

import { isPlatformServer, isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

2. 注入PLATFORM_ID：

constructor(
  private http: HttpClient,
  @Inject(PLATFORM_ID) private platformId: object
) {}

3. 修改tap逻辑：

override get(params: Partial<EntityParams>): Observable<APIResponse<CollectionHeadingListModel[]>> {
  const httpParams = this.createHttpParamsFromPartial(params);
  return this.http.get<APIResponse<CollectionHeadingListModel[]>>(this.getEndpoint(), { params: httpParams }).pipe(
    tap(res => {
      // 仅在服务端执行拼接（或根据需求改为客户端）
      if (isPlatformServer(this.platformId)) {
        res.data.forEach((heading) => heading.banner = `${this.awsUrl}${heading.banner}`);
      }
    })
  );
}

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