Shopify 的 Hydrogen 和 Oxygen：全面了解及使用指南

探索 Shopify 的 Hydrogen 和 Oxygen，掌握這兩項工具的所有資訊，讓您在電商平台的佈局與開發上無往不利。

這幾年隨著 Shopify 宣布他們對 headless 商務的投資，推出了 Hydrogen 與 Oxygen 這兩個新的 headless 框架。經過一年，隨著 Shopify Editions 的推出，Hydrogen 與 Oxygen 正式上線。伴隨而來的改進和更新，必將使這個框架成為大型品牌和有抱負的電子商務經理的首選。為了節省你的研究時間，我們匯總了目前所知的一切，包括更新內容以及這些對 headless 商務的意義。讓我們一起深入了解吧……

Hydrogen

Hydrogen 在 2021 年的 Shopify Unite 上宣布，是 Shopify 為開發者提供更簡單、更流暢的 headless 構建解決方案，並為顧客帶來更精彩體驗的回應。這個新的框架基於 React，允許快速構建個性化程度更高的自訂商店前端，且不影響網站性能。

這對商家有何幫助？

以往，你的電子商務開發團隊通常需要在超快的網站速度與精美的設計體驗之間做出取捨。但有了 Hydrogen，整合了包括 Nosto、Sanity、Contentful、Klaviyo、ReCharge、Okendo 和 Aloglia 等合作夥伴的技術，他們實現了卓越的網站性能與動態的使用者體驗。

使用 Hydrogen 的優勢：

• 入門模板。 使用 Hydrogen，開發團隊可以使用包括內建示範商店的入門套件，加快開發時間。
• 預建組件。 Hydrogen 提供了開發者的預建組件，使得與 API 的互動更加輕鬆。該框架還允許你在網站上重複使用預建的組件。
• 伺服器端渲染。 讓你的網站根據優先順序和使用者的導航漸進式加載，而不是一次性加載整個頁面，大大提升了網站速度。這是 headless 商務構建的優勢，不僅限於 Hydrogen。
• 預設 tail-wind。 允許你在網站的其他頁面（如博客頁面）上重複使用為特定目的（如產品詳細頁面）構建的組件，而不需更新 CSS 類。
• 為 SEO 成功而設計。 Hydrogen 包括預建的 SEO 優化功能，例如自動生成的網站地圖、每個頁面的元數據值以及可自訂的 robots.txt 文件。

潛在的缺點：

• 專為 Shopify API 設計。 Hydrogen 只為 Shopify API 開發。因此，其組件與 Shopify API 的個別部分緊密相關。此外，Hydrogen 只能用於構建 Shopify 商店前端，不支持其他自訂前端如移動應用。
• 開發者專注的工作流程。 Hydrogen 框架代碼密集，這意味著所有內容都需要由你的開發團隊或 Shopify Plus 代理商構建和維護。你的非開發團隊如行銷或產品，無法管理你網站的前端層。但這對任何 headless 構建來說都是如此。或者，你可以與 Shopify Plus 代理商合作，如我們，長期構建和管理你的 Hydrogen 商店，或提升你內部團隊的技能。你可以聯繫我們的Sopify專家團隊-免費諮詢
• 應用程式整合。 雖然 Shopify 已經準備了一些最受歡迎的應用程式，可以輕鬆整合到 Hydrogen 框架中，並且 Sanity 和 Contentful 作為首選 CMS 供應商（稍後會介紹），但如果你需要一個不兼容的 CMS 或應用程式，你將需要使用中介軟體進行連接。

Oxygen

簡單來說，Oxygen 是一個 Shopify 託管平台，可以讓你直接在 Shopify Plus 上託管 Hydrogen 商店。這對我們來說是個重大利好——通常，在 headless 模式下，你需要第三方平台來託管框架，但 Oxygen 消除了這個需求。你可以無縫地與 Shopify 的 Storefront API 整合，部署多個不同的 Hydrogen 商店來預覽、分享、測試和實驗。

對 Shopify 商家來說，Oxygen 能應對大流量並發的情況，如黑色星期五，不會崩潰，並且全球部署，提供出色的國際銷售體驗。

Shopify Hydrogen 推出

Shopify 在 2022 年 6 月正式推出 Hydrogen，並包括一些更新。以下是 Shopify 為其 Hydrogen 和 Oxygen 框架添加的新功能的完整概述：

CMS 首選合作夥伴

作為其正式的 Hydrogen 和 Oxygen 推出的一部分，Shopify 與 CMS 工具 Sanity 合作並投資。Sanity 是一個完全可自訂的 CMS 工具，可以由開發者和內容所有者從頭開始構建。對於這次合作，Sanity 團隊為 Shopify 的 Hydrogen 和 Oxygen 創建了一個獨特的內容應用工具。這將允許商家將其產品、變體和集合保留在 Shopify 上，並與其 CMS Sanity 前端同步。

我們很高興能與 Shopify 建立戰略合作夥伴關係，並且 Shopify 對 Sanity 進行了重大投資。我們正在共同使我們的 headless 產品的整合無縫化，為希望創造非凡體驗的品牌提供了無與倫比的機會。這是對我們技術進步的重要認可，也是對電子商務未來內容的戰略重要性的肯定。我們是 Shopify 唯一對內容平台進行投資的公司。

Magnus Hillestad
Sanity.io CEO & 共同創辦人

另一個 CMS 首選合作夥伴是 Contentful。Contentful 是當今增長最快的 CMS 技術之一，因此他們被選為 Hydrogen 和 Oxygen 的首發供應商並不意外。他們的 API 首先方法意味著品牌內容（無論是文章還是產品信息）可以無縫遍佈所有銷售產品的地方，並且實時準確更新。利用 Hydrogen 和 Oxygen 與首選合作夥伴如 Contentful，為任何品牌創建了一個強大的技術堆疊。

需要注意的是，其他 CMS 仍然可以實現到你的 headless 堆疊中。然而，目前這需要自訂整合，可能比使用 Sanity 或 Contentful 花費更多時間。

Shopify API 更新

隨著對 Hydrogen 的廣泛關注，Shopify 更新了他們的 API 以適應新的框架。到目前為止，商店前端 API 對伺服器端應用程式並不適用。對商家來說，這意味著你可能會達到速率限制，影響網站的整體功能。此更新允許伺服器代表商家進行請求，能夠處理許多使用者而不會達到限制，開啟了以前太過風險的伺服器端操作。

應用程式整合

在 2021 年，當 Shopify 首次宣布 Hydrogen 和 Oxygen 時，人們對應用程式整合的問題感到擔憂。Shopify 擁有龐大的應用程式商店，其中一些最受歡迎的應用程式是商家技術堆疊的核心部分。但如果這些應用程式沒有 API 整合，中介軟體看起來是唯一的選擇。Shopify 隨後宣布了一系列技術堆疊必備的應用程式，這些應用程式可以從一開始就整合到 Hydrogen 中，這意味著商家不必犧牲他們鐘愛的技術解決方案。

使用 Hydrogen 和 Recharge 為你的客戶創建獨特的訂閱體驗。我們很高興成為 Shopify headless 解決方案中第一個兼

為什麼選擇 Headless Shopify 而非 Liquid：關鍵優勢與應用

探索選擇 Headless Shopify 而非 Liquid 的常見使用情境和優勢，提升你的電子商務體驗，並改善靈活性與性能。

國際及複雜業務操作

多市場需求

• 使用單一代碼庫管理多個國際商店
• 複雜的國際商店管理需求
• 在不同地區運營多個 headless 商店

內容與體驗管理

進階內容需求

• 與 Contentful 或 Sanity 等強大 CMS 平台整合
• 複雜、動態內容管理需求
• 內容優先的商務模式

技術需求

性能優化

• 需要更好的頁面加載時間和性能指標
• 進階 SEO 功能和 URL 結構控制
• 自訂前端開發需求

商業情境

特定使用情境

渠道需求

• 全渠道購物體驗
• 數位接觸點整合
• 跨平台用戶體驗

自訂開發

• 需要無限制的 UX 設計
• 複雜的整合需求
• 獨特的商店前端體驗

請記住，headless 最適合具有特定技術需求的大型組織，並具備支持持續開發和維護的資源。

Shopify Headless 與 Liquid 的比較：

性能比較

功能比較

成本與開發