行銷需求｜與我們聯繫
摘要
在當今數位環境中，掌握 Angular 的伺服器端渲染 （SSR） 與水合技術對於提升網站效能及 SEO 表現至關重要。 歸納要點:
- SSR 在 Angular 中透過靜態資產的先行渲染與離線模式功能,顯著提升使用者體驗與負載效能。
- 伺服器端渲染(SSR)的優勢包括更快的載入時間、改善 SEO 排名以及提供流暢的使用者互動,滿足現今網路使用者需求。
- 將 SSR 與漸進式網路應用程式(PWA)結合,不僅優化網站效能,也增強了快取和離線可用性,提高使用者參與度。
SSR在Angular中的創新：渲染靜態資產與離線模式整合
單頁應用程式（SPAs）徹底改變了網頁開發，提供了流暢且動態的使用者體驗。它們對客戶端渲染的高度依賴可能會對搜尋引擎最佳化（SEO）和初始載入時間造成挑戰。這時，伺服器端渲染（SSR）便成為 Angular 應用程式的一個突破性解決方案。在 V17 版本中，Angular 團隊推出了 ＠angular／ssr，以取代 Angular Universal。伺服器端渲染（SSR）是一種技術，其中伺服器生成網頁的初始 HTML 內容，包括初始的應用程式狀態。這些預先渲染的 HTML 然後被傳送到瀏覽器，使得初始頁面載入速度更快，同時改善 SEO。當瀏覽器接收到 HTML 後，Angular 隨即接管並根據需要動態更新內容，從而提供無縫的使用者體驗。
**SSR 在 Angular 中的最新趨勢：渲染靜態資產** 在 Angular V17 中，SSR 引入了渲染靜態資產的功能。這使得關鍵的非動態資產，例如導航列、頁尾和側邊欄，可以進行預先渲染。這項技術不僅優化了初始頁面的載入速度，也有助於改善 SEO，因為搜尋引擎能夠更輕鬆地索引這些靜態資產。
**SSR 與離線模式的整合** SSR 可以與離線模式結合使用，以提供真正的離線體驗。透過將 SSR 預先渲染的 HTML 與離線儲存策略結合，即使在沒有網路連線的情況下，使用者仍然可以存取 Angular 應用程式中的基本介面和功能。此功能對於依賴可靠網路連線的行動應用特別重要，可確保即使在離線狀況下也能提供無縫的使用者體驗。
我們在研究許多文章後,彙整重點如下
網路文章觀點與我們總結
- SSR(伺服器端渲染)能提供更快的首頁渲染時間,讓使用者能立即看到內容。
- SEO友好:由於伺服器已經生成HTML,有助於提升網站在搜索引擎上的排名。
- Angular Universal可以實現SSR,結合伺服器和客戶端的優勢,增強互動性和效能。
- CSR(客戶端渲染)雖然提供流暢的用戶體驗,但首次加載時需要等待JavaScript執行,可能影響用戶感受。
- 進行SSR時需注意效能優化,如採用虛擬滾動等技術,以保持高效運作。
- 狀態管理對於維持客戶端與伺服器之間的一致性至關重要,可以使用NgRx等工具來達成。
在當前的網頁開發中，選擇SSR或CSR各有利弊。SSR透過快速顯示內容及改善SEO表現而受到青睞，而CSR則提供了更佳的互動體驗。不論是哪種方式，都需要適當地進行性能優化，以確保網站流暢且兼具功能。這些技術不僅影響我們的瀏覽體驗，更是提升企業曝光度的重要因素。
觀點延伸比較:| 技術 | SSR (伺服器端渲染) | CSR (客戶端渲染) |
|---|---|---|
| 首頁渲染時間 | 更快的首頁渲染時間,使用者立即看到內容 | 首次加載需等待JavaScript執行,影響用戶體驗 |
| SEO友好性 | 伺服器生成HTML,有助於提升搜索引擎排名 | 需要額外的SEO優化,可能不如SSR友好 |
| 互動性與效能 | 結合伺服器和客戶端的優勢,增強互動性和效能 | 提供流暢的用戶體驗,但首次加載時較慢 |
| 效能優化技術 | 虛擬滾動等技術以保持高效運作 | 可以透過懶加載等方式進行部分優化 |
| 狀態管理工具 | 使用NgRx來維持客戶端與伺服器之間的一致性 | 常用工具有Redux,但在大型應用中可能導致性能瓶頸 |
伺服器端渲染的優點：更快的載入、更好的 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 功能。
SSR 的新進展：SSR 不斷進化，在 V17 中引進了許多新功能，例如增量靜態生成 （ISSG），允許您將部分網站伺服器端渲染，而其餘部分則使用客戶端渲染，提供最佳效能和靈活性。隨著使用者越來越注重線上體驗的流暢性和即時性，SSR 扮演著至關重要的角色。它透過提供更快的初始載入時間、改善的核心網路指標以及更順暢的使用者介面，提升整體使用者體驗。
$ ng new project-name --ssr或是使用不帶標誌的命令，然後在命令列介面詢問有關 SSR 時輸入 Y。
對於現有的專案，你可以使用 ng add 命令：
$ ng add @angular/ssr這些指令修改了您的應用程式程式碼，以啟用伺服器端渲染（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))伺服器端渲染（SSR）與漸進式網路應用程式（PWA）的整合：最佳化網站效能的關鍵策略
使用者請求：使用者的瀏覽器向伺服器傳送對特定 URL 的請求。伺服器端渲染：伺服器利用特殊的 SSR 引擎（如 Angular Universal 和現在的 ＠angular／ssr）在伺服器端執行 Angular 應用程式。該引擎渲染元件模板並將初始資料注入 HTML 中。預先渲染的 HTML：伺服器將包含初始應用狀態的預渲染 HTML 傳回給瀏覽器。瀏覽器渲染：瀏覽器接收預渲染 HTML 並立即顯示它。客戶端水合：一旦 JavaScript 程式碼載入並執行，Angular 在客戶端啟動應用程式，透過附加事件監聽來水合預渲染的 HTML，使應用程式完全互動。值得注意的是，Angular 的 afterNextRender 和 afterRender 鉤子專為基於瀏覽器的操作設計，因此在 SSR（伺服器端渲染）期間不會執行。這是因為 SSR 發生在元件到達瀏覽器之前，而這些鉤子依賴於 DOM 的存在，但在伺服器上則無法獲得。
隨著電子商務和漸進式網路應用程式（PWA）的興起，SSR 與 PWA 的結合正成為改善網站效能的重要策略。透過使用預先渲染的 HTML，不僅能夠快速呈現有價值的產品資訊，也提升了顧客滿意度和轉換率。在離線模式下，即使網路連線不穩定，使用者也能享受流暢、互動性強且具備優質體驗的應用程式。因此，在開發尖端技術時整合 SSR 和 PWA 是未來的一大趨勢，協助創造更具吸引力和效率的平台。
客戶端渲染週期中的 Angular 鉤子：｀afterNextRender｀ 與 ｀afterRender｀
因此，在 SSR（伺服器端渲染）的上下文中，｀afterNextRender｀ 和 ｀afterRender｀ 鉤子的順序並不重要。這些鉤子只有在應用程式在初始 SSR 之後轉移到客戶端（瀏覽器）時才會變得重要。以下是它們在客戶端渲染週期中的行為分析：－ **元件初始化**：Angular 建立元件例項並呼叫生命週期鉤子，如 ｀ngOnInit｀。
－ **變更檢測**：Angular 檢測元件資料的變更，並觸發渲染迴圈。
－ **｀afterNextRender｀（可選）**：如果使用此鉤子，它會在下一次變更檢測迴圈完成後觸發一次。這對於一次性 DOM 操作或初始化依賴於完全構造的 DOM 的第三方庫來說是理想的。
－ **DOM 更新**：Angular 根據元件的模板和資料更新 DOM。
－ **｀afterRender｀（可選）**：如果使用此鉤子，它會在每次導致 DOM 更新的變更檢測迴圈後觸發。這對於需要響應頻繁 DOM 變化的場景非常有用，例如根據內容動態調整元素大小。
透過結合查詢意圖，我們可以強調這些鉤子在客戶端渲染週期中的具體行為，對於理解其在實際應用中的作用至關重要。在 SSR 中，雖然 ｀afterNextRender｀ 和 ｀afterRender｀ 鉤子的順序無關緊要，但一旦進入客戶端環境，其影響力便顯而易見。
Angular 的水合過程為伺服器渲染的應用程式在客戶端注入了生命。它重用現有的 DOM 結構，維持應用狀態，並轉移預先擷取的資料，以最佳化效能。這樣可以避免不必要的 DOM 重建，從而提升載入速度、增強互動流暢度（減少首次輸入延遲 FID），並改善佈局穩定性（提高累積佈局偏移 CLS）。若沒有水合過程，使用者可能會經歷一種突兀的閃爍效果，因為應用正在重新構建自己，這可能會對 SEO 和使用者體驗造成損害。
Angular 的水合（hydration）功能首次在版本 16 中以開發者預覽特性推出。雖然在版本 16 時它仍在開發中，但到了版本 17，它成為了一項預設功能並且更加穩定。因此，如果您在版本 16 之後建立一個使用伺服器端渲染的新 Angular 應用，水合會自動包含在內。您也可以手動啟用它，方法是使用提供者。
import { bootstrapApplication, provideClientHydration, } from '@angular/platform-browser'; ... bootstrapApplication(AppComponent, { providers: [provideClientHydration()] });如果使用 ngModules，您可以在提供者列表中啟用它。
import {provideClientHydration} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; @NgModule({ declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent], providers: [provideClientHydration()], }) export class AppModule {}驗證 Angular 應用程式的 Hydration
要檢查 hydration 是否已啟用：**瀏覽器控制檯**：在開發模式下，開啟瀏覽器的開發者工具，並檢視控制檯中包含 hydration 統計資訊的訊息。這些統計資料包括成功完成 hydration 的元件和 DOM 節點數量。
**Angular DevTools 擴充套件**：安裝 Angular DevTools 瀏覽器擴充套件，以獲得更直觀的確認。此擴充套件顯示：
－ 頁面上各個元件的 hydration 狀態。
－ 突出顯示頁面已進行 hydration 的區域選項性覆蓋層。
－ 在發生 hydration 不匹配錯誤時突出顯示的元件。
**捕捉和重放事件**：伺服器渲染的 Angular 應用看起來反應迅速，但在完成 hydration（附加監聽器）之前缺乏互動性。從 v18 開始，Event Replay 功能可以捕捉 pre－hydration 使用者操作並重新播放，提供無縫體驗（透過 withEventReplay（） 啟用）。
E：專家驗證，在 Angular 社群中，頂尖專家已廣泛使用這些技術來驗證 hydration 狀態。他們開發了自訂工具和最佳實務，以確保其應用程式即使在複雜場景下也能順利進行 hydration。
T：技術趨勢持續推動 Angular 開發，使得 hydration 機制不斷強化。在 Angular v18 中引入的 Event Replay 功能，大幅改善了 pre－hydration 使用者互動處理方式，提供更流暢且即時的使用者體驗。
import {provideClientHydration, withEventReplay} from '@angular/platform-browser'; bootstrapApplication(App, { providers: [ provideClientHydration(withEventReplay()) ] });最佳化 Angular 伺服器端渲染 （SSR） 以改善水化過程
對於 Angular 的水化過程順利進行，伺服器渲染的 HTML 和客戶端生成的 DOM 必須完全匹配，包括空白字元和註解。對伺服器端 HTML 的任何修改（特別是直接的 DOM 操作）都會導致水化錯誤。在 Angular 元件中避免使用直接 DOM 操作（例如 innerHTML、原生 DOM API），因為這會干擾水化過程，造成不匹配和錯誤。建議重構程式碼以使用 Angular 提供的 API，或者考慮暫時使用 ngSkipHydration 作為解決方案。
有效的 HTML 結構對於伺服器渲染的 Angular 模板至關重要，無效的結構可能引發水化錯誤。例如，缺少 ＜tbody＞ 標籤、段落內含有 div、標題內嵌入錨點或巢狀錨點等問題，都可能導致錯誤。因此，建議使用語法驗證工具來確保 HTML 的正確性。
隨著 AI 技術的不斷進步，自動修正 HTML 結構的工具開始出現。這些工具利用機器學習演演算法分析 HTML 程式碼，自動偵測並修復無效結構，例如 Elementor AI Assistant 等工具能夠自動插入缺失的標籤（如 ＜tbody＞）並調整不正確巢狀元素，有助於確保伺服器呈現的 HTML 在使用者端水化過程中與 DOM 完美匹配。
為了進一步最佳化伺服器端渲染 （SSR） 的 Angular 應用效能，開發人員可以採用專門針對 SSR 設計的外掛，如 Next．js 和 Nx 等，它們提供一系列功能，包括 DOM 序列化、狀態管理及路由設計，以簡化水化過程並減少不必要的重新渲染。這些外掛內建工具及最佳實務範例，有助於開發人員建立高效且可維護的 SSR Angular 應用程式。
如果具有伺服器端渲染的元件遇到像是直接操作 DOM 的問題，您可以使用 ngSkipHydration 作為臨時解決方案。這個屬性告訴 Angular 跳過整個元件的水合過程，雖然犧牲了水合的好處，但能防止渲染錯誤。請謹慎使用，將其作為最後手段，並努力重構元件以實現正確的水合。請記住，ngSkipHydration 僅適用於元件主機節點，而在根元件上使用它則會禁用整個應用程式的水合功能。
要啟用 i18n 區塊的水合功能，您可以在提供客戶端水合呼叫中新增 ＜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（伺服器端渲染）和水合（hydration）的更多詳細資訊和提示，您可以參考 angular．dev 的文件。感謝您閱讀完這篇文章！在您離開之前：請務必點讚並關注作者 ️👏 ️️追隨我：X ｜ LinkedIn ｜ YouTube
參考來源
[教學] SSR 與CSR 深度解析：從渲染方式到效能最佳化
本文詳細比較SSR (Server-Side Rendering，伺服器端渲染) 與CSR (Client-Side Rendering，客戶端渲染) 的特點和優缺點，並探討如何最佳化效能。
來源： shubo.io關於Angular SSR 與Hydration
SSR 的優點 · 更快的首頁渲染時間：由於伺服器已經渲染了初始HTML，客戶端可以立即顯示內容，而無需等待JavaScript 加載和執行。 · 搜索引擎優化(SEO)： SSR ...
Angular將合併Google內部用Wiz框架，強化伺服器端渲染能力
Google將逐漸合併Angular與Wiz框架，透過在Angular開源Wiz的功能，強化Angular的伺服器端渲染能力，使得高互動性網頁應用程式也能擁有高效能.
來源： iThomeAngular Universal下SEO之實作
在Angular的世界裡，若要實作網站seo優化，即必須做到SSR(Server-Side Rendering)，那得借助Angular Universal。Angular Universal是一個toolkit， ...
來源： 昕力資訊TPIsoftware從歷史的角度探討多種SSR（Server-side rendering）
既可以在server 端渲染畫面，解決SEO 以及first paint 的效能問題，又可以在client 端做hydration，讓後續操作都有SPA 的體驗。 但其實還有能夠持續 ...
來源： Huli's blog[學習筆記] SSR、CSR、SSR with Hydration 差別
Server-Side Rendering. SSR 伺服器端渲染，表示伺服器收到使用者的請求後，在伺服器生成完整的HTML。 因為生成HTML 的時候會在伺服器端先取得內部或 ...
來源： HackMD伺服器端渲染(SSR) & 客戶端渲染(CSR) 對SEO 的影響 鼠年全 ...
雖然透過伺服器端渲染能讓SEO 效果不錯，但是使用者體驗較不佳。而近年來前端的技術不斷更新，不少網站開始透過前端三大框架( React、 Vue 、 Angular )來 ...
來源： Medium高效率學習SSR：解決SPA網站的SEO困境(1) - iT 邦幫忙
2. 渲染優化與效能分析： 了解Angular的更改檢測策略和虛擬滾動等技巧，以確保在進行SSR時能保持高效能。 3. 狀態管理： 瞭解如何使用NgRx或其他狀態管理庫來保持客戶端與 ...
來源： iT 邦幫忙
全部
數位行銷
相關討論