Angular 2 Universal - 服務器端渲染

Question

我正在閱讀有關使用節點進行 Angular 2 服務器端渲染的信息。

但我找不到一個例子或解釋我應該怎么做。 我需要從服務器渲染一些帶有角度的頁面，有什么建議嗎？

Answer 1

好吧，看看這個入門套件https://github.com/alexpods/angular2-universal-starter 。 它具有服務器端渲染、 Web Worker 支持（整個 angular2 應用程序都在 Web Worker 中運行）、延遲加載（使用 webpack 的代碼拆分）和許多其他功能。 我希望它會幫助你。

披露：我是它的作者。

Answer 2

這是 angular-universal 的創建者在他們的演講中使用的示例，它是一個工作倉庫 -> https://github.com/angular/universal-starter/tree/angular-connect

這就是談話 - Full Stack Angular 2

Answer 3

看看這里： https : //universal.angular.io/

看起來“一些”官方文檔/站點現已上線。 API 文檔在代碼中，但為了快速參考，請參閱以下鏈接：

https://universal.angular.io/api/universal/index.html#typedoc-main-index https://universal.angular.io/api/preboot/globals.html

不錯的第三方概述和設置文檔： https : //mickaelkerjeanblog.wordpress.com/2016/05/02/angular-universal/

Answer 4

https://github.com/ng-seed/universal 上還有另一個示例存儲庫，在單個項目中展示了Universal和Lean Angular 。

這個應用程序使用了Angular 4.0.0提供的platform-server ，它可能是一個很好的入門/種子項目，直到Angular提供一些關於platform-server使用的文檔。

此外，覆蓋了大部分的功angular2-的WebPack起動由AngularClass經由諸如異步/懶惰路線，SCSS匯編（內嵌和外部），DEV / PROD模式，AOT編譯@ngtools/webpack ，測試，TsLint / Codelyzer , @types 甚至更多。

披露：我也是作者:)

Answer 5

我在 2018 年 7 月發現了這個搜索，並認為從那時起它可能已經改變了。 現在我們使用的是 Angular 6，這里有一個很好的教程，可以將它與 firebase 結合使用。

角度文檔在這里： https : //angular.io/guide/universal 。

你有一個app.server.module從@angular/platform-server和你的常規應用模塊導入ServerModule ：

imports: [
  ServerModule,
  AppModule
],

在您的普通AppModule您在導入BrowserModule時調用withServerTransition 。

BrowserModule.withServerTransition({ appId: APP_ID })

您有一個單獨的主要用於服務器端渲染，它只導出您的服務器模塊：

export { AppServerModule } from './app/app.server.module';

運行快速服務器的相關部分如下所示：

const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist/server/main');

const index = require('fs')
  .readFileSync(path.resolve(__dirname, './dist/browser/index.html'), 'utf8')
  .toString();

let app = express();

app.get('**', function(req, res) {
  renderModuleFactory(AppServerModuleNgFactory, {
    url: req.path,
    document: index
  }).then(html => res.status(200).send(html));
});

Answer 6

Angular 服務器端渲染一步一步在評論下方運行

第 1 步：-> ng add @ng-toolkit/universal

第 2 步：-> npm install

第 3 步：-> npm run build:prod

第 4 步：-> ng build --prod

第 5 步：-> npm run server

第 6 步：-> 運行 cmd 並編寫命令 -> curl http://localhost:4000

我的服務器端角度應用程序https://exampreparation.study

Answer 7

有兩種服務器端渲染

動態 SSR（服務器端渲染）和靜態預渲染

動態 SSR的概念是，將有一個實時節點服務器啟動，每當一個路由被命中時，它就會動態生成和序列化應用程序——將該字符串返回給瀏​​覽器。 請記住，您不能將其放在 AWS S3 或 nginx 或 apache httpd 中，您需要在某處運行節點服務器。

靜態預渲染是當我們想要預渲染路由列表並創建靜態文件（即：index.html、about-us.html 等）然后使用我們選擇的服務器來提供這些文件時稍后的。 您可以像普通的 angular 應用程序一樣使用 AWS S3 或 nginx 或 apache httpd 部署它。

那么我們如何知道選擇哪一個以及何時選擇呢？

預渲染通常會為您提供更好的性能，因為我們不會等待服務器訪問您的應用程序中所有必需的 API，並且不需要“序列化”任何東西，它已經為每個應用程序輸出了所有序列化的 HTML路由文件之一。 這是我們在考慮我們需要采取的路線之前與客戶考慮的一個很好的問題列表。

何時使用靜態預渲染：

• 您的應用程序本身是靜態的。 （或至少是您嘗試預渲染的路線）例如：主頁 | 關於我們 | 聯系我們

• 站點中非常動態的部分（以及位於登錄/身份驗證屏障后面的部分）可以指向應用程序的正常客戶端呈現 (CSR) 版本，並且 Angular 可以正常引導自身。

• 您的應用程序不會經常更新。 每當需要對靜態路由進行一些更改時，您只需再次運行構建腳本並重新發布包含所有預渲染文件的 /dist 文件夾。

何時使用動態 SSR：

• 您的應用程序（以及您需要到 SSR 的路由）是非常動態的
• 您有一份“趨勢產品”列表 | “實時數據” | 等等，您需要為每個服務器端渲染正確填充。
• 您的應用程序結構是基於 JSON 文件或 CMS 呈現的，其中任何內容都可能在任何給定時刻發生變化。

通常，大多數應用程序都需要靜態預渲染（因為身份驗證牆后面的任何路由都不會從利用 SSR 中獲得太多/任何好處，因為主要目的之一是 SEO 收益和改進的感知性能。請記住，您可以在 SSR 期間始終不呈現應用程序的某些方面，並在 CSR 期間填充這些動態部分！

參考https://medium.com/@MarkPieszak/angular-universal-server-side-rendering-deep-dive-dc442a6be7b7

如何操作（截至 2019 年 12 月）

對於動態 SSR只需按照https://angular.io/guide/universal

靜態預渲染

https://stackoverflow.com/a/53725674/6785908

https://github.com/angular/angular/issues/23024