Angular5 SSR模式下外部API数据服务无法正常工作问题求助

我之前在做Angular SSR项目时也遇到过完全一样的问题——服务端渲染时拿不到HTTP接口的数据，只能等客户端加载完才显示内容。结合你的Angular 5场景，给你几个实用的排查和解决方向：

Angular SSR分为服务端渲染阶段和客户端 hydration 阶段，服务端是在Node.js环境下执行代码的，和浏览器环境有几个关键差异：

• Node环境没有浏览器的同源策略限制，但也没有localStorage、sessionStorage这类浏览器API，如果你的请求依赖这些存储的认证信息，服务端自然拿不到数据。
• 服务端渲染时，Angular会快速生成HTML，但如果你的数据请求没有让服务端“等待”完成，它会直接渲染空数据的模板，等客户端接管后再重新请求数据。
• HttpClient在服务端和客户端的默认配置可能有差异，比如请求头、baseURL的设置。

1. 用TransferState实现服务端数据预取与传递 #

这是解决SSR数据渲染问题的核心方案，简单来说就是让服务端先请求数据，把数据存在TransferState里，客户端初始化时直接用这份数据，不用重复请求。

步骤： #

• 首先在app.module.ts中分别为浏览器和服务端模块引入对应的TransferState模块：

  // 浏览器模块（app.module.ts）
  import { BrowserTransferStateModule } from '@angular/platform-browser';
  @NgModule({
    imports: [
      // ...其他模块
      BrowserTransferStateModule
    ]
  })
  
  // 服务端模块（app.server.module.ts）
  import { ServerTransferStateModule } from '@angular/platform-server';
  @NgModule({
    imports: [
      // ...其他模块
      ServerTransferStateModule
    ]
  })
  

• 修改你的数据服务，注入TransferState和PLATFORM_ID来区分环境：

  import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { TransferState, makeStateKey } from '@angular/platform-browser';
  import { isPlatformServer } from '@angular/common';
  import { of } from 'rxjs';
  import { tap } from 'rxjs/operators';
  
  @Injectable()
  export class YourDataService {
    // 定义一个唯一的key来存储数据
    private readonly DATA_STATE_KEY = makeStateKey<any>('your-unique-data-key');
  
    constructor(
      private http: HttpClient,
      private transferState: TransferState,
      @Inject(PLATFORM_ID) private platformId: Object
    ) {}
  
    fetchData() {
      // 先检查TransferState里有没有已存储的数据
      const cachedData = this.transferState.get(this.DATA_STATE_KEY, null);
      if (cachedData) {
        // 客户端直接返回缓存数据，避免重复请求
        return of(cachedData);
      }
  
      // 服务端环境下发起请求，并把数据存入TransferState
      if (isPlatformServer(this.platformId)) {
        return this.http.get('你的API地址').pipe(
          tap(data => {
            this.transferState.set(this.DATA_STATE_KEY, data);
          })
        );
      } else {
        // 客户端环境正常发起请求
        return this.http.get('你的API地址');
      }
    }
  }
  

• 在组件中调用服务时，确保在ngOnInit中执行（服务端渲染时会执行这个生命周期钩子）：

  ngOnInit() {
    this.dataService.fetchData().subscribe(data => {
      this.yourData = data;
    });
  }
  

2. 适配服务端环境的HTTP请求配置 #

如果你的请求依赖认证信息（比如token），服务端没有浏览器的localStorage，需要手动传递token：

• 可以在服务端渲染时从请求头中获取token（比如Cookie），或者通过环境变量传递服务端可用的认证信息：

  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      // 服务端环境下手动设置token，比如从请求上下文获取
      'Authorization': 'Bearer ' + (this.serverAuthToken || '')
    })
  };
  

• 区分服务端和客户端的API地址：因为Node环境可以直接访问后端服务（不用跨域），可以用环境变量配置不同的baseURL：

  // environment.ts（客户端）
  export const environment = {
    apiBaseUrl: '/api'
  };
  
  // environment.server.ts（服务端）
  export const environment = {
    apiBaseUrl: 'http://localhost:3000/api' // 后端服务的直接地址
  };
  

3. 用路由Resolve守卫确保服务端等待数据加载 #

如果你的数据是路由级别的，可以用Resolve守卫让Angular在服务端渲染前完成数据请求：

• 创建Resolve守卫：

  import { Injectable } from '@angular/core';
  import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
  import { YourDataService } from './your-data.service';
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class DataResolver implements Resolve<any> {
    constructor(private dataService: YourDataService) {}
  
    resolve(route: ActivatedRouteSnapshot): Observable<any> {
      return this.dataService.fetchData();
    }
  }
  

• 在路由配置中添加Resolve：

  const routes: Routes = [
    {
      path: 'your-page',
      component: YourComponent,
      resolve: {
        pageData: DataResolver
      }
    }
  ];
  

• 在组件中通过ActivatedRoute获取预取的数据：

  ngOnInit() {
    this.route.data.subscribe(resolvedData => {
      this.yourData = resolvedData.pageData;
    });
  }
  

• 确保服务端的Node环境能正常访问你的API地址（可以在server.ts里直接用node-fetch测试一下）。
• 检查是否有其他异步操作（比如第三方脚本）影响了服务端渲染的数据流。

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