在 Angular Universal 中，如何在服务器端渲染期间避免 API 客户端并将它们延迟到客户端？

Question

我有一个相当简单的 Angular 组件，用作 Angular 模块主页路由的路由组件。我正在将此项目转换为 Angular Universal，以利用服务器端渲染。该组件做一些非常基本的事情：列出从分页 API.

中检索到的数据

我正在尝试实现以下效果：

使用基本模板和业务逻辑呈现组件
在组件的 ngOnInit() 方法中进行第一个 API 调用，而不是在服务器端，而仅在客户端。

我最初的尝试是：

  ngOnInit() {
    if (isPlatformBrowser(PLATFORM_ID)) {
      console.log('in the browser');
      // Load the first chunk of data only
      // within the browser (not on server side rendering)
      const page = 1;
      this.fetchNextPage(page);
    }
  }

这行不通。我既没有调用 console.log 也没有调用 fetchNextPage() 方法。如果我去掉包裹if()，Server Side渲染成功调用fetchNextPage()方法并调用目标API获取第一页数据，但我想避免这种效果NodeJS -> calling the real backend API 的生产。我想保留标准化的 Frontend -> calling the real backend API，它在没有 SSR 的情况下也有效。我使用 SSR 的目标是更快地完成 First Contentful Paint 和 SO。并不是将完整的 API 通信推迟到服务器到服务器。

Answer 1

您应该能够利用 Angular 的 DI 为您提供所需的信息，如下所示。

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

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  const isServer = !isPlatformBrowser(platformId);

  if (!isServer) {
      console.log('in the browser');
      // Load the first chunk of data only
      // within the browser (not on server side rendering)
      const page = 1;
      this.fetchNextPage(page);
  }
}

在 Angular Universal 中，如何在服务器端渲染期间避免 API 客户端并将它们延迟到客户端？

How to avoid API clients during server side rendering and defer them to the client, in Angular Universal?

server-side-rendering

angular-universal

angular