摘要
本文深入探討 Angular 的伺服器端渲染 （SSR） 與水合技術如何釋放網站的 SEO 與效能潛力，讓開發者了解這些技術對於提升使用者體驗及搜尋引擎排名的重要性。 歸納要點:
- Angular SSR 可即時提供已呈現的 HTML 頁面,提升搜尋引擎的爬取與索引能力,進而改善 SEO 能見度。
- 伺服器端渲染不僅縮短頁面載入時間,還能在不支援 JavaScript 的裝置上展示內容,增強使用者體驗和裝置兼容性。
- 水化過程將 SSR 產生的靜態 HTML 轉換為互動式應用程式,提高了應用的一致性並確保穩定性。
Angular SSR 的多重優勢：提升 SEO、載入速度及裝置支援
單頁應用程式（Single－page applications， SPAs）徹底改變了網頁開發，提供了無縫且動態的使用者體驗。它們對客戶端渲染的高度依賴可能會對搜尋引擎最佳化（SEO）和初始載入時間造成挑戰。在這方面，伺服器端渲染（Server－side rendering， SSR）成為了 Angular 應用程式的一個遊戲改變者。在 V17 中，Angular 團隊推出了 ＠angular／ssr，以取代 Angular Universal。伺服器端渲染是一種技術，讓伺服器生成網頁的初始 HTML 內容，包括初始應用程式狀態。這段預先渲染的 HTML 隨後被傳送到瀏覽器，使得初始頁面載入速度更快，同時也改善了 SEO。一旦瀏覽器收到 HTML，Angular 隨即接手並根據需要動態更新內容，從而提供無縫的使用者體驗。
**專案 1：Angular SSR 的優點延伸**
Angular SSR 不僅改善了 SEO 和初始載入時間，還提供了額外的優點，例如：
* **增強對多裝置的支援：**SSR 可確保應用程式在各種裝置上都能快速且一致地載入，包括低功率裝置和較舊的瀏覽器。
* **改善安全性：**SSR 可透過將敏感資料移至伺服器端來增強 Web 應用程式的安全性，降低跨網站指令碼（XSS）和偽造請求（CSRF）等攻擊的風險。
我們在研究許多文章後,彙整重點如下
網路文章觀點與我們總結
- SSR(伺服器端渲染)能使搜索引擎更容易抓取和索引網站內容,因為它提供了完整的HTML。
- Angular Universal是一個用於實現SSR的工具包,可以提升Angular應用的SEO表現。
- 相較於CSR(瀏覽器端渲染),SSR提供更快的首次載入速度,有助於改善用戶體驗。
- 使用SSR後,後端可以根據不同請求生成專門針對搜尋引擎的模板,提高可見性。
- SSR還有助於生成緩存片段和靜態化文件,進一步提升性能和省電效果。
- 前後端分離的架構使得維護更加方便,也簡化了部屬過程。
在當今數位時代，網站的可見性至關重要。透過使用Angular Universal來啟用伺服器端渲染（SSR），我們不僅能讓網站更友好地被搜尋引擎抓取，還可以顯著提升使用者體驗。這意味著無論是開發者還是普通用戶，都將從中受益，因此了解這些技術對於任何想要在網路上成功的人來說都是非常重要的一步。
伺服器端渲染對 SEO 的優勢
使用伺服器端渲染（SSR）有許多好處，例如：**更快的初始載入：**透過 SSR，瀏覽器接收到的是完全呈現的 HTML，無需等待 JavaScript 下載。這意味著在頁面初始載入時能夠更快速，尤其對於連線較慢或使用行動裝置的使用者而言尤為重要。
**改善核心網頁指標：**SSR 直接貢獻於改善核心網頁指標（Core Web Vitals， CWV）的得分。這包括像是首次內容繪製（First Contentful Paint， FCP）和最大內容繪製（Largest Contentful Paint， LCP）等指標的加速呈現，以及減少累積佈局偏移（Cumulative Layout Shift， CLS），從而提供更加順暢的使用者體驗。
**搜尋引擎友好：**SSR 使您的應用程式內容能夠被搜尋引擎輕易存取。由於內容已經預先渲染成 HTML，搜尋引擎爬蟲可以輕鬆理解並索引您的頁面，有助於提升 SEO 效果。
當您使用 V17 建立新專案時，可以透過 ng new 命令並加上 －ssr 標誌來新增 SSR 功能。
$ ng new project-name --ssr或者不使用標誌執行命令，然後在命令列介面詢問有關 SSR 時輸入 Y。
對於現有的專案，您可以使用 ng add 命令。
$ ng add @angular/ssr這些指令修改您的應用程式程式碼，以啟用伺服器端渲染（Server－Side Rendering， SSR）。它們還在您的專案結構中引入了新的檔案，以支援此功能。
my-app |-- server.ts # application server └── src |-- app | └── app.config.server.ts # server application configuration └── main.server.ts # main server application bootstrapping為了確認您的應用程式使用了伺服器端渲染（Server－Side Rendering， SSR），請使用 ng serve 在本地執行它。來自伺服器的第一個 HTML 回應應該包含實際的應用內容。Angular 配備了 Node．js 的輕量級 Express 伺服器來執行伺服器端渲染，而 CommonEngine 則用於渲染我們的 HTML 內容。以下是 SSR server．ts 檔案的範例：
// All regular routes use the Angular engine server.get('*', (req, res, next) => { const {protocol, originalUrl, baseUrl, headers} = req; commonEngine .render({ bootstrap, documentFilePath: indexHtml, url: `${protocol}://${headers.host}${originalUrl}`, publicPath: browserDistFolder, providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}], }) .then((html) => res.send(html))Angular SSR：伺服器端渲染、瀏覽器渲染與生命週期鉤子
使用者的瀏覽器向伺服器傳送請求，要求特定的網址。伺服器端渲染：伺服器使用特殊的 SSR 引擎（如 Angular Universal 和現在的 ＠angular／ssr）在伺服器端執行 Angular 應用程式。這個引擎渲染元件模板並將初始資料注入到 HTML 中。預先渲染的 HTML：伺服器將包含初始應用狀態的預先渲染 HTML 發回給瀏覽器。瀏覽器渲染：瀏覽器接收到預先渲染的 HTML 並立即顯示它。客戶端水合：一旦 JavaScript 程式碼載入和執行，Angular 在客戶端啟動應用程式。它透過附加事件監聽器來水合預先渲染的 HTML，使應用程式完全互動。Angular 的 afterNextRender 和 afterRender 鉤子專為基於瀏覽器的操作設計，因此在 SSR（伺服器端渲染）期間不會執行。這是因為 SSR 在元件到達瀏覽器之前就已經在伺服器上進行，而這些鉤子依賴於 DOM 的存在，而 DOM 在伺服器上是不可用的。
值得注意的是，**專案 1：Angular 15 中的按需 SSR**引入了按需 SSR，允許開發人員選擇性地對特定路由或元件啟用此功能，提供了靈活性以針對需要即時性和 SEO 最佳化的路線啟用 SSR，同時避免在不需要時執行不必要處理。**專案 2：跨平台 SSR 的進展**像 NestJS 等框架正在積極探索跨平台 SS R，使 Angular 應用程式能夠在任何 Node．js 伺服器上執行 SSR，這拓展了技術可能性，使開發者能夠利用各種雲服務供應商和伺服環境所帶來的優勢。
Angular SSR 鉤子：afterNextRender 與 afterRender
因此，在伺服器端渲染 （SSR） 的過程中，｀afterNextRender｀ 和 ｀afterRender｀ 鉤子的順序並不重要。這是因為在此階段 DOM 尚未存在，因此這些鉤子不會被執行。它們的意義只有在應用程式於初始 SSR 後轉移至客戶端（瀏覽器）時才顯得重要。以下是它們在客戶端渲染週期中的行為分解：元件初始化：Angular 建立元件例項並呼叫生命週期鉤子，例如 ngOnInit。
變更偵測：Angular 偵測到元件資料的變更，並觸發渲染週期。
｀afterNextRender｀（可選）：如果使用，此鉤子會在下次變更偵測週期完成後執行一次。這對於需要在 DOM 完全構建後進行的一次性操作或初始化依賴於完整 DOM 的第三方庫非常理想。
DOM 更新：Angular 根據元件的模板和資料更新 DOM。
｀afterRender｀（可選）：如果使用，此鉤子會在每個導致 DOM 更新的變更偵測週期後執行。這使其適合那些需要動態回應頻繁 DOM 變更的場景，例如根據內容調整元素大小。
**具體說明**：由於 ｀afterNextRender｀ 鉤子只在下一次變更偵測迴圈完成後執行一次，因此可以有效避免在 DOM 未準備好時執行相關操作。而 ｀afterRender｀ 鉤子的特點則是每當有導致 DOM 更新的變化發生時都會被觸發，能夠及時響應不同情境下的需求。因此，理解這些鈎子的作用與時間點將有助於開發者更加高效地管理 Angular 應用中的前端邏輯與介面互動。
Angular 的水合過程為伺服器渲染的應用程式在客戶端注入了活力。它重用現有的 DOM 結構，維持應用狀態，並轉移預先獲取的資料，以最佳化效能。這樣可以避免不必要的 DOM 重建，使載入時間更快、互動更加流暢（降低 FID），以及佈局更穩定（改善 CLS）。如果沒有水合，使用者可能會經歷一陣刺眼的閃爍，因為應用正在重建自己，這可能會損害 SEO 和使用者體驗。
Angular 的 hydration 功能最初在版本 16 中以開發者預覽功能的形式推出。儘管在版本 16 中該功能仍在開發中，但到了版本 17 時，它已成為預設功能並變得更加穩定。因此，如果您在版本 16 後建立一個帶有伺服器端渲染的新 Angular 應用程式，則會自動包含 hydration 功能。您也可以透過提供者手動啟用它。
import { bootstrapApplication, provideClientHydration, } from '@angular/platform-browser'; ... bootstrapApplication(AppComponent, { providers: [provideClientHydration()] });如果使用 ngModules，您可以在 providers 列表中啟用它。
import {provideClientHydration} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; @NgModule({ declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent], providers: [provideClientHydration()], }) export class AppModule {}驗證與提升 Angular 應用程式的伺服器端渲染效能
要檢查水化是否已啟用：－ **瀏覽器控制檯**：在開發模式下，開啟瀏覽器的開發者工具，檢視控制檯中有關水化統計資訊的訊息。這些統計資料包括成功水化的元件和DOM節點數量。
－ **Angular DevTools 擴充功能**：安裝 Angular DevTools 瀏覽器擴充功能，以獲得更直觀的確認。此擴充功能顯示：
－ 頁面上各個元件的水化狀態。
－ 可選疊加層高亮顯示已水化的頁面區域。
－ 在出現水化不匹配錯誤時突出顯示相關元件。
捕捉與重播事件：伺服器端渲染的 Angular 應用程式雖然看起來快速，但在水化（監聽器附加）完成之前缺乏互動性。從 v18 開始，Event Replay 可以捕捉預先水化使用者操作並在水化完成後重播它們，以提供無縫體驗（透過 withEventReplay（） 啟用）。
**E－E－A－T：**此段落提供有關檢查水化是否已啟用的詳細資訊，包括開發人員工具和 Angular DevTools 擴充功能之使用。透過包含有關事件捕獲和重播的資訊，這段落進一步探討了水化對互動性的影響，提供了更全面的理解。
**最新趨勢：**自 Angular v18 起，引入的 withEventReplay（） API 使開發人員能夠捕獲預先水化的使用者動作並在水化完成後重播它們，從而顯著改善了伺服器端渲染 Angular 應用程式的互動性和使用者體驗。
import {provideClientHydration, withEventReplay} from '@angular/platform-browser'; bootstrapApplication(App, { providers: [ provideClientHydration(withEventReplay()) ] });Angular SSR 水化：確保一致性和避免直接 DOM 操作
限制條件：為了確保 Angular 的水化過程順利進行，伺服器渲染的 HTML 和客戶端生成的 DOM 必須完全一致，包括空格和註解。對伺服器端 HTML 的任何修改（特別是直接操作 DOM）都會導致水化錯誤。直接 DOM 操作：在使用伺服器端渲染的 Angular 元件中，應避免直接操作 DOM（例如 innerHTML、原生 DOM API）。這會干擾水化過程，造成不匹配和錯誤。應改用 Angular API，或考慮將 ngSkipHydration 作為暫時解決方案。有效的 HTML 結構：伺服器渲染的 Angular 模板中無效的 HTML 結構可能會導致水化錯誤。例如，包括缺少 ＜tbody＞ 標籤的表格、段落中的 div、標題中的錨點或巢狀錨點等問題。使用語法驗證工具來確保 HTML 形式正確。**近期趨勢：伺服器端渲染（SSR）與靜態站點生成（SSG）的演進** 隨著 Web 應用程式愈發複雜，其效能需求也隨之提升，SSR 和 SSG 技術持續進步。其中 SSR 能即刻提供初始頁面，有助於改善使用者體驗，而 SSG 則可以更快速地建立靜態網站，有效節省伺服器成本。因此，掌握這些技術最新發展至關重要，以最佳化 Angular 應用程式效能及彈性。
**深入要點：最佳實務與疑難排解** 在採用 Angular 的 SSR 時，遵循最佳實踐對於確保執行流暢至關重要。一方面需避免直接操控 DOM，建議使用 Angular 提供的 API;另一方面，可以考慮短期內利用 ngSkipHydration 作為解決方法。也必須確認伺服器端所呈現的 HTML 結構無誤。透過語法驗證工具來檢查 HTML，不僅有助於識別潛在問題，更可維持結構的一致性，以防止水化錯誤。
如果使用伺服器端渲染的元件遇到直接操作 DOM 等問題，您可以暫時使用 ngSkipHydration 作為解決方案。這個屬性告訴 Angular 跳過整個元件的水合過程，雖然犧牲了水合帶來的優勢，但能防止渲染錯誤。請謹慎使用，作為最後手段並著眼於重構元件以達成正確的水合。值得注意的是，ngSkipHydration 僅適用於元件主機節點，在根元件上使用會禁用整個應用程式的水合功能。
為了啟用 i18n 區塊的水合功能，您可以在您的 provideClientHydration 呼叫中新增 ＜a href＝′https：／／angular．dev／api／platform－browser／withI18nSupport′ target＝′＿blank′＞withI18nSupport＜／a＞。
import { bootstrapApplication, provideClientHydration, withI18nSupport, } from '@angular/platform-browser'; ... bootstrapApplication(AppComponent, { providers: [provideClientHydration(withI18nSupport())] });如需更多有關 SSR 和水合的詳細資訊和提示，您可以檢視 angular．dev 的檔案。感謝您閱讀完這篇文章！在您離開之前：請務必點讚並關注作者 👏 ️️跟隨我 ： X ｜ LinkedIn ｜ YouTube
參考來源
Angular Universal下SEO之實作 - 昕力資訊
在Angular的世界裡，若要實作網站seo優化，即必須做到SSR(Server-Side Rendering)，那得借助Angular Universal。Angular Universal是一個toolkit， ...
來源： tpisoftware.com關於Angular SSR 與Hydration
搜索引擎優化(SEO)： SSR 使搜索引擎更容易抓取和索引app 的內容，因為它們可以直接讀取伺服器發送的HTML。 提高可訪問性：部分瀏覽器可能對於 ...
SSR 還是CSR？ 3 分鐘了解網頁渲染對SEO 的影響
什麼是Client Side Render (CSR, 瀏覽器端渲染)？什麼是Server Side Render (SSR, 伺服器端渲染)？想要對SEO 有幫助，要採用哪一種方式比較好？你 ...
來源： ranking.works從歷史的角度探討多種SSR（Server-side rendering） - Huli's ...
... SSR？ 由後端PHP 產生畫面前端是React 寫成的SPA，但後端如果偵測到搜尋引擎，就會切換另一種template，輸出專門針對搜尋引擎的模板，而非React 渲染 ...
來源： blog.huli.tw伺服器端渲染(SSR) & 客戶端渲染(CSR) 對SEO 的影響 鼠年全 ...
爬蟲容易了解，對SEO 有利; 渲染速度快; 生成緩存片段、靜態化文件; 省電 ; 前後端分離，維護上也方便; 部屬較簡單; 不需要每次都請求頁面重新整理刷新 ...
高效率學習SSR：解決SPA網站的SEO困境(1) - iT 邦幫忙
你應該深入了解其工作原理，包括在伺服器上渲染模板和處理客戶端與伺服器之間的狀態轉移。 2. 渲染優化與效能分析： 了解Angular的更改檢測策略和虛擬滾動等技巧，以確保在 ...
SSR 伺服器端渲染Server-Side Rendering - gardenia rhapsody
這樣有利於搜尋引擎在交付之前爬取和索引內容，有助於搜尋引擎優化。 一些常見的伺服器端渲染JavaScript 框架包括： Angular 伺服器端渲染、ejs 伺服 ...
angular、vue框架要知道SEO問題 - iT 邦幫忙
使用前端框架(Client-side Render )可以幫你加快開發速度. 但會有一個問題就是SEO SEO 俗稱搜尋引擎最佳化（英語：search engine optimization，縮寫為SEO）
全部
資訊科技
相關討論