預先建置和上線最佳做法檢查清單

歡迎踏上您的 Composable Storefront 之旅！此檢查清單總結了可能對專案時程表產生重大影響的關鍵要點。專注於這四個最佳做法，您就能更胸有成竹地駕馭複雜性，建置、推出、監測成功的 Progressive Web App (PWA) Kit 網站，並避開常見的陷阱。使用這份檢查清單來規劃順利且成功的部署吧！

在自訂方面，您處於主導地位。您必須瞭解所需的自訂範圍，以滿足您的業務需求。別忘了，自訂程度高的網站需要更多的心力，就像這些例子描述的那樣。

• 熟悉我們 Retail React App 中提供的設計和功能。您需要建構 Retail React App 中不提供的任何功能。
• 盡量使用現有的 React 元件。PWA Kit 使用 React，因此您可以存取 React 元件生態系統。如果您正在進行自訂操作，請查看是否有相應的 Chakra 元件可用。如果沒有，請尋找開源版本。如果沒有開源版本，請自行建構元件。
• 驗證我們的 API 是否支援您所需的自訂功能並傳回您需要的資料。如果我們的 API 不支援，您可以：
  • 建立自訂 API 來傳回資料；或者
  • 使用 Hook 擴充 API 回應
• 確認您網站的插件和整合是否與無頭式實作相容。若要在 PWA Kit 網站中使用它們，您可以使用自訂 API 或 Hook 來公開它們的功能。

• 成功技巧
• 開始使用 B2C Commerce API
• 自訂 API
• 使用 Hook 進行自訂
• B2C 開發人員文件資源

按照以下步驟為穩定且可擴縮的網站奠定堅實的基礎。

• 確定您要擁有多少個生產 Managed Runtime (MRT) 環境。擁有更多環境可以為您提供更多控制權。但是，您擁有的環境越多，管理這些環境在操作上就越複雜。例如，如果您有五個品牌都是從同一個 MRT 環境提供的，您總是需要一起更新它們。擁有較少的環境意味著操作開銷較少。請參閱 Managed Runtime 概觀。
• 決定要使用我們的嵌入式內容傳遞網路 (eCDN) 還是第三方 CDN。請參閱使用第三方 CDN 的時機。如果決定使用第三方 CDN，請參閱供應商的文件瞭解詳細資訊。
• 確定您的 URL 策略。大多數客戶選擇保留其現有的 URL。制定計畫，將任何在新網站上不存在的現有 URL 進行重新導向。註冊 Google Search Console 工具或其他排名工具，監控您的部署對 SEO 排名的影響。請參閱路由。
• 確定混合式 (分階段無頭式) 部署的目標、範圍和時程。請記住，網站處於混合模式的時間越長，您花在所涉及的操作複雜性上的時間就越多。設定轉換為 100% Composable 網站的截止日期。請參閱分階段無頭式部署。

應用這些技術來最佳化網站的效率和使用者體驗。

• 透過將 ?__server_only 參數附加到 URL，來檢查入口頁面 (首頁、類別清單頁面、產品清單頁面、產品詳細資料頁面) 的伺服器端轉譯效果。確認您的伺服器轉譯頁面具有足夠的資料供檢索器使用，並且伺服器與用戶端之間的版面配置差異很小 (最好是無差異)。這有助於提高您的 SEO 排名，確認您的入口頁面可以在行動裝置上快速載入，並改善購物者體驗。
• 使用 Lighthouse CI 設定效能測試。在實作過程中就開始效能測試。這樣可以讓您在 PWA Kit 網站上線之前，就早早發現並修正任何效能下降問題 (與目前網站相比)。
• 將程式碼持續部署至非生產用 MRT 環境。從開發工作的早期階段，就開始測試部署到 MRT 的程式碼，以確認您的網站功能如預期般運作。這樣，您就可以避免日後昂貴的重工。請參閱自動化使用者。

計劃使用這些工具來持續監測您的網站效能。此外，還要根據預期結果，驗證這些工具產生的資料是否正確。

• 透過 Log Center，您可以查看錯誤和指標。設定通知，這樣當您的網店運作異常時，您可以及時得知並進行調查。
• 利用使用中資料來監測您網站的指標。這有助於分析購物者行為以增強購物者體驗，並最佳化產品供應以提升買氣。
• B2C Commerce Reports & Dashboards 提供的資料可以用來追蹤長期趨勢，並根據 B2C Commerce 資料做出更明智的業務決策。

查看其餘建議的開發人員工作流程，以在 Composable Storefront 上建置網站。請參閱開始使用 Composable Storefront。