Angular 18 SSR结合Apollo GraphQL渲染超时错误求助

问题描述 #

在Angular 18 SSR环境下调用GraphQL接口，服务端30秒后返回错误，但组件未按预期显示加载状态或错误提示，最终触发Page / did not render in 30 seconds超时错误。

核心原因 #

Angular SSR渲染机制会等待所有可追踪的异步操作完成后才生成HTML返回客户端。当前代码直接用subscribe订阅Observable，SSR无法识别该异步任务的状态，导致服务器一直等待直到超时；同时Apollo的watchQuery在SSR环境下未适配渲染上下文，无法同步请求完成/错误状态。

解决方案 #

1. 用async管道替代手动订阅，让SSR追踪异步流 #

组件中不再手动订阅Observable，而是将Observable暴露给模板通过async管道处理，Angular SSR会自动等待Observable发出值或完成，避免超时。

修改组件代码：

@Component({
  selector: 'app-shop',
  standalone: true,
  imports: [SidebarMenuComponent, ProductCardComponent, ProductCardSkeletonComponent, AsyncPipe],
  templateUrl: './shop.component.html',
  styleUrl: './shop.component.css'
})
export default class ShopComponent implements OnInit{
  // 用Observable替代signal管理异步状态，供async管道使用
  public productsPaginated$!: Observable<ProductPaginatedResponse>;
  private defaultItemsShow = 10; // 假设你有这个常量
  private isNavigating = false;

  constructor(private route: ActivatedRoute, private productsService: ProductsService) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      if (!this.isNavigating) {
        const after = params['after'] ? atob(params['after']) : null;
        const before = params['before'] ? atob(params['before']) : null;
        this.updateProductsPaginated(after, before, false);
      } else {
        this.isNavigating = false;
      }
    });
    // 初始化默认请求
    this.updateProductsPaginated();
  }

  updateProductsPaginated(after: string | null = null, before: string | null = null, updateUrl: boolean = true) {
    let observable$: Observable<ProductPaginatedResponse>;

    if (after) {
      observable$ = this.productsService.getProductsPaginatedAfter(this.defaultItemsShow, after);
    } else if (before) {
      observable$ = this.productsService.getProductsPaginatedBefore(this.defaultItemsShow, before);
    } else {
      observable$ = this.productsService.getProductsPaginatedAfter(this.defaultItemsShow, null);
    }

    // 包装为带初始加载状态的流
    this.productsPaginated$ = of({
      loading: true,
      products: [],
      error: false,
      hasNextPage: false,
      hasPreviousPage: false,
      totalCount: 0
    }).pipe(
      concatMap(() => observable$),
      catchError(() => of({
        loading: false,
        products: [],
        error: true,
        hasNextPage: false,
        hasPreviousPage: false,
        totalCount: 0
      }))
    );

    if (updateUrl) {
      this.updateUrlParams(before, after);
    }
  }

  private updateUrlParams(before: string | null, after: string | null) {
    // 保留你的URL更新逻辑
  }

  private showErrorMessage(msg: string) {
    // 保留你的错误提示逻辑
  }
}

模板中使用async管道：

@if (productsPaginated$ | async; as resp) {
  @if (resp.loading) {
    <app-product-card-skeleton *ngFor="let _ of [1,2,3,4]"></app-product-card-skeleton>
  } @else if (resp.error) {
    <div class="error-alert">加载商品失败，请稍后重试</div>
  } @else {
    <app-product-card *ngFor="let product of resp.products" [product]="product"></app-product-card>
    <!-- 分页组件 -->
  }
}

2. 配置Apollo SSR支持，确保服务端请求正常处理 #

在app.config.server.ts中启用Apollo的SSR模式和数据转移：

import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import { provideApollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';
import { transferHttpCacheProvider } from '@nguniversal/common';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    transferHttpCacheProvider(),
    provideApollo(() => {
      const httpLink = new HttpLink({ uri: '你的GraphQL接口地址' });
      return {
        link: httpLink,
        cache: new InMemoryCache(),
        ssrMode: true, // 开启SSR适配模式
      };
    })
  ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

3. 优化服务层错误处理，避免流挂起 #

修改服务层方法，添加take(1)确保Observable发出值后立即完成，让SSR感知异步任务结束：

export class ProductsService {
  private apollo = inject(Apollo);

  getProductsPaginatedAfter(quantity: number, after: string | null): Observable<ProductPaginatedResponse> {
    return this.apollo.watchQuery({
      query: GET_AFTER_PRODUCTS,
      variables: { first: quantity, after: after },
      fetchPolicy: 'network-only' // SSR下强制请求服务端数据
    }).valueChanges.pipe(
      map(({ data, errors }) => {
        if (errors && errors.length) {
          throw new Error(errors.map((err: any) => err.message).join(', '));
        }
        return {
          loading: false,
          products: data.productsPaginated?.nodes || [],
          hasNextPage: data.productsPaginated?.pageInfo.hasNextPage || false,
          hasPreviousPage: data.productsPaginated?.pageInfo.hasPreviousPage || false,
          startCursor: data.productsPaginated?.pageInfo.startCursor,
          endCursor: data.productsPaginated?.pageInfo.endCursor,
          totalCount: data.productsPaginated?.totalCount || 0,
          error: false
        } as ProductPaginatedResponse;
      }),
      catchError(error => {
        console.error('GraphQL请求错误:', error.message);
        return of({
          loading: false,
          products: [],
          hasNextPage: false,
          hasPreviousPage: false,
          startCursor: undefined,
          endCursor: undefined,
          totalCount: 0,
          error: true
        } as ProductPaginatedResponse);
      }),
      take(1) // 只取第一个值，确保流及时完成
    );
  }
}

4. 可选：调整SSR超时阈值 #

如果接口确实需要较长响应时间，可在server.ts中延长超时：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';

const bootstrap = () => bootstrapApplication(AppComponent, config);

export default bootstrap;

// 调整超时为60秒
export const config = {
  ...config,
  server: {
    timeout: 60000
  }
};

关键原理 #

• Angular SSR仅追踪通过async管道、HttpClient等官方API发起的异步操作，手动subscribe的Observable不在追踪范围内，会导致服务器无限等待。
• Apollo的ssrMode: true会适配服务端渲染上下文，确保请求状态正确同步，transferHttpCacheProvider则避免客户端重复请求服务端已获取的数据。
• take(1)强制Observable完成，让SSR明确异步任务结束时间，及时生成HTML返回客户端。

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