2018年11月16日 星期五

Angular Universal 伺服器渲染

目前覺得 [3] 解釋地比較詳細,官方文件 [1] 寫得有點籠統。

如果嘗試從 Java 的角度來理解整個 Angular Universal 相關的東西的話,好像是這麼理解的:

  • Angular、Angular Universal 可以看成是 Kotlin 語言;Node.js 可以看成是 Java 語言。
  • Angular、Angular Universal 寫出來的檔案好像都是 .ts 檔,也就是 TypeScript。這些檔案必須經過編譯,把他們翻譯成 JavaScript;若以 Java 的領域來理解,就像是 Kotlin 也是個 JVM 語言,但真正要在 JVM 上執行前,需要先透過編譯或者直譯器把 Kotlin 的語法翻譯成 Java 的語法。
  • 在查 Angular Universal 時常常會看到 Express 這玩意兒,Express(ExpressJS)對照 Java 的話比較像是 Spring MVC 或者 Jersey 這類 Web 框架。它的程式碼應該是用來告訴 Node.js 要如何解析、處理和回應 HTTP request。

所以整個 Angular Universal 的伺服器渲染,大體上要做的程序會是這樣:

  1. 以 Node.js 啟動的 Web 伺服器程序負責接收 HTTP Request。
  2. HTTP Request 會由 Node.js 上執行的 ExpressJS 程式碼來處理。
  3. ExpressJS 的程式碼去呼叫 Angular Universal 的模組(即 renderModuleFactory()),進行 pre-rendering。
  4. Angular Universal 回覆渲染後的結果給 ExpressJS,ExpressJS 再回覆給客戶端。
參考資料
  1. Angular Universal
  2. 透過 Angular CLI 1.6 將現有專案加入 Angular Universal 伺服器渲染功能
  3. Angular开发实践(六):服务端渲染
  4. Angular server-side rendering in Node with Express Universal Engine
  5. How to build an Angular App with Server-Side Rendering
  6. Angular 6 – Configure Angular Universal with pm2

沒有留言: