轉譯
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 的架構指南。