Angular Universal/Prerendering 会加载动态加载的内容吗？

Question

我有一个 angular web 应用程序，它在组件的构造函数中从 Firebase Firestore 加载数据（产品）。 然后它会在页面上显示产品列表。 虽然数据是动态的，但它不会经常改变。 例如，价格可能会发生变化，但产品本身会保持不变。

我想实现 Angular Universal 和 Prerendering，但我想确认构造函数中加载的产品列表将包含在预渲染的静态页面中。

真的吗？

另外，是否可以在每晚或更新数据库时编写一个函数来“重新预渲染”？

Answer 1

Angular Universal 也可以进行静态预渲染。 然后将在构建期间提出任何请求。

最快的尝试方法是通过以下命令使用原理图：

ng add @ng-toolkit/universal

查看创建的prerender.ts以及package.json scripts的更改。

在文件static.paths.ts您可以定义应该预渲染的路由：

export const ROUTES = [
  '/commits/yanxch'
];

当您运行npm run build:prerender您应该会在dist文件夹中看到一个新的static文件夹。

基本上，构建时请求的响应状态被放入<script id="serverApp-state">..</script>下的index.html文件中

该解决方案在浏览器端使用所谓的ServerTransferStateModule和TransferHttpCacheModule来避免两次请求（在构建期间和客户端应用程序启动时在服务器上）。

您可以在每晚构建期间触发此操作，然后部署新构建的应用程序，但该过程更多地取决于构建管道的需求和设置。 所以是的，一个执行 DB-Query 然后执行新的预渲染构建的构建脚本也是可能的。

你也可以看看我的例子。

Answer 2

Angular Universal 允许您在提供页面之前加载页面中的内容（在您的情况下，产品列表）。 但是，它不会提前输出静态页面，通常您会发现自己有条件地运行某些服务器端代码和某些客户端代码（使用 isPlatformServer 和 isPlatformBrowser）。 另外值得注意的是，您需要禁用、清理或替换 DOM 引用和其他浏览器相关代码才能在服务器上运行（使用 Angular 引用，例如 ViewChildren，将在通用/服务器端正常运行）。

对于常规预渲染，Universal 旨在按需交付应用程序/页面，并且不会提前输出页面。 如果您想减少负载，我建议结合使用 URL 参数和缓存（例如 CDN）。

一旦你设置好它，并接受代码需要支持无浏览器的环境，Angular Universal 真的很简洁，允许你做一些独特的事情。 我认为它更像是服务器-渲染、客户端-渲染的混合体。 但是，它不是预渲染页面的“即插即用”解决方案。