SSR Angular 处理生成 routerLinks 的静态 json 资源

Question

我正在开发一个利用 Anuglar SSR 功能的页面。它是一个静态页面，因此没有服务器与之通信。

我在页面上请求一个 json 资产，其中包含有关可用路线的信息，并基于它构建

[routerLink]

元素。

@for (post of filteredPosts; track $index) {
  <!-- This element contains a routerLink that uses information from the postData -->
  <stars-blog-post-card [postData]="post"></stars-blog-post-card>
}

ngOnInit() {
    this.handleSeo();
    this.blogPostDataClientService.getBlogPostData().subscribe((data) => {
      this.posts = data.filter((post) => post.published);

      ...

      this.filteredPosts = this.posts;

      // We use OnPush change detection
      this.cdr.detectChanges();
    });
  }

我认为这种方法对于网络爬虫来说是有问题的。这些元素仅在成功传输资产 json 文件后才可见。如果我的理解有误，请纠正我！

有没有办法在预加载阶段填充根据资产信息构建的路线，以便网络爬虫可以看到元素？如果不是，在

sitemap.xml

中为每个子页面创建一个条目是否会更好？

使用当前方法，页面将在按预期接收资源后呈现。我尝试在代码中手动包含 json 文件而不是传输它，但我不确定这是否是最佳实践或会改变任何内容。

Answer 1

您正在寻找

Prerendering (SSG)

，在那里您可以尝试不同的选项，例如

1. discoverRoutes - 构建器是否应该处理 Angular Router 配置以查找所有未参数化的路由并预渲染它们。

2. routesFile - 文件的路径，其中包含要预渲染的所有路由的列表，以换行符分隔。如果您想使用参数化 URL 预渲染路由，则此选项非常有用。

我猜你可能需要选项 2，因为它可能是参数化路线。

但要点是配置此内容，以便预渲染内容并且网络爬虫能够看到内容