超強技術！Angular伺服器端渲染讓你的網站速度倍增

概述

• 💡 简介
• 💡 什麼是伺服器端渲染
• 💡 為什麼需要使用伺服器端渲染
• 💡 React 與 Angular 的差異
• 💡 Angular 的服務端渲染概述

伺服器端渲染是什麼？

伺服器端渲染（Server-Side Rendering，簡稱SSR）是一種將網頁內容直接在伺服器端生成的技術。傳統上，網頁的內容通常由瀏覽器中的JavaScript腳本生成，因此在用戶訪問網頁時，網頁一開始是空白的，直到JavaScript腳本在瀏覽器中執行並生成網頁內容。使用伺服器端渲染，網頁的內容在伺服器端被生成，然後傳送到瀏覽器，用戶訪問網頁時可以立即看到內容，而無需等待JavaScript腳本完成。

為什麼需要使用伺服器端渲染？

伺服器端渲染具有以下優點：

• ✅ 改善搜尋引擎優化 (SEO)：由於搜尋引擎無法執行JavaScript，因此它們無法完全解析和索引使用客戶端渲染的網頁。使用伺服器端渲染可以確保網頁內容在加載時就能被搜尋引擎爬取和索引。

• ✅ 加速首次加載時間：由於伺服器端渲染在用戶訪問網頁時已經生成內容，因此用戶可以立即看到網頁內容，而無需等待JavaScript腳本加載和執行。這提高了首次加載時間，提供更好的用戶體驗。

• ✅ 提高可用性：在用戶訪問時立即生成內容，有助於提高網頁的可用性。如果客戶端渲染依賴於JavaScript，並且JavaScript在用戶設備上無法正常執行，那麼用戶可能會看到一個空白的頁面，這會給用戶帶來負面的體驗。

React 與 Angular 的差異

在使用伺服器端渲染時，React和Angular有一些不同之處。React提供了React框架內置的服務端渲染解決方案-Next.js，它使得將React應用程序進行伺服器端渲染變得簡單。對於Angular來說，服務器端渲染相對較少被使用和了解，因此沒有內置的解決方案，但可以使用Angular Universal來實現服務器端渲染。

Angular 的服務器端渲染概述

Angular Universal是Angular的官方工具包，用於實現服務器端渲染。使用Angular Universal，您可以將Angular應用程序進行伺服器端渲染，以提高性能和SEO。

為了實現服務器端渲染，您需要執行以下步驟：

1. 安裝@nguniversal/express-engine套件：在您的Angular應用程序中，執行命令ng add @nguniversal/express-engine以安裝所需的套件。

2. 建立服務器端代碼：安裝套件後，將生成一些服務器端的代碼和文件。主要文件包括main.server.ts、app.server.module.ts和server.ts。main.server.ts是應用程序的主文件，app.server.module.ts是在伺服器端使用的模塊文件，server.ts是服務器腳本。

3. 修改代碼以適應服務器端渲染：您可能需要在一些代碼部分進行修改，以使其適應服務器端渲染。例如，某些操作（如使用瀏覽器API）只能在客戶端執行，在服務器端會引發錯誤。

4. 啟動服務器端渲染：使用命令yarn run dev:ssr或npm run dev:ssr啟動Angular應用程序的服務器端渲染模式。

使用Angular Universal進行服務器端渲染可以提供更好的用戶體驗和優化的SEO效果，但需要對代碼進行一些修改以適應服務器端環境。