是否可以使用 Angular Universal Prerendering 防止重新获取？

Question

假设我们有这个 Post 组件：

@Component({
  template: `
    <div 
      *ngIf="post$ | async as post" 
      [innerHTML]="post.content">
    </div>
  `,
})
export class Post implements OnInit {
  post$!: Observable<Post>;

  constructor(private http: HttpClient, private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.post$ = this.route.paramMap.pipe(
      switchMap((params) => {
        const slug = params.get('slug') ;
        return this.http.get<Post>(`${env.apiUrl}/posts/${slug}`);
      })
    );
  }
}

当我们预渲染帖子页面时：

ng run myapp:prerender --routes-file routes.txt

他们的数据被获取并成功生成了 HTML。但是当我们启动生成的静态内容时，它们仍然会重新获取数据。

是否可以防止重新获取？还是不推荐？

Answer 1

它是内置的，使用TransferHttpCacheModule

它允许在生成的 HTML 代码的script 元素中序列化在服务器端获取的数据。然后在浏览器中，TransferHttpCacheInterceptor 拦截每个 HTTP 请求并检查该数据是否有相应的条目。它使用<http_verb>.<url> 作为键。

每个缓存条目在使用后立即失效，以便将来使用相同 <http_verb>.<url> 键的请求发送到后端。