[技術支援-4] Angular Universal

什麼是Angular Universal

下面是一段截錄於https://itw01.com/G3MBE3P.html對Angular Universal目的的說明

雖然Angular是一種構建Web應用的強大方式,但是長期以來,開發人員都知道它在SEO和可訪問性方面的限制。當然,Google的爬蟲能夠執行JavaScript,但是它並不是唯一的爬蟲方案。例如,在將一個連結提交給Slack之後,它的爬蟲會抓取一個預覽,但是並不會執行JavaScript,所以原始的Angular HTML模板將會顯示在預覽之中。爲了消除這種現象所產生的問題,Jeff Whelpley和Patrick Stapleton開發了Angular Universal,它允許在服務端進行渲染。

從上面的文字可以了解,Angular Universal可以在server side預先對網頁模版做處理,變成一個有資料的靜態頁面。可以在使用者要求資料的當下產生靜態頁面,也可以事先產生好靜態檔案以供未來使用。

Angular Universal的主要目的有以下三個

  • 方便網路爬蟲(SEO)
  • 提高在手機裝置和效能較差的設備上的性能表現
  • 快速顯示第一頁

Google,Bing,Facebook,Twitter和其他社交媒體網站都依靠網路爬蟲來為網站編索引,並在搜索內容。Angular Universal可以生成應用程序的靜態版本,無需JavaScript即可輕鬆搜索,鏈接和導航。這也使網站預覽可用,因為每個URL返回一個完全呈現的頁面。

啟用網頁抓取工具通常被稱為 搜索引擎優化(SEO)。

安裝Angular Universal所需工具

  • @angular/platform-server – 通用服務器端組件。
  • @nguniversal/module-map-ngfactory-loader – 用於在服務器渲染的上下文中處理延遲加載。
  • @nguniversal/express-engine – 通用應用程序的快速引擎。
  • ts-loader – 傳輸服務器應用程序

使用下面指令安裝上面四個package

更新 AppModule 模組

修正預設AppModuleBrowserModule的匯入方式

根據使用者的瀏覽器來決定是否使用SSR(server-side rendering)

撰寫SSR Server的程式碼

src/app/app.server.module.ts

在這邊使用Express framework來做server,利用Universal的renderModuleFactory功能來輸出靜態檔案

下面是Express的Server檔案內容server.ts

Universal的設定檔

src/tsconfig.server.json的內容如下:

BUILD出檔案

參考資料

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *