Angular 7 SSR, компонент приложения ngOnInit () вызывается несколько раз

Question

У меня есть приложение angular 7 с около 30 модулями. Я извлекаю данные пользователя в app.component.ts, чтобы использовать их во всем приложении, но неожиданно заметил, что API данных пользователя запускается несколько раз при 1 загрузке.

После помещения журналов в ngOnInit() в моем app.component.ts я нашел что журналы печатаются несколько раз, но это происходит только при серверной рендеринге в браузере, который отображается только один раз.

Любая идея, почему ngOnInit() вызывает более одного раза ??

Answer 1

ngOnInit () перехватывает только один раз после создания всех директив. Если у вас есть подписка внутри ngOnInit (), и она не отписана, тогда она запустится снова, если данные подписки изменятся. В вашем случае при загрузке вызовов API через SSR на стороне сервера сервер не всегда ожидает ответа, и это может быть причиной для нескольких журналов. Предложение будет делегировать это на стороне клиента, используя isPlatformBrowser. Это то, что мне кажется на основании исследования общего потока БСО.

Answer 2

Я не уверен, что это решено, но вот одно из предложений:

Добавьте часть subscribe в свой компонент и удалите ее из функции, которая выполняет HTTP-вызов:

ngOnInit() {
    this.loadData();
}

loadData(){
    this.my_service.getData().subscribe(data => this.userDetails = data);
}

И в вашем сервисе вы можете получить простой HTTP-вызов:

getData() {
    return this.http.get('../your/url')
           .map((res:Response) => res.json());
}

Надеюсь, это поможет.

Answer 3

Концепция Angular SSR заключается в том, что при первой загрузке страницы / URL-адреса она рендерится через сервер, а затем передает данные на стороне клиента. Так что технически он вызывает все компоненты, службы существуют на этой странице / URL дважды.

Вы можете использовать условие isPlatformBrowser и метод isPlatformServer, так что вы можете отобразить только необходимую часть на стороне сервера. Мы показываем только определенные вещи c в SSR, которые связаны с оптимизацией SEO.