是否可以使用Angular Universal预渲染来阻止RE获取

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被成功生成。但当我们启动生成的静态内容时，它们仍然会重新获取数据。

有可能阻止RE获取吗？还是不推荐？

Answer 1

它是内置的，使用TransferHttpCacheModule

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

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