這幾年 Shopify 宣布了許多他們對無頭電商許多重大更新，如推出了他們的新無頭框架 Hydrogen 和 Oxygen。將近一年後，隨著 Shopify Editions 的推出，Hydrogen 和 Oxygen 已正式上線。隨之而來的改進和更新將確保這個框架成為大品牌和雄心勃勃的電子商務經理們的焦點。為了節省您的研究時間，我們已經整理了目前我們所知道的一切、更新是什麼，以及這對無頭商務意味著什麼。那麼我們就來深入了解一下……

Shopify Hydrogen

在 Shopify Unite 2021 上宣布的 Hydrogen，是 Shopify 對於更簡單、更時尚、無頭開發的回應，為開發者提供便利，為在 Shopify 商店導航的客戶提供令人興奮的體驗。Shopify 的這個新框架使用了基於 React 的框架，允許快速構建具有更高個性化機會的自定義商店，而不會影響網站性能。

那麼這對商家有何幫助？

以前，您的電子商務開發團隊通常需要在出色的網站速度和精美設計體驗之間進行取捨。但是，有了 Hydrogen 的集成技術，包括我們的合作夥伴：Nosto、Sanity、Contentful、Klaviyo、ReCharge、Okendo 和 Aloglia，他們使得實現卓越的網站性能和動態用戶體驗成為可能。

我們很高興能夠與 Hydrogen 合作，為尋求轉移到由 Shopify 和 Hydrogen 堆棧支持的無頭解決方案的客戶提供最佳體驗和支持。我們在此協助商家打造大規模真實且相關的在線商務體驗。

使用 Hydrogen 的好處：

  • 啟動模板。 使用 Hydrogen，開發團隊可以訪問啟動套件，包括一個建好的演示商店，加速開發時間。
  • 預建組件。 Hydrogen 為開發者提供了預建組件，使得與 API 的工作更加輕鬆。該框架還允許您使用其預設的尾風在您的網站上重用組件。
  • 伺服器端渲染。 允許您的網站根據優先級和用戶的導航逐步加載，而不是一次性加載整個頁面，大大提高了網站速度。這是無頭商務建設的好處，並不僅限於 Hydrogen。
  • 預設 Tail-wind 框架。 允許您重用為特定目的（如 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 或應用程序，您需要使用中間件自己進行連接。

Shopify Oxygen

簡單來說 - Oxygen 是 Shopify 的托管平台，使您能夠直接在 Shopify Plus 上托管 Hydrogen 商店前端。這對我們來說是一個大勝利 - 通常，使用無頭架構時，您需要第三方平台來托管框架，但 Oxygen 使這一需求變得多餘。相反，您可以與 Shopify 的 Storefront API 無縫整合，部署多個 Hydrogen 商店前端進行預覽、共享、測試和實驗。

對於 Shopify 商家來說，它的表現如何？Oxygen 被構建以承受大量同時訪問流量，如黑色星期五這樣的大型銷售，而不會崩潰，並且全球部署，為卓越的國際銷售體驗。

2022年有什麼新變化？

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

CMS 首選合作夥伴

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

我們很高興地分享，我們已與 Shopify 建立了戰略合作夥伴關係，且 Shopify 已對 Sanity 進行了重大投資。我們共同使我們的無頭產品之間的整合變得無縫，為希望創建卓越體驗的品牌創造了無與倫比的機會。這是對我們技術發展程度的肯定，以及內容對電子商務未來的戰略重要性。我們是 Shopify 唯一投資的內容平台。Magnus Hillestad - Sanity.io 的首席執行官兼聯合創始人

作為首選 CMS 合作夥伴的還有 Contentful。Contentful 是當今增長最快的 CMS 技術之一，因此不足為奇，他們被選為 Hydrogen 和 Oxygen 初始發布的首選供應商。他們的 API 優先方法意味著品牌內容，無論是文章還是產品信息，都可以實時準確地翻譯和更新，無論您在哪裡銷售產品。與像 Contentful 這樣的首選合作夥伴一起使用 Hydrogen 和 Oxygen，為任何品牌創建了一個強大的技術堆棧。

值得注意的是，其他 CMS 仍然可以被整合到您的無頭堆棧中。然而，目前，這將需要一個定制的整合，這可能需要的時間比使用 Sanity 或 Contentful 更長。

Shopify API 更新

隨著 Hydrogen 的熱潮，Shopify 已更新他們的 API 以適應新框架。到目前為止，Storefront-API 不適用於伺服器端應用。對於商家來說，這意味著您可能會達到速率限制，影響您網站的整體功能。這次更新允許伺服器代表商家發出請求，為許多用戶工作而不會達到限制，開放了之前過於冒險的伺服器端操作。

應用程序整合

在 2021 年 Shopify 首次宣布 Hydrogen 和 Oxygen 時，圍繞應用程序整合的擔憂浮現了。Shopify 擁有廣泛的應用商店，其中一些深受商家喜愛且是他們技術堆棧的核心部分。但是，如果沒有這些應用的 API 整合，中間件看起來似乎是唯一選項。Shopify 後來宣布了一系列必備技術堆棧，它們已準備好從一開始就整合到 Hydrogen 中，這意味著商家不必犧牲他們心愛的技術解決方案。

使用 Hydrogen 和 Recharge 為您的客戶創建獨特的訂閱體驗。我們很高興成為第一個與 Shopify 的無頭解決方案兼容的訂閱應用程序。我們共同為開發者提供了創建定制訂閱產品的靈活性和自由。Ryan Forster, Recharge
與超過 70% 的 Shopify Plus 品牌合作，Klaviyo 理解採用和支持新技術的需求。這就是為什麼我們很高興成為 Hydrogen 發布的一部分，成為為數不多準備好並致力於推出的合作夥伴之一。Michael Worthley
Klaviyo 高級經理兼解決方案架構師

這對電子商務未來的意義…

隨著去年 Hydrogen 和 Oxygen 的宣布，以及現在它的正式推出，越來越明顯無頭架構是電子商務的未來，而 Shopify 正在為此鋪平道路。Shopify 習慣於為其品牌消除障礙，而 Hydrogen 和 Oxygen 也不例外 - 這次推出他們為更廣泛的商家開放了無頭架構，而不僅僅是那些擁有高收入和大客戶基礎的商家。對品牌來說，無頭架構（以及作為無頭框架的 Hydrogen）意味著更快地迭代和適應不斷變化的需求的新機會，提高轉化率。對於他們的客戶來說，從他們最喜愛的商店獲得更快、更豐富的體驗將成為常態。

Hydrogen 讓您在緊密連接到 Shopify 的同時獲得許多無頭的優勢，再加上使用 Oxygen，Shopify 的新托管服務，您再也不用擔心基礎設施問題。您可以擴展到數百萬用戶，同時保持低運營成本，並快速進入市場。Erik Chen - Tenten 創始人兼董事

Hydrogen 對網絡技術的未來也極其重要，因為它對 React 服務器組件的使用正在推動 React 自己的路線圖。這種轉變意味著開發者和代理商可以將他們受到單體架構限制的最佳實踐加速開發過程，提高性能和設計自由度，並簡化個性化網上購物體驗的能力。

無論您決定使用哪種無頭框架，顯然 Shopify 開始大量的投入資源打造無頭電商的架構的路徑是非常明顯的，在 Tenten 我們也一致認為 Headless 就是電商的未來。