是否可以使用 Angular 通用预渲染来防止重新获取？

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> 键的请求发送到后端。

是否可以使用 Angular 通用预渲染来防止重新获取？

Is it possible to prevent RE-fetching with Angular Universal Prerendering?

typescript

angular-universal