Shopify 的氫氣和氧氣 – 您應該掌握的一切

去年，Shopify 透過推出新的無頭框架 Hydrogen 和 Oxygen 公開了他們對無頭商務的承諾。近一年後，隨著 Shopify 版本的推出，Hydrogen & Oxygen 已正式推出。除此之外，還有一定會吸引知名品牌和有進取心的電子商務管理員的增強和更新。為了讓您免去研究的麻煩，我們整理了迄今為止可用的所有詳細資訊、更新以及對無頭商務的影響。那麼，讓我們深入研究一下…

已經熟悉的內容

氫

Hydrogen 在 Shopify Unite 2021 上亮相，代表了 Shopify 的解決方案，為開發人員提供更簡單、更時尚、無頭的設置，並為操縱 Shopify 商店的客戶提供令人興奮的購物體驗。 Shopify 的新穎框架採用基於 React 的結構，有助於客製化店面，並具有擴展的客製化前景，可以在不影響網站效率的情況下快速建立。

這對商家有何幫助？

以前，您的電子商務開發團隊經常面臨卓越的網站速度和精美設計的體驗之間的兩難。儘管如此，隨著 Hydrogen 合併了一系列技術，包括我們的合作夥伴：Nosto、Sanity、Contentful、Klaviyo、ReCharge、Okendo 和 Aloglia，他們為實現無與倫比的網站效能和生動的用戶體驗鋪平了道路。

我們很高興能夠與 Hydrogen 合作，為希望轉向由 Shopify 和 Hydrogen 堆疊提供支援的無頭解決方案的客戶提供頂級體驗和協助。我們致力於協助商家大規模建構真實且相關的線上商務體驗。

吉姆·洛夫格倫
諾斯托首席執行官

利用氫的優點：

• 初始模板。 借助 Hydrogen，開發團隊可以使用入門套件，其中包含預先組裝的演示商店，從而加快了開發週期。
• 預先設計的組件。 Hydrogen 包含為開發人員預先設計的元件，促進與 API 的無縫互動。該框架還提供了利用其預設順風在整個站點中重複使用組件的能力。
• 伺服器端渲染。 使您的網站能夠根據優先順序和使用者的瀏覽操作逐步加載，而不是一次加載整個頁面，從而顯著提高網站速度**. 這是無頭商業結構的好處，且不限於氫。  
• 預設順風。允許在網站的不同部分（例如部落格頁面）重複使用專門建立的元件（例如 PDP），而無需更新 CSS 類別。
• 為SEO勝利做準備。 Hydrogen 需要預先建立的 SEO 增強功能，例如自動產生的網站地圖、所有頁面的元資料值以及適應性強的 robots.txt 檔案。

可能的限制**：**

• 專為 Shopify API 量身打造。 Hydrogen 專為 Shopify API 量身打造。因此，它的元件與 Shopify API 的不同部分密切相關。此外，Hydrogen只能用於建立Shopify店面，缺乏對行動應用程式等其他客製化店面的支援。
• 面向開發人員的工作流程。 Hydrogen 框架充滿了程式碼，這意味著一切都必須由您的開發團隊或 Shopify Plus 組織組成和維護。您的非開發部門（例如行銷或產品）將沒有能力監督網站的前端層。儘管如此，這種情況在任何無頭設定中都很常見。或者，您可以與像我們這樣的 Shopify Plus 組織合作，他們可以長期建立和管理您的 Hydrogen 商店或增強您內部團隊的技能。 請隨時與我們的團隊聯繫以更深入地研究這一點。
• 應用程式整合。 儘管 Shopify 擁有一些他們最喜歡的應用程序，可以直接與 Hydrogen 框架集成，並且 Sanity 和 Contentful 作為他們的首選 CMS 選擇（我們稍後將深入研究），但如果您想要不相容的 CMS 或應用程序，您需要使用中間件獨立管理連結。

氧

簡而言之 – Oxygen 是一個 Shopify 主機平台，授權您直接在 Shopify Plus 上託管 Hydrogen 店面。這得到了我們的肯定——通常情況下，對於無頭系統，需要第三方平台來託管框架，但 Oxygen 不再需要這種必要性。相反，您可以與 Shopify 的 Storefront API 無縫同步，傳播多個不同的 Hydrogen 店面以進行預覽、共享、測試和實驗。

關於它對Shopify商家的適應性？ Oxygen 的設計能夠承受黑色星期五等重大活動的大量並發流量，而不會出現失敗的風險，並且在全球範圍內部署時，它可以提供出色的國際銷售體驗。

2022年有什麼新鮮事？

Shopify 於 2022 年 6 月正式推出 Hydrogen，並進行了多項更新。以下是 Shopify 引入並整合到其氫和氧框架中的所有新功能的全面概述：

CMS 青睞的合作者

作為其授權的氫和氧發射的一部分， Shopify與CMS工具Sanity合作並投資。 Sanity 是一款完全適應性強的 CMS 工具，開發人員和內容擁有者都可以從頭開始構思。對於此次合作，Sanity 的人員開發了一款針對 Shopify 的 Hydrogen & Oxygen 客製化的內容應用工具。這使得商家能夠在 Shopify 上維護他們的產品、變體和產品系列，並且他們的前端與 Sanity 的 CMS 相協調。

我們很高興地宣布，我們已與 Shopify 建立了策略合作夥伴關係，並且 Shopify 已對 Sanity 進行了大量投資。我們正在共同簡化無頭產品之間的集成，為渴望建立卓越體驗的品牌創造無與倫比的潛力。這證明了我們技術的進步以及內容對電子商務未來的策略重要性。我們是 Shopify 在內容平台上進行的唯一投資。

馬格努斯·希勒斯塔
Sanity.io 執行長兼聯合創辦人

Contentful 也被指定為最受歡迎的 CMS 合作者。 Contentful 是目前發展最快的 CMS 技術之一，因此他們被選為氫和氧初步發布的首選提供者也就不足為奇了。他們的 API 優先方法意味著品牌內容，無論是文章還是產品詳細訊息，都可以在您行銷產品的任何地方傳播、準確地即時翻譯和刷新。與首選伴侶（例如 Contentful）一起使用氫和氧

適合任何品牌的強大產品組合。

值得一提的是，替代 CMS 選項仍然可以整合到您的無頭堆疊中。但是，目前需要進行自訂集成，與使用 Sanity 或 Contentful 相比，這可能會消耗更多時間。

Shopify API 更新

隨著圍繞 Hydrogen 的大肆宣傳，Shopify 增強了其 API 以適應新框架。到目前為止，店面 API 不適合伺服器端應用程式。對於商家來說，這可能會導致達到速率限制，從而影響其網站的整體功能。此更新允許伺服器代表商家發出請求而不會遇到限制，從而實現以前被認為有風險的伺服器端操作。

整合應用程式

早在 2021 年，當 Shopify 首次推出 Hydrogen & Oxygen 時，人們就對應用程式整合有疑慮。 Shopify 擁有廣泛的應用程式商店，其中一些最受歡迎的應用程式是商家技術堆疊的重要組成部分。然而，如果沒有這些應用程式的 API 集成，中間件似乎是唯一的選擇。幸運的是，Shopify 現在公開了一系列重要的技術堆疊組件，從一開始就準備好無縫整合到 Hydrogen 中，確保商家可以保留他們喜歡的技術解決方案。

透過 Hydrogen & Recharge 增強客戶的訂閱體驗。我們很高興成為第一個與 Shopify 為商家提供的無頭產品相容的訂閱應用程式。我們共同為開發人員提供靈活性和自由度來打造客製化訂閱服務。

瑞安·福斯特
歐洲、中東和非洲地區合作夥伴經理，Recharge

透過與超過 70% 的 Shopify Plus 品牌合作，Klaviyo 認識到擁抱和支援新技術的必要性。這就是為什麼我們很高興成為 Hydrogen 發布的一部分，成為少數準備並致力於推出的合作夥伴之一。

邁克爾·沃思利
Klaviyo 資深經理兼解決方案架構師

對電子商務未來的影響…

自從去年宣布 Hydrogen & Oxygen 到現在正式推出以來，越來越明顯的是，無頭架構是電子商務的未來，而 Shopify 則處於領先地位。 Shopify 在消除其品牌障礙方面有著良好的記錄，Hydrogen & Oxygen 也不例外 - 此次推出將無頭設備的覆蓋範圍擴大到了更廣泛的商家，而不僅僅是那些收入高且客戶群廣泛的商家。對於品牌來說，採用無頭（尤其是氫作為無頭框架）提供了快速適應不斷變化的需求的新途徑，從而提高了轉換率。對於顧客來說，從他們喜愛的商店獲得更快、更豐富的體驗正在成為標準。

Hydrogen 提供了許多無頭優勢，同時與 Shopify 保持緊密整合，再加上 Shopify 最新的託管服務 Oxygen，您可以擴展到數百萬用戶、降低營運成本並加快上市時間，而無需擔心基礎設施。

麥伊凡
Shopify 工程師，Tenten

Hydrogen 在 Web 技術的未來中也發揮著至關重要的作用，因為它對 React Server Components 的使用正在指導 React 的路線圖。這種演變使開發人員和機構能夠加強實踐，擺脫單一架構，透過提高性能和設計自由度來簡化開發，並簡化線上購物旅程的個人化。

無論您認為哪種無頭框架“最合適”，很明顯，Shopify 作為一個主要平台，投資並為其商家推出這條無頭之路將直接影響品牌在電子商務平台建設中的方式。