angular - 当 scully 生成的静态页面已经包含最新数据时如何延迟加载数据

Question

我有一个角度项目。在我的 home 组件上，我通过 ngOnInit 方法从后端服务器加载实时数据。它工作得很好。但是为了提高性能，我使用了 Scully，它为我的 home 组件生成了一个静态页面。现在，当我在浏览器中加载我的页面时，它会下载静态页面。其中包含所有最新数据。这意味着，我不必再次加载数据。

即使我禁用 Javascript，生成的页面也会按预期工作。所以我的问题是当浏览器加载的页面已经有实时数据时，如何避免加载实时数据。

我最初的方法是使用文档对象检查元素，但不幸的是，一旦我在 ngOninit 中，即使它在那里也找不到元素。这里；是我的代码

ngOnInit(): void {    
    let blogItems = document.getElementsByClassName("blog-item");
    let isRendered : boolean = blogItems != null && blogItems.length > 0;
    if(isRendered) 
      return
    else {
      console.log("not rendered yet");
      console.log(blogItems)
      console.log("count: " + blogItems.length)
    }  
    //code to load live data
}

有没有办法做到这一点？

如果我使用静态客户端渲染，那么 lighthouse 评估的性能非常糟糕（即使使用由 ng new app 生成的默认角度项目），这就是为什么我必须使用静态生成的页面。