轉譯

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 物件是否存在。以下範例使用這項技巧，來只在用戶端轉譯價格：

PWA Kit 轉譯系統會針對每個頁面提供一個關聯 ID (採用 UUID v4 格式)。關聯 ID 可用來將 PWA Kit 的要求和回應與其他系統 (例如 B2C Commerce API) 中的活動進行比對。

在伺服器端，關聯 ID 會設定為 Managed Runtime 基礎架構 API 閘道中 requestId 的值。在用戶端，每次頁面瀏覽都會使用內建 Web Crypto API 的 randomUUID() 方法，產生一個 UUID。

若要取得 PWA Kit 應用程式的關聯 ID，請匯入 useCorrelationId Hook：

您可以經由 correlation-x 標頭，將來自 PWA Kit 的關聯 ID 轉送到 B2C Commerce API。在回應中，轉送的關聯 ID 於 x-correlation-id 標頭中傳回，並與來自 API 的內部 ID 結合。

若要深入瞭解如何使用關聯 ID 搭配 B2C Commerce API，請參閱關於 B2C Commerce API。

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

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