SPA 簡介和逐步解說

最後更新： 2025年1月14日

建立對象：

  • 管理員
  • 開發人員

單頁應用程式 (SPA) 可為網站使用者提供引人入勝的體驗。開發人員希望能使用 SPA 框架建立網站，而作者則想在 AEM 中為使用這類框架建立網站，順暢地編輯內容。

SPA 編輯器提供了一個全面的解決方案來支援在 AEM 中使用 SPA。本文章逐步解說如何使用基本 SPA 應用程式進行編寫，並說明它與基礎 AEM SPA 編輯器的關係。

IMPORTANT
新專案中已棄用 SPA 編輯器。Adobe 仍支援現有專案使用此編輯器，但不應用於新專案。目前，AEM 中用於管理 Headless 內容的首選編輯器為：

簡介

文章目標

本文章介紹 SPA 的基本概念，然後透過使用簡單 SPA 應用程式來示範基本的內容編輯，逐步引導讀者了解 SPA 編輯器。然後深入探討頁面的結構以及 SPA 應用程式如何與 AEM SPA 編輯器相關及互動。

此簡介和逐步解說的目的是向 AEM 開發人員示範 SPA 為何相關、其一般運作方式、AEM SPA 編輯器如何處理 SPA，以及它與標準 AEM 應用程式有何不同。

要求

逐步解說是以標準 AEM 功能和範例 WKND SPA 專案應用程式為基礎。若要依此逐步解說操作，您必須具備以下項目。

CAUTION
本文件使用 WKND SPA 專案應用程式僅用於示範目的。請勿用於任何專案工作。
TIP
任何 AEM 專案都應使用 AEM 專案原型，它支援使用 React 或 Angular 的 SPA 專案並使用 SPA SDK。

什麼是 SPA？

單頁應用程式 (SPA) 與傳統頁面的不同之處在於它是在用戶端呈現並且主要由 JavaScript 驅動，依賴 Ajax 呼叫來載入資料和動態更新頁面。在單頁載入時一次擷取大部分或所有內容，並根據使用者與頁面的互動，視需要非同步載入其他資源。

這減少了頁面重新整理的需要，讓使用者擁有順暢、快速且像是使用原生應用程式的體驗。

AEM SPA 編輯器允許前端開發人員建立可整合到 AEM 網站的 SPA，從而允許內容作者輕鬆編輯 SPA 內容，像編輯任何其他 AEM 內容一樣輕鬆。

為什麼是 SPA？

由於 SPA 的運作本質，SPA 可以更流暢、快速且像是原生應用程式，不僅對網頁訪客而且對行銷人員和開發人員來說都是一種極具吸引力的體驗。

SPA 優點

訪客

  • 訪客在與內容互動時希望獲得類似原生的體驗。
  • 有明確資料代表頁面生成越快，就越可能發生轉換。

行銷人員

  • 行銷人員希望提供豐富的、類似原生的體驗，以吸引訪客與內容完全互動。
  • 個人化可以使這些體驗更具吸引力。

開發人員

  • 開發人員希望清楚分開內容和展示之間的考量點。
  • 清楚分開使系統更具可擴展性，並允許獨立的前端開發。

SPA 如何運作？

SPA 背後的主要概念是減少對伺服器呼叫和依賴，以儘量減少伺服器延遲造成的作業耽擱，從而使 SPA 接近原生應用程式的回應能力。

在傳統的循序網頁中，僅載入即時頁面所需的資料。這表示當訪客移至另一個頁面時，將呼叫伺服器以取得額外資源。當訪客與頁面上的元素互動時，可能需要額外的呼叫。由於頁面必須趕上訪客的要求，因此這些多次呼叫可能會讓人產生延滯或延遲的感覺。

循序體驗與流暢體驗

為了獲得更流暢的體驗，接近訪客對行動原生應用程式的期望，SPA 會在第一次載入時為訪客載入所有必要的資料。雖然這在開始時可能需要較長的時間，但之後就不需要額外呼叫伺服器。

透過在用戶端呈現，頁面元素回應更快，且訪客與頁面的互動是即時的。任何可能需要的額外資料會以非同步方式呼叫，以儘量提高頁面速度。

TIP
如需 SPA 如何在 AEM 中運作的詳細技術資訊，請參閱文章：
如需詳細了解 SPA 編輯器的設計、架構和技術工作流程，請參閱文章：

SPA 的內容編輯體驗

當建置 SPA 以使用 AEM SPA 編輯器時，內容作者在編輯和建立內容時不會注意到任何差異。可以使用常用的 AEM 功能，作者的工作流程無需變更。

  1. 在 AEM 編輯 WKND SPA 專案應用程式。

    http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html

    WKND SPA 專案首頁

  2. 選取文字元件，並注意工具列看起來像任何其他元件。選取​ 編輯。

    選取文字元件

  3. 在 AEM 中正常編輯內容，並注意變更已保留。

    編輯文字

  4. 使用資產瀏覽器將新影像拖放到影像元件中。

    放置影像資產

  5. 變更已保留。

    影像已保留

如同任何非 SPA AEM 應用程式，支援其他編寫工具，例如在頁面上拖放其他元件、重新排列元件和修改版面。

NOTE
SPA 編輯器不會修改應用程式的 DOM。SPA 自行負責 DOM。
若要了解其運作原理，請繼續閱讀本文的下一章節：SPA 應用程式和 AEM SPA 編輯器。

SPA 應用程式和 AEM SPA 編輯器

體驗SPA如何為使用者運作，然後檢查SPA頁面，有助於更清楚瞭解SAP應用程式如何在AEM中搭配SPA編輯器運作。

使用 SPA 應用程式

  1. 將 WKND SPA 專案應用程式載入到發佈伺服器，或使用頁面編輯器​ 頁面資訊 ​選單的​ 如發佈時檢視 ​選項。

    http://<host>:<port>/content/wknd-spa-react/us/en/home.html

    預覽 WKND SPA 專案首頁

    請注意頁面結構，包括導覽到子頁面、選單和文章卡片。

  2. 使用選單導覽到子頁面，可以看到頁面立即載入，無需重新整理。

    WKND SPA 專案頁面 1

  3. 開啟瀏覽器內建的開發人員工具，並在您瀏覽子頁面時監控網路活動。

    網路活動

    當您在應用程式中從一個頁面移動到另一個頁面時，流量非常小。該頁面不會重新載入，只會要求新影像。

    SPA 完全在用戶端管理內容和路由。

那麼如果在子頁面間瀏覽時頁面沒有重新載入，它是如何載入？

下一章節載入 SPA 應用程式，將深入探討 SPA 載入機制，以及如何以同步和非同步方式載入內容。

載入 SPA 應用程式

  1. 如果尚未載入，請將 WKND SPA 專案應用程式載入至發佈伺服器，或使用頁面編輯器​ 頁面資訊 ​選單的​ 如發佈時檢視 ​選項。

    http://<host>:<port>/content/wknd-spa-react/us/en/home.html

    WKND SPA 專案預覽

  2. 使用瀏覽器的內建工具檢視頁面的來源。

  3. 來源的內容有限。

    • 頁面的內文中沒有任何內容。它主要由樣式表和對各種指令碼 (例如 clientlib-react.min.js) 的呼叫所組成。
    • 這些指令碼是此應用程式的主要驅動程式，負責呈現所有內容。

  4. 使用瀏覽器的內建工具檢查頁面。查看完全載入之 DOM 的內容。

    WKND SPA 專案的 DOM

  5. 切換到檢查器中的「網路」索引標籤並重新載入頁面。

    忽略影像要求，注意為頁面載入的主要資源是頁面本身、CSS、React JavaScript、其相依性，以及頁面的 JSON 資料。

    WKND SPA 專案網路活動

  6. 在新索引標籤中載入 home.model.json。

    http://<host>:<port>/content/wknd-spa-react/us/en/home.model.json

    WKND SPA 專案首頁的 JSON

    AEM SPA 編輯器使用 AEM 內容服務將頁面的全部內容以 JSON 模型傳遞。

    透過實作特定的介面，Sling 模型為 SPA 提供必要的資訊。JSON 資料的傳遞工作向下委派給每個元件 (從頁面到段落到元件等)。

    每個元件選擇它公開的內容以及呈現方式 (伺服器端使用 HTL 或用戶端使用 React 或 Angular)。本文章重點介紹使用 React 進行用戶端呈現。

  7. 此模型還可以將頁面群組在一起，以便同步載入，從而減少所需的頁面重新載入次數。

    在 WKND SPA 專案應用程式範例中，home、page-1、page-2 和 page-3 頁面是同步載入的，因為訪客通常會造訪所有這些頁面。

    此行為不是強制性的，而且完全可定義的。

    WKND SPA 專案項目群組

  8. 若要檢視此行為差異，請重新載入 home 頁面並清除檢查器的網路活動。導覽到頁面選單中的 page-1，可以看到唯一的網路活動是要求 page-1 的影像。page-1 本身不需要載入。

    WKND SPA 專案頁面 1 網路活動