本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
使用微型前端撰寫頁面和檢視
您可以使用用戶端構成、邊緣端構成和伺服器端構成來撰寫應用程式的檢視。組成模式在必要的團隊技能，容錯能力，性能和緩存行為方面具有不同的特徵。
下圖顯示構成如何發生在微型前端架構的用戶端、邊緣端和伺服器端層。
客戶端，邊緣端和服務器端層將在以下各節中討論。
用戶端合成
在用戶端 (瀏覽器或行動網頁檢視) 上以文件物件模型 (DOM) 片段的形式動態載入和附加微前端。微型前端成品 (例如 JavaScript 或 CSS 檔案) 可從內容傳遞網路 (CDN) 載入，以減少延遲。用戶端構成需要下列項目：
-
擁有和維護 shell 應用程序或微型前端框架的團隊，以便在瀏覽器中的運行時發現，加載和渲染微型前端組件
-
HTML、CSS 和前端技術的高技能水平，以及 JavaScript對瀏覽器環境的深入了解
-
優化頁面中 JavaScript 加載的量，以及避免全局命名空間衝突的紀律
下圖顯示無伺服器用戶端組成的範例 AWS 架構。
客戶端構成通過 shell 應用程序發生在瀏覽器環境中。此圖表顯示下列詳細資訊：
-
殼層應用程式載入後，它會向 Amazon 發出初始請求，以探索 CloudFront要透過資訊清單端點載入的微前端。
-
資訊清單包含每個微型前端的相關資訊 (例如名稱、URL、版本和後援行為)。這些清單由微前端探索服務提供服務。在圖中，此探索服務是由 Amazon API Gateway、 AWS Lambda 函數和 Amazon DynamoDB 表示。shell 應用程序使用清單信息來請求單個微前端在給定的佈局中構成頁面。
-
每個微型前端包都是由靜態文件（例如 JavaScript CSS 和 HTML）組成。這些文件託管在亞馬遜簡單存儲服務（Amazon S3）存儲桶中，並通過提供 CloudFront。
-
團隊可以部署新版本的微前端，並使用他們擁有的部署管道來更新資訊清單資訊。
邊緣側組成
使用邊緣端包含 (ESI) 或伺服器端包含 (SSI) 的外包技術，例如原始伺服器前方的某些 CDN 和 Proxy 所支援的伺服器端包含 (SSI) 來撰寫網頁，然後再透過網路傳送至用戶端。ESI 需要下列條件：
-
具有 ESI 功能的 CDN，或伺服器端微前端前端的代理部署。代理實現，例如哈代理，清漆和 NGINX 支持 SSI。
-
瞭解 ESI 和 SSI 實作的使用與限制。
開始新應用程式的團隊通常不會為其構成模式選擇邊緣構圖。但是，此模式可能會為依賴於包含的舊版應用程式提供途徑。
伺服器端合成
使用原始伺服器在邊緣快取頁面之前撰寫頁面。這可以通過傳統技術來完成，例如 PHP，雅加達服務器頁面（JSP）或模板庫，通過包括微前端的片段來構成頁面。您也可以使用在伺服器上執行的 JavaScript 架構，例如 Next.js，透過伺服器端轉譯 (SSR) 在伺服器上撰寫網頁。
在服務器上呈現頁面後，可以在 CDN 上緩存它們以減少延遲。部署新版微前端時，必須重新轉譯頁面，且必須更新快取，才能將最新版本提供給客戶。
伺服器端構成需要深入瞭解伺服器環境，以建立用於部署、探索伺服器端微前端和快取管理的模式。
下圖顯示了服務器端組成。
此圖表包含下列元件與程序：
-
Amazon CloudFront 提供了一個獨特的入口點的應用程序。該發行版有兩個來源：第一個用於靜態文件，第二個用於 UI 作曲家。
-
靜態檔案託管在 Amazon S3 儲存貯體中。它們由瀏覽器和 UI 撰寫器用於 HTML 模板。
-
UI 撰寫器會在中的容器叢集上執行AWS Fargate。透過容器化解決方案，您可以視需要使用串流功能和多執行緒轉譯。
-
參數存放區 (的 AWS Systems Manager功能) 可做為基本的微前端探索系統使用。此功能提供 UI 撰寫器用來擷取要使用的微型前端端點的索引鍵值存放區。
-
通知微型前端會將最佳化的 JavaScript 服務包存放在 S3 儲存貯體中。這會呈現在用戶端上，因為它必須對使用者互動做出反應。
-
評論微型前端由 Lambda 函數組成，而使用者評論則儲存在 DynamoDB 中。評論微前端完全呈現在服務器端，並輸出一個 HTML 片段。
-
產品詳細信息微前端是使用的低代碼微前端。AWS Step FunctionsExpress 工作流程可以同步呼叫，它包含用於呈現 HTML 片段和快取層的邏輯。
如需伺服器端構成的詳細資訊，請參閱部落格文章伺服器端轉譯微前端 —
