什麼是 Shopify Hydrogen？為什麼要關心 2022？

在過去的幾年裡，無頭商務已經成為一種流行的電子商務趨勢，預計將改變在線商務的運作方式。 Shopify 是當前領先的 SaaS 電子商務平台之一，它利用其最新技術 Shopify Hydrogen 將無頭商務提升到了一個新的水平。

在本文中，我們將了解為什麼 Shopify Hydrogen 將成為無頭商務的遊戲規則改變者，以及 Shopify 商家如何從最新的 Shopify 技術中受益匪淺。

=>閱讀更多：無頭 Shopify 商店的最佳示例

Shopify Hydrogen 之前的無頭商務

無頭商務是指在線商店的前端與後端分離的基礎架構。 簡單理解，無頭商務允許您將店面層（“頭”）與電子商務平臺本身（使其“無頭”）分開。

但是為什麼我們要將網站前端與其平台分開呢？ 因為它為我們提供了最大的靈活性，讓我們輕鬆打造快速、流暢、一致和個性化的購物體驗。

在傳統架構中，店面和後端緊密相連，通常作為單個系統運行，這限制了我們的設計及其功能。 同時，無頭方法允許兩個獨立的層獨立工作並通過 API 進行通信。 因此，您完全有能力定制無縫且獨特的購物體驗，同時保持現有後端完好無損。

如果您是這項技術的新手，我們向您推荐一些綜合文章，以更好地了解無頭商務：

• 什麼是無頭商務？
• 無頭商務的 15 個最佳示例  

通過使用 StorefrontAPI，始終可以使用 Shopify 作為電子商務平台來構建無頭商店。 然而，無頭模式並非沒有挑戰。 對於需要完成的各種複雜任務，通常成本更高、更耗時。 此外，它需要更多的時間和精力進行維護，這對於經營小型且不斷發展的業務的 Shopify 商家來說可能不是一個好方法。

Shopify Hydrogen 是消除過去與開發 Shopify 無頭商店密切相關的所有這些複雜性和額外成本的完美解決方案。 無需依賴第三方集成、外部系統或其他技術來自定義您的 Shopify 店面。 Shopify 希望 Hydrogen 提供“由 Shopify 的平台和 API 提供支持的個性化和動態買家體驗”。 這就是為什麼這種最新的 Shopify 技術被認為是無頭開發的未來。

什麼是 Shopify Hydrogen

我們認為網絡商業的未來是快速、個性化和動態的——而 Hydrogen 反映了我們如何看待這一願景的實現。

Shopify 團結 2021

Shopify Hydrogen 是一個基於 React 的框架，用於構建 Shopify 的自定義店面。 它包括開發人員入門、快速構建和提供最佳個性化用戶體驗所需的所有結構、組件和工具。

Hydrogen 的最終目標是為您提供更多的靈活性和時間來構建和定制您的 Shopify 商店，而無需前端限製或外部軟件集成。 同時，由 Shopify 提供支持的所有後端商務功能仍然可以順利運行，不會出現任何中斷。 通過這種方式，您的 Shopify 商店可以實現無頭方法，而無需繁瑣的第三方集成。

Hydrogen 是 Shopify 推薦和固執己見的方法，可帶來快速的用戶體驗、一流的商家功能和出色的開發人員體驗。 它是商業、用戶體驗和編碼之間的交集。

目前，Hydrogen 是完全開源的，您可以通過試用和發送反饋來幫助構建 Hydrogen，以使其變得更好。

Shopify Hydrogen 的工作原理

通過與全球數百萬商家合作，Shopify 開發團隊意識到電子商務需要快速、無縫的用戶體驗，同時保持個性化和情境化。

儘管這種方法聽起來很有希望，但對於那些在應用多種技術以獲得出色的商業體驗和確保網站性能之間陷入困境的開發人員來說，它構成了巨大的挑戰。 Hydrogen 通過引入具有多種技術的框架來緩解此問題，使您能夠在不犧牲網站速度的情況下創建動態商務體驗。

Hydrogen 包含一個快速啟動環境，其中包含可供使用的特定於商業的組件和開發人員工具：

• Hydrogen 框架：有一個 Vite 插件，提供服務器端渲染 (SSR)、水合中間件和客戶端組件代碼轉換。
• Hydrogen UI 組件：支持 Shopify 中已存在的功能和概念的組件、掛鉤和實用程序。

Hydrogen 框架就像構建塊一樣，可以讓您在出色的商業體驗和用戶體驗之間取得平衡。 提供這些功能迫使 Hydrogen 充分利用 React 和 Vite 的最大潛力，並特別注意開發優化的組件和開發工具。

此外，Shopify 包含一個讓您的店面在幾分鐘內啟動的入門模板，可幫助您節省 Shopify 店面設計的腳手架和配置時間。 由於此模板處理已與 Shopify 商店集成的項目的基本文件結構，因此您可以跳過設置並立即開始自定義您的店面。

除了入門模板外，Hydrogen 還通過圍繞 Shopify 數據模型構建的所有 UI 組件加速店面開發過程。 這些部分可以直接與 Storefront API 集成，以與 Shopify API 或任何第三方數據源進行交互。

TL;DR： Shopify Hydrogen 通過其框架幫助商家利用商業經驗，並通過其即用型 UI 組件加速店面開發過程。 這樣，您可以在不放棄網站性能的情況下創建動態商務體驗。

Shopify 氫氣與液體

• Liquid ：一種用 Ruby 編寫並由 Shopify 創建的模板語言。 這是所有 Shopify 主題的支柱，用於在商店頁面上加載動態內容。
• Hydrogen ：構建 Shopify 無頭店面的框架。

儘管許多開發人員經常互換引用模板語言和框架，但實際上兩者之間存在一些細微差別。

框架是用於創建應用程序的現成工具和組件的集合。

同時，使用模板語言構建網頁，將多個頁面上相同的靜態內容和從一個頁面更改為下一個頁面的動態內容相結合。 模板專注於預先確定的功能，與框架相比，它的自定義選項更少。

可以這樣想：模板就像數字繪畫，框架更像樂高積木。

在 Shopify 案例中，借助模板語言，可以重用定義網頁佈局的靜態元素，同時將數據從 Shopify 商店動態遷移到頁面。 將 Liquid 與其他模板語言（例如 HTML、CSS、JavaScript）結合使用，您可以構建和自定義 Shopify 主題。

Hydrogen 包括構建自定義 Shopify 店面所需的所有結構、組件和工具。 憑藉其框架和 UI 組件，Hydrogen 可幫助您構建可提供最佳用戶體驗的自定義店面。

由於 Liquid 需要靜態和非靜態元素來構建主題，因此可以看出 Liquid 在店面定制和性能方面存在一些限制。 此外，使用 Liquid 創建和自定義主題非常耗時。 因此，Hydrogen 可以作為基於 Shopify 的店面的下一代解決方案，這要歸功於它為構建獨特的網站 UX 和 UI 提供了無限的可能性。 據預測，Hydrogen 將在 Shopify 店面開發中取代 Liquid。

目前，Liquid 和 Hydrogen 都在 GitHub 上完全開源，供大家下載試用。

為什麼要使用 Shopify Hydrogen

1.優化網站性能

採用 Shopify Hydrogen 的無頭方法的明顯好處之一是出色的網站性能，尤其是網站速度。

通過將前端與後端分離，您可以解鎖閃電般的快速加載頁面速度，同時仍保留後端內的所有動態內容和功能。 切換到 Shopify Hydrogen 可以幫助您將頁面加載速度從幾秒減少到幾毫秒，從而利用商店的核心 Web Vitals。

簡而言之，Shopify 的無頭解決方案允許您交付完全個性化和動態的內容，這些內容可以及時定制，而不會降低服務器和您網站的速度。 這樣，您就可以滿足任何來到您商店的訪客和顧客。

2.更好的擴展能力

另一個經常與網站速度優化密切相關的常見問題是可擴展性。 在 Hydrogen 之前，開發人員在網站優化方面一直在努力確定速度和網站體驗之間的權衡。

任何經驗豐富的開發人員都會清楚地認識到，如果流量相對較低，提供具有超快網絡性能的高度互動和個性化的購物體驗可能並不復雜。 但是，隨著您的商店擴大規模，該網站無法每天處理新湧入的訪客，從而導致速度問題和網站性能不佳。

現在，Shopify Hydrogen 已經通過 Shopify Oxygen 從根本上解決了這個問題 – 將於 2022 年推出的 Hydrogen 店面全球託管解決方案。您無需依賴第三方託管服務，因為您的 Shopify 商店將直接託管關於氧氣。

Shopify 在 Oxygen 全球架構上投入巨資，在全球擁有 100 多個服務器位置。 Oxygen 確保您的客戶無論身在何處，都能享受即時的商店加載。 這種即將推出的基礎設施能夠在動態店面內容和商業結構之間實現快速通信，使速度和可擴展性問題成為過去。

Shopify 聲稱 Oxygen 是部署 Shopify 支持的商業體驗的最快方式。 氫氣和氧氣的結合正在為不久的將來現代無頭商業鋪平道路。

3.更多的設計自由度

由於 Hydrogen 採用無頭方法，將 Shopify 網站的店面與包含所有數據和網站功能的後端分開，它提供了更大的靈活性和自由度，可以按照您想要的方式構建和自定義您的店面。 Shopify Hydrogen 的設計能力無窮無盡，您可以創建獨特的 UX/UI 設計，為訪客提供個性化和動態的購物體驗。

使用專門針對 Hydrogen 店面的頁面構建器工具可以使設計過程更快、更順暢。 Shopify 商家可以簡單地從頭開始拖放佈局，或者使用預製模板和塊來構建頁面，而無需任何編碼或設計技能。

此外，由於 Shopify 站點的前端和後端通過 API 進行通信，因此您可以自由地更改前端設計，而不必擔心後端功能複雜化或破壞，這在傳統商務中很常見。

4.出色的商務經驗

雖然電子商務業務的個性化營銷並不是什麼新鮮事（以亞馬遜產品推薦為例），但這並不是非無頭商店可以輕鬆採用的常見方法。

具有前端靈活性和獨立 CMS 的 Shopify Hydrogen 引入了任何 Shopify 商店都可以使用的簡單、輕量級的解決方案。 您可以完全控制店面設計和內容管理，以定制個性化的店面以滿足客戶的需求。 此外，將氫氣與氧氣結合可確保毫秒級的頁面加載速度，同時仍保持穩定的 Web 性能。

出色的商業體驗不應僅僅以滿足客戶為目標，而應謹慎平衡客戶體驗和商店能力。 Shopify Hydrogen 可幫助您獲得出色的商務體驗，同時滿足商店績效和客戶體驗。

5.快速發展

通過利用基礎框架和即用型 UI 組件，Shopify Hydrogen 可以加速前端開發，同時仍為商家提供無窮無盡的設計能力。 此外，Hydrogen 有助於降低過去構建自定義店面所需的第三方集成和軟件通常帶來的所有復雜性。

因此，Shopify Hydrogen 是 Shopify 商店可以採用的最快路線之一，以實現最佳的無頭商務功能，而無需漫長、複雜和昂貴的開發過程。

Shopify Hydrogen 限制

由於 Shopify Hydrogen 僅在開發者預覽版中可用，因此我們對這個 Shopify 驅動的無頭開發尚無話可說。 目前，Hydrogen 只能用於構建 Shopify 店面。 目前不支持任何其他類型的自定義店面，包括移動應用程序、視頻遊戲和智能設備。 我們將定期更新這一最新的 Shopify 技術，以告知您其他潛在的限制和缺點。

今天用 SimiCart 無頭無腦

雖然無頭商務有很多方法，但 Shopify Hydrogen 絕對是一個改變遊戲規則的人，我們可以期待更多的未來。 雖然它不會很快取代 Liquid，但跟隨最新的技術趨勢可以讓您領先競爭對手一步。

如果您想擁有無限的設計能力、閃電般的頁面速度和對店面的完全控制以提供出色的商務體驗，Shopify headless 絕對是您應該遵循的路徑。 讓我們幫助您通過無頭商務增強您的 Shopify 商店。