我有一个有角度的Web应用程序,该应用程序从组件构造函数中的Firebase Firestore加载数据(产品)。然后,它在页面上显示产品列表。尽管数据是动态的,但它并不经常更改。例如,价格可能会发生变化,但产品本身会停留在那里。
我想实现Angular Universal和Prerendering,但我想确认构造器中加载的产品列表将包含在预渲染的静态页面中。
是真的吗?
此外,是否有可能每晚或在更新数据库时将函数编写为“重新呈现”?
Angular Universal将允许您在提供页面之前在页面中加载内容(在您的情况下为产品列表)。但是,它不会提前输出静态页面,通常您会发现自己有条件地运行某些代码服务器端和某些代码客户端(使用isPlatformServer和isPlatformBrowser)。还值得注意的是,您将需要禁用,清除或替换DOM引用以及其他依赖于浏览器的代码才能在服务器上运行(使用Angular引用,例如ViewChildren,将在Universal / Server-side正常运行)。
对于常规的预渲染,Universal旨在按需交付应用程序/页面,并且不会提前输出页面。如果您想减少负载,建议您结合使用URL参数和缓存(例如CDN)。
一旦设置好,并接受代码需要支持无浏览器的环境后,Angular Universal真的很简洁,可以让您做一些独特的事情。我认为它更像是服务器渲染,客户端渲染的混合体。但是,它不是预渲染页面的“即插即用”解决方案。
静态预渲染也可以通过Angular Universal进行。然后将在构建期间提出任何请求。
最快的方法是通过以下命令使用schematic:
ng add @ng-toolkit/universal
[查看创建的prerender.ts
和scripts
中package.json
中的更改。
在文件static.paths.ts
中,您可以定义应预渲染的路由:
export const ROUTES = [
'/commits/yanxch'
];
[然后运行npm run build:prerender
时,您应该在static
文件夹中看到一个新的dist
文件夹。
基本上将构建期间请求的响应状态放入index.html
下的<script id="serverApp-state">..</script>
文件中>
此解决方案在浏览器端使用了所谓的ServerTransferStateModule
和TransferHttpCacheModule
,以避免两次(在构建过程中以及启动客户端应用程序时在服务器上)发出两次请求。
您可以在每晚构建期间触发此操作,然后部署新构建的应用程序,但是该过程更多地取决于构建管道的需求和设置。因此,是的,也可以执行DB-Query然后执行新的prerender构建的构建脚本。
您也可以看看我的example。