轉譯

PWA Kit 架構建置在 React 的轉譯系統上，添加對使用者和開發人員雙方都有益處的功能。此架構指南進一步仔細探討 PWA Kit 轉譯系統的這些功能，以及其使用方式。我們會特別著重在 PWA Kit React SDK 和 Retail React App 相互合作、以驅動每個功能的部分。

若要建立好感度高的第一印象，使用者從您的網店要求的第一個頁面必須盡快載入。但第一個頁面要求往往會比接下來的頁面要求需要更長的轉譯時間。頁面上的每個元件都必須轉譯，而不只是需要更新的元件。為了重要的第一個頁面載入，我們使用了伺服器端轉譯，因為這提供了最佳化成效的強力工具：快取。

Managed Runtime 的 CDN 快取可儲存先前轉譯過的頁面版本，立刻向使用者提供。沒有比已經完成的轉譯更快的轉譯了！

若要瞭解如何透過快取提升效能，請參閱我們的最大化您的快取命中率指南。

應用程式伺服器

伺服器端轉譯的主要程式碼會在應用程式伺服器內執行。應用程式伺服器是 Express 應用程式，它會處理傳入的 HTTP 要求，並呼叫一個名為 render 的函式作為回應。應用程式伺服器在 app/ssr.js 中定義。

render 函式從 PWA Kit React SDK 中匯入：Helper 函式 (也來自 SDK) 會建立 Express 執行個體並附加 render 函式，作為所有 GET 要求的 Express 路由方法。

在第一個頁面載入後，轉譯責任就透過稱為 Hydration 的流程，從伺服器端轉移到用戶端。在 Hydration 流程中，您的 React 應用程式會開始在使用者的瀏覽器上執行。事件處理常式會立即行動來回應使用者輸入。頁面元件會根據需要和用戶端轉譯中的使用者輸入，進行轉譯。這種更高效、使用者導向的轉譯實現了 React 著名的流暢體驗。

PWA Kit 架構在幕後運作，讓從伺服器端轉譯到用戶端轉譯的轉換盡可能順暢。舉例來說，您的所有元件都以所需的 Props 預先載入，包括屬於 API 要求結果的 Props。在伺服器端轉譯期間，這些 Props 會經過序列化並嵌入頁面來源，以便在 Hydration 過程中使用。

同構程式碼

因為相同的程式碼在伺服器端和用戶端環境均會轉譯，因此必須為同構。同構 JavaScript (又稱為通用 JavaScript) 是不仰賴直接存取任何僅在單一 Runtime 環境中可用的程式碼架構的程式碼。當架構無法同時適用於兩邊環境時，您必須適當地增加條件式程式碼，確保其在當前環境中可用。

以下表格列出了一些必須使用條件式程式碼的常用架構：

架構	描述	可用性
`window.location`	來自瀏覽器的當前 URL	僅在用戶端
`req`	來自 Express 的 HTTP 要求	僅在伺服器端
`res`	來自 Express 的 HTTP 回應	僅在伺服器端

要確定轉譯發生在用戶端還是伺服器端，請檢查 window 物件是否存在。以下範例使用這項技巧，來只在用戶端轉譯價格：

部分內容 (如個人化或經常變更的內容) 必須只在用戶端轉譯，才能獲得最佳效能。如需更多資訊，請參閱我們的最大化您的快取命中率指南。

查看 app/ssr.js 中的原始程式碼，深入瞭解轉譯。其包含了重要的應用程式伺服器設定，例如頁面的預設快取存留期。

當您閱讀 PWA Kit 文件時，別錯過 Retail React App 的架構指南。