顯示內容導向的網頁應用程式

轉譯是指建立程式碼的過程,建立使用者可以透過瀏覽器進行互動的頁面。這包括準備內容、套用邏輯和處理,以及包括所有 UI 元素和顯示最終頁面所需的其他必要元件。內容導向的應用程式著重於快速載入、低延遲和快速轉譯。

伺服器端轉譯 (SSR)

伺服器端轉譯 (SSR) 涉及在伺服器上算繪網頁,然後將完全轉譯的 HTML 傳送至用戶端的瀏覽器,而不是透過 JavaScript 在用戶端算繪網頁。當使用者存取應用程式時,瀏覽器會向伺服器傳送要求。應用程式會在伺服器上處理要求,包括從資料庫或外部 API 收集資料,然後轉譯要求網頁的 HTML。接著,伺服器會將網頁完整轉譯的 HTML 傳回使用者的瀏覽器。使用者的瀏覽器收到 HTML 時,瀏覽器會載入所有必要的 JavaScript 檔案。

前往 web.dev 瞭解 HTML

使用 SSR 的好處包括快速初始載入速度、良好的搜尋引擎最佳化 (SEO) 效能、可靠性,以及良好的整體使用者體驗。不過,由於效能負擔和建構和維護支援 SSR 功能的應用程式所需的開發技能,與用戶端轉譯 (CSR) 相比,SSR 的實作可能更加複雜。SSR 特別適用於內容導向網頁應用程式、電子商務平台,以及任何需要良好 SEO 效能和快速初次回應速度的應用程式。

靜態網站產生 (SSG)

靜態網站產生 (SSG) 會在建構期間產生靜態 HTML 檔案,並將這些檔案提供給使用者,但並未進行伺服器端或用戶端轉譯。網路內容通常以 Markdown、JSON 或 YAML 等結構化格式編寫,並包含文字、圖片和其他資產。靜態網站產生器工具 (例如 HugoJekyll) 會處理內容並產生 HTML、CSS 和 JavaScript 檔案。靜態輸出內容是整個網站,這些靜態檔案會部署至網路伺服器、CDN 或代管服務。

如要進一步瞭解 CSSHTML,請前往 web.dev。

由於檔案是靜態的,因此可以快取並加快載入速度。針對不會經常變更的網頁應用程式,或是會透過定期網站建構而更新的網頁應用程式,SSG 是不錯的選擇。而不適合具有動態互動功能的網頁應用程式。

用戶端算繪 (CSR)

用戶端轉譯 (CSR) 是在用戶端的瀏覽器上,而不是在伺服器上。網頁應用程式通常會使用最少的 HTML 範本載入,接著系統會使用 JavaScript 以及伺服器或 API 的資料,動態操控內容。應用程式要求後,伺服器會傳送最小的 HTML 文件,內含轉譯頁面所需的基本結構和 JavaScript 程式碼。JavaScript 程式碼是在使用者的瀏覽器中執行。接著,程式碼會處理擷取的資料並產生內容,包括 CSS、HTML 和所有互動元素。接著,JavaScript 程式碼會回應使用者互動 (例如提交表單)。

CSR 的優點包括網頁轉換快速和回應式介面。與 SSR 相比,以客戶服務為基礎的網頁應用程式通常初始載入時間緩慢,因此可能會產生搜尋引擎最佳化 (SEO) 方面的挑戰。隨著 CSR 應用程式的成長,開發及維護時可能會變得相當複雜。