Как избежать клиентов API во время рендеринга на стороне сервера и передать их клиенту в Angular Universal?

Question

У меня есть довольно тривиальный угловой компонент, который служит компонентом маршрутизации маршрута домашней страницы углового модуля. Я конвертирую этот проект в Angular Universal, чтобы воспользоваться рендерингом на стороне сервера. Компонент делает что-то очень простое: перечисляет данные, извлеченные из разбитого на страницы API.

Я пытаюсь добиться следующего эффекта:

• Визуализация компонента с его базовым шаблоном и бизнес-логикой
• Выполните первый вызов API внутри метода ngOnInit () компонента, не на стороне сервера, а ТОЛЬКО на стороне клиента.

Моя первая попытка была:

  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, чтобы получить первую страницу данных, но я бы хотел избежать влияния NodeJS -> calling the real backend API на производство. Я хотел бы сохранить стандартизированный Frontend -> calling the real backend API, который также действителен без SSR. Моя цель использования SSR - быстрее выполнить First Contentful Paint и SO. Это не означает, что полное взаимодействие API должно быть межсерверным.

Answer 1

Вы должны иметь возможность использовать DI Angular для предоставления вам необходимой информации следующим образом.

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);
  }
}