Shopify如何在商店應用上實現伺服器驅動的UI架構？

架構
伺服器端的架構由模板處理層、編排器、資料載入層和商店伺服器（以前稱為 Arrive-Server）GraphQL 層組成。 

以下是每一層的細分：

• 模板處理層：包含一個硬編碼模板，它描述了商店預設模板中包含的部分型別。該層還具有來自商家的自定義項，這些自定義項指定了他們希望在其商店中可見的內容。模板後設資料讀取器從商戶資料庫中讀取靜態模板和商戶特定模板，並返回要呈現的部分。
• 資料載入層SectionDataLoader：在提供所需的部分後，為每個要呈現的部分建立一個物件。該SectionDataLoader物件包含用於獲取部分資料的所有邏輯。 
• GraphQL Layer : 將SectionDataLoader物件對映到相應的 GraphQL 型別，併為 Shop App 解析型別和欄位。 
• 編排層：編排模板處理層、資料載入層和 GraphQL 層之間的整個流程，併為每一層傳遞預期的資訊。
• 在伺服器端，GraphQL API 允許執行商店部分查詢，這會返回 shop 商店的部分列表。每個部分都是從基本部分型別構建的，並且一個部分可以進一步定義為ProductsSection或CollectionsSection。該ProductsSection型別用於返回產品列表的部分，例如“所有產品”、“暢銷產品”或“趨勢”。另一方面，CollectionsSectiontype 用於返回集合列表的部分。還定義了具有可配置大小屬性的各種佈局型別，例如 GridLayout 和 ShelfLayout。網格佈局支援具有大型產品塊的 2x2 網格或具有中型產品塊的 3x3 網格。貨架佈局允許使用者向右滾動，並支援小型或大型產品塊。在部分上擁有此佈局屬性使我們能夠輕鬆建立新的方式來顯示實體，而無需建立全新的部分。

元件的渲染

我們首先有一個名為ServerDrivenStoreScreen的頂層元件，當買家想檢視商家的商店時，他們會被導航到這個元件。對於商店螢幕中的每個部分（"收藏"、"最佳銷售"、"所有產品"），我們渲染StoreSectionContainer元件。在渲染這個元件的同時，ServerDrivenStoreScreen還渲染了商店的標題、導航欄和產品搜尋欄。

然後，StoreSectionContainer根據提供給它的部分型別來決定渲染哪個部分。如果部分型別是產品，那麼StoreSectionContainer將渲染ProductSection元件。否則，如果部分型別是一個集合，那麼StoreSectionContainer將呈現CollectionsSection元件。ProductsSection元件將根據從伺服器傳來的顯示型別渲染ProductShelf或ProductGrid元件。ProductsSection元件還為ProductGrid / ProductShelf元件提供回撥函式，當一個產品被按下時，它將導航到ProductDetails頁面。

CollectionsSection元件渲染了一個CollectionShelf元件來顯示產品的集合。該元件還為CollectionShelf元件提供回撥函式，當按下一個集合時，該元件將導航到CollectionDetails頁面。ProductGrid元件顯示產品的網格，同時也支援大尺寸和小尺寸的顯示。最後，ProductShelf和CollectionShelf元件都渲染了一個可以向右滾動的產品或收藏品的貨架。

為了獲得這些元件所需的所有資料，將進行兩個主要的GraphQL呼叫。第一個GraphQL呼叫是一個StoreSections查詢，獲取StoreSections資料，用於渲染商店的所有部分。這個呼叫是在ServerDrivenStoreScreen中使用useStoreSections鉤子進行的，返回的商店部分資料被傳遞到各個子元件中。

第二個GraphQL呼叫是一個現有的ShopInfo查詢，它預先從快取中獲取資料以填充商店的標題。這個呼叫是在ServerDrivenStoreScreen中使用useStoreInformation鉤子進行的，StoreHeader元件在ServerDrivenStoreScreen中被渲染。