Liferay支援前後端分離開發(Decoupled Development)，採用核心引擎Client Extensions (客戶端擴充機制)。讓系統架構更為開發擴充更加彈型。
Liferay支援前後端分離
Liferay 主要透過以下三個維度，建構完整的分離開發環境。
1. 作為無頭資料來源 (Headless)
除了原有內建的 JSP 或 FreeMarker 套版引擎。Liferay將所有的核心功能（內容管理、使用者權限、商業邏輯）都包裝成 Headless APIs。
- 資料提供：後端只負責產出 JSON 格式的資料。
- 開發者體驗：前端工程師完全不需要安裝 Liferay 環境，只需呼叫 API 即可獲取內容。
2. 以Client Extensions作為載體
Liferay允許開發者將獨立開發的前端應用（如 React 專案）「註冊」到 Liferay 中：
- 獨立部署：前端代碼可以託管在 Liferay 外部（如 AWS S3, Azure Storage 或獨立伺服器）。
- 無縫嵌入：Liferay 透過 client-extension.yaml 設定檔，自動在頁面中注入 JS/CSS，並以 Web Components 的形式顯示。
3. 認證與授權的橋樑
Liferay 內建了 OAuth2 支援，Client Extensions 機制會自動處理 Token 的交換，讓前端應用能安全地代表當前登入使用者去請求 API。
採用的技術框架 (Technology Stack)
在這種架構下，技術框架依前後端，有多重選擇可用：
1. 前端開發框架 (Client-Side)
Liferay 對前端框架採 完全開放 (Framework Agnostic) 的態度。主流選擇包括：
- React / Vue / Angular：最常見的選擇。開發者可將其封裝為 Custom Elements。
- Vanilla JS / Web Components：最輕量化的選擇，具有最佳的跨平台相容性。
- Tailwind CSS / Bootstrap：用於樣式控制。
2. 後端的支援技術 (Platform-Side)
- RESTful APIs (OpenAPI 規範)：最主要的通訊標準。Liferay 提供 API Explorer (Swagger UI) 供開發者測試。
- GraphQL：前端需要高度靈活的資料讀取（減少 Request 次數），Liferay 也完整支援 GraphQL 查詢。
- Liferay JS SDK / Clay UI：Liferay 提供了一些工具庫，讓前端能更輕鬆地呼叫 Portal 功能或維持介面一致性。
3. 核心配置與部署工具
- YAML (client-extension.yaml)：用來定義擴充功能的屬性、URL 與類型。
- Liferay Workspace：開發者的工作區，支援 Gradle 或 Maven 構建腳本來自動化處理 Client Extensions。
- Node.js & NPM：前端專案的標準構建工具，Liferay 的構建流程可與其高度整合。