Angular Universal SSR遇API重复调用及数据注入失败问题求助

问题分析 #

你遇到的两个问题本质上是同一类问题：服务器端数据预取和客户端状态同步未正确处理。API被调用两次是因为客户端hydration时重复发起了相同请求；数据无法注入组件则是因为服务器端获取的数据没有传递到客户端，或者组件未在正确时机获取数据。

解决方案步骤 #

1. 配置TransferState状态传递模块 #

TransferState用于在服务器端和客户端之间传递数据，避免重复API请求。

• 在app.module.ts中导入并添加BrowserTransferStateModule：

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule,
    HttpClientModule,
    // 其他业务模块
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

• 在app.server.module.ts中导入并添加ServerTransferStateModule：

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

2. 创建带缓存的API服务 #

创建一个数据服务，判断运行环境，服务器端请求API并缓存数据，客户端优先读取缓存：

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';
import { Observable, of, tap } from 'rxjs';

// 定义唯一的状态键，用于缓存数据
const API_DATA_KEY = makeStateKey('api-data');

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(
    private http: HttpClient,
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: object
  ) {}

  fetchApiData(): Observable<any> {
    // 客户端优先读取TransferState中的缓存数据
    if (this.transferState.hasKey(API_DATA_KEY)) {
      const cachedData = this.transferState.get(API_DATA_KEY, null);
      this.transferState.remove(API_DATA_KEY); // 移除缓存避免重复使用
      return of(cachedData);
    }

    // 服务器端或客户端无缓存时发起API请求
    const apiUrl = '/staging/api/your-target-endpoint'; // 根据实际API路径调整
    return this.http.get(apiUrl).pipe(
      tap(data => {
        // 服务器端将数据存入TransferState
        if (isPlatformServer(this.platformId)) {
          this.transferState.set(API_DATA_KEY, data);
        }
      })
    );
  }
}

3. 使用路由Resolver预取数据 #

通过路由Resolver在组件渲染前（服务器端和客户端路由激活前）获取数据，确保组件初始化时已有数据：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { DataService } from './data.service';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataResolver implements Resolve<any> {
  constructor(private dataService: DataService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return this.dataService.fetchApiData();
  }
}

在路由配置中添加Resolver：

import { Routes } from '@angular/router';
import { YourComponent } from './your-component/your-component.component';
import { DataResolver } from './data.resolver';

export const routes: Routes = [
  {
    path: '',
    component: YourComponent,
    resolve: { apiData: DataResolver } // 预取数据存入路由data中
  }
];

4. 组件中获取预取数据 #

在组件中直接从路由快照读取数据，完成数据绑定：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  apiData: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 从路由data中获取预取的数据
    this.apiData = this.route.snapshot.data['apiData'];
  }
}

5. 修正server.ts代理配置 #

检查server.ts中的代理规则，确保服务器端能正确转发API请求。当前配置中的pathRewrite规则可能有误，调整为：

server.use(
  '/staging/api', // 匹配前端发起的API请求路径
  createProxyMiddleware({
    target: 'http://localhost:3002',
    changeOrigin: true,
    pathRewrite: {
      '^/staging/api': '' // 将前缀替换为空，转发到目标服务器的根路径
    },
    logLevel: 'debug',
  })
);

验证效果 #

1. 运行npm run build:ssr构建SSR项目
2. 运行npm run serve:ssr启动服务器
3. 查看API服务器日志，确认仅收到一次请求
4. 查看页面源码，确认数据已渲染到HTML中，客户端hydration时不会重复请求API

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