Angular Universal 应用避免 SSR hang 的一些指导方针

当某些异步任务永远挂起时，Angular SSR 渲染可能永远不会完成，例如对后端 API 的 http 调用。

目前 Spartacus SSR 实现里，已经采取了一些措施来改善渲染挂起时的监控体验：

我们添加了配置 SsrOptimizationOptions.maxRenderTime.

在 maxRenderTime 时间之后，我们登录控制台，能看到显示渲染时间过长并且可能挂起的提示消息，但我们对此无能为力。

理想情况下，我们应该尽可能避免 render 进程出现 hang 的情况。

首先，最好调查一下 SSR 中出现 never-ending 的异步操作的最常见原因是什么，然后尝试阻止它们。

一种合理的猜测是，在大多数情况下，这是由于一个永不响应的 HTTP API 调用造成的。 如果情况确实如此，在 SSR 模式下，我们可以为所有 API 调用引入通用的 http 超时，因此它们最终会返回控制权给 SSR 服务器，因此 SSR 服务器可以继续进行其他请求的响应工作。

Angular Universal 的一个局限就在于，无法以编程方式中止挂起的渲染并释放分配的资源。

一种解决方案是，我们可以引入一个 Angular HTTP_INTERCEPTOR，它可以使长时间未决的网络请求超时，因此在服务器端启动的应用程序的生命周期更短。

换句话说：因此 SSR 渲染不会因为等待来自网络的缓慢 API 响应而“挂起”。 但是，这可能需要在应用程序代码甚至 SSR 代码中添加额外的逻辑，这样此类格式错误的渲染（基于不完整的数据）不会在 SSR 响应中返回。 在这种情况下，最好回退到具有无缓存标头的 CSR 应用程序，而不是允许发送格式错误的呈现 html 作为响应（并可能由 CDN 缓存）。

下面是一个具体的例子：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RequestTimeoutHttpInterceptor, DEFAULT_TIMEOUT } from './interceptors';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: RequestTimeoutHttpInterceptor, multi: true },
    { provide: DEFAULT_TIMEOUT, useValue: 5000 },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable, InjectionToken, Inject } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { empty, TimeoutError } from 'rxjs';
import { timeout, catchError } from 'rxjs/operators';

export const DEFAULT_TIMEOUT = new InjectionToken<number>('defaultTimeout');

@Injectable({
  providedIn: 'root'
})
export class RequestTimeoutHttpInterceptor implements HttpInterceptor {

  constructor(
    @Inject(DEFAULT_TIMEOUT) protected defaultTimeout: number,
  ) { }

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const modified = req.clone({
      setHeaders: { 'X-Request-Timeout': `${this.defaultTimeout}` }
    });

    return next.handle(modified).pipe(
      timeout(this.defaultTimeout),
      catchError(err => {
        if (err instanceof TimeoutError)
          console.error('Timeout has occurred', req.url);
        return empty();
      })
    );
  }

}