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()，则服务器端呈现会成功调用fetchNextPage()方法并调用目标API以获取第一页数据，但我想避免{{1 }}。我想保留标准化的NodeJS -> 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客户端并将它们推迟到客户端？

1 个答案: