Angular，谷歌机器人如何对延迟加载的组件进行爬网和索引

Question

我们在滚动上加载角度组件以获得更好的页面性能，但这些组件内容不会被谷歌机器人抓取。我们已经实现了角度 ssr 和预渲染。我们正在使用滚动事件

@HostListener('窗口:滚动', ['$event'])

Answer 1

Defer 不会在服务器上渲染，您可以尝试这样的操作。当在服务器上时，组件会无延迟地渲染，如果没有，它将随之渲染，

afterNextRender

只会在浏览器上触发。

HTML：

@if(!isBrowser) {
        <some-component/>
} @else {
    @defer() {
        <some-component/>
    }
}

TS：

import { Component} from '@angular/core';

@Component(...)
export class Parent {
  isBrowser: boolean;

  constructor() {
    afterNextRender(() => {
      this.isBrowser = true;
    });
  }
}

Answer 2

您应该考虑到生成的 HTML（SSR 或 SSG）中没有的所有内容要么质量不好，要么没有被搜索引擎索引。

未来的解决方案是部分补水。 通过部分水合，

@defer

块内的所有内容都将呈现为 HTML，但随后不会加载相应的 JS。该功能可能会在今年晚些时候发布。