Angular Universal簡介

問ChatGPT我該學什麼

前面我已經和大家介紹到，我這次想用SSR和Monorepo的架構來建置專案，因此我就向ChatGPT發問：

我正準備用SSR、Monorepo導入Angular16的專案
你覺得有哪些行前功課或技術點，是我事前必須去study的
確保我有足夠的基礎知識來執行開發？

接著ChatGPT就回答我：

1.Angular Universal: Angular Universal為Angular提供了SSR的支援。你應該深入了解其工作原理，包括在伺服器上渲染模板和處理客戶端與伺服器之間的狀態轉移。

2.Monorepo工作流程: 瞭解如何使用Nx或Lerna這樣的工具來管理Monorepo，包括如何組織代碼、共享模塊、版本控制等。
......
(一共10項，以下省略)
......

.
.

Angular Universal科普小學堂

於是，我就開始對「Angular Universal」進行相關的研究。以下請ChatGPT來為大家簡介一下Angular Universal：

Angular Universal 是 Angular 的一個關鍵功能，用於實現服務器端渲染（SSR）。它允許 Angular 應用在服務器上預渲染，然後將已渲染的頁面傳送到客戶端，這帶來了幾個主要優勢。首先，它改善了搜索引擎優化（SEO），因為預渲染的頁面更容易被搜索引擎識別。其次，它能提高首次載入速度，從而提升用戶體驗。此外，Angular Universal 也支援在 Node.js、.NET Core 和其他服務器平台上進行渲染。

然而，使用 Angular Universal 開發也需要考慮到一些挑戰，如異步數據加載和瀏覽器 API 的限制等。 總體來說，它是一個強大的工具，對於需要快速、SEO 友好的應用是一個很好的選擇。

.
簡單來說，Angular Universal就是Angular為SSR提供的解決方案。

.
.
.

從0開始的問答式學習

針對ChatGPT告訴我的學習重點，我再個別下Prompt做詢問，再從它的回答延伸更deatil的問題。

完整的對話過程，請看我和ChatGPT的問答串。這裡僅根據我和ChatGPT就「Angular Universal」這個主題的對話，做簡單的摘要整理。

大家也可以嘗試用這種問答式的學習方式，快速去掌握自己有興趣的知識點!

1. Angular Universal 簡介

• Angular Universal 是 Angular 的一個插件，允許在伺服器上執行 Angular 應用程式，實現SSR。
• 能夠改善SEO和提升首次畫面載入速度。

2. 專案結構

• 包括新的伺服器端入口點和模塊。
• 主要檔案包括 src/main.server.ts、src/app/app.server.module.ts、angular.json 和 webpack.server.config.js。

3. 如何在Angular 16導入

• 使用命令 ng add @nguniversal/express-engine 進行快速導入。

4. 與一般專案的不同

• SSR 需要考慮瀏覽器特定的代碼、異步數據加載等議題。

5. 運作原理

• Angular Universal 扮演像是「middleware」角色，先在伺服器上組裝完整的應用，然後送到客戶端。

6. 使用SSR開發時要考量的東西

• 瀏覽器特定的代碼：使用 isPlatformBrowser 進行環境確認。
• 異步數據加載：重新思考程式初始化的時間序，例如使用 resolve、TransferState API 等方法。

7. 如何解決SSR開發的問題

• 為瀏覽器特定代碼使用 isPlatformBrowser。
• 針對異步數據加載問題，使用 resolve、TransferState API 或 Angular 官方的 APP_INITIALIZER 等方法。

【圖】ChatGPT拯救了無數的老師和問題寶寶

.
.
.

今日心得

我發現我好像找到快速產出文章的方式了，那就是只要打上這句話：「讓ChatGPT來幫我們說明一下......(以下省略五百字)。」