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 真的很簡潔，允許你做一些獨特的事情。 我認為它更像是服務器-渲染、客戶端-渲染的混合體。 但是，它不是預渲染頁面的“即插即用”解決方案。