深入了解 Shopify Hydrogen 和 Shopify Oxygen

已發表: 2022-04-22

Shopify 在商業中越來越受歡迎。 因為它很容易定制並且有很多好處，公司希望進入這個市場以擴大他們的機會和客戶體驗。 因此，在線市場變得非常有競爭力。 然後，企業必須考慮如何使他們在 Shopify 上的商店更具吸引力和便利性，以贏得競爭對手的青睞。 幸運的是，Shopify 推出了 Shopify Hydrogen 和 Shopify Oxygen，讓流程變得更加簡單。 因此，在本文中，我們將為您詳細介紹 Shopify Hydrogen 和 Shopify Oxygen。

您應該了解的有關 Shopify Hydrogen 和 Shopify Oxygen 的一些亮點功能

Shopify-氫

Shopify Hydrogen 概述

在 Unite 2021 上宣布的 Shopify Hydrogen 是新的 React 框架，可讓開發人員創建真正獨一無二的 Shopify 商店。 Hydrogen 是一個基於 React 和 JavaScript 的平台，為商家提供強大的工具和組件。 這種額外的功能使您可以從頭開始創建個性化和獨特的商店。

Shopify Hydrogen 的工作原理

您將使用氫氣來創建一個定制的店面。 它包括一個框架以及用戶界面組件。

Hydrogen框架：Shopify Hydrogen 提供了一個 Vite 插件，其中包括服務器端渲染 (SSR)、水合中間件和客戶端組件的代碼轉換。

Hydrogen 用戶界面的組件：Hydrogen 是一組支持 Shopify 功能和概念的組件、掛鉤和實用程序。

信息來源： Hydrogen 旨在處理來自 Shopify 的 Storefront API 的數據。 提供給組件、掛鉤和實用程序的數據具有匹配並遵循 Storefront API 的 GraphQL 類型的形狀。

Shopify Hydrogen 可以幫助第三方來源的數據。 如果您想通過第三方數據源使用 Hydrogen 組件，您必須首先將來自第三方源的數據更改為 Hydrogen 組件、掛鉤和實用程序所期望的類型，然後將其傳遞給組件，鉤子和實用程序。

設置 Hydrogen 時應遵循的一些最佳實踐

為了讓您的商家的商店保持快速、可訪問和可發現，您需要考慮以下因素：

  • 表現
  • 可訪問性
  • 測試

Shopify Hydrogen 開發有指導原則

氫能開發的指導原則

那麼，什麼是 Shopify 氧氣？

簡單地說，Oxygen 是 Shopify 提供的託管服務，使您能夠託管使用 Hydrogen 創建的商店。

Oxygen 有助於幫助您的商店處理大量流量，以進行有效的限時搶購或社交促銷。 即使是大公司的網站在獲得大量流量時也會崩潰。 因此，Oxygen 努力幫助您保持您的網站順利運行。

使用 Shopify Hydrogen 時您一定會獲得的好處

如果您正在考慮建立自定義店面，Shopify Hydrogen 具有以下優勢。

演示商店模板

Hydrogen 提供了一個演示商店模板，可讓您輕鬆創建 Shopify 自定義店面。 它帶有樣板代碼，與 Shopify 網站無縫集成。 此外，它還提供了開箱即用的完整購買體驗。

借助 Tailwind CSS 實用程序包和 Shopify Hydrogen 框架，您可以設置演示商店模板的樣式。 您可以使用 Tailwind 的庫或創建自己的樣式。

性能優化

為了獲得最佳速度，Shopify Hydrogen 的架構允許在客戶端和服務器端混合獲取靜態和動態數據。 由於尖端的 Web 技術和 Web 開發方法，它提供了以下功能：

  • 為了速度和性能，有內置的緩存控件來處理動態信息並最小化 API 調用。
  • 服務器端有責任減輕初始負擔。
  • React Server Components 是一個自以為是的 React 項目的數據獲取和渲染流程。 使用 React Server Components 的開發體驗要好得多。 組件快速渲染，讓您在構建時查看您的工作。

快速發展

Hydrogen 使用 Shopify 的基本技術堆棧和商業技能來加快開發過程。 它與 Storefront API 協同工作，以提供快速的數據檢索。

Hydrogen 包含 Shopify 特定的組件、掛鉤和商務工具。 它們易於訪問、快速且隨時可用。 它們還有助於降低創建自定義店面所需的初始復雜性和样板文件。

反應.js

Shopify 已將 React.js 視為動態、快速和個性化商務的未來。 你可以打賭，Shopify 投資 React 的決定對行業來說是一個重要的聲明。 它讓 React.js 更有信心成為商業的未來或事物的發展方向。

您將收到一個入門套件，其中包括以下物品

Hydrogen 的早期採用者將收到一個基本模板，以啟動和運行他們的網站。 這是初始包中包含的內容的列表（想想：按鈕、切換、導航）。 作為早期採用者，您幾乎肯定需要自己構建部件，但您可以使用一些預構建的組件來開始。

您的團隊可以幫助構建 Hydrogen

Shopify 正在尋求來自 ecomm 開發社區的幫助。 在 Shopify 的幫助下，如果您擁有強大的內部開發團隊，您可以從一開始就設計產品願景。

您創建的組件可以重複使用

一旦您開始使用入門套件，您將能夠設計早期部件，您可以根據需要在整個最終站點中重複使用這些部件。

但是，您必鬚麵對 Shopify Hydrogen 的一些潛在缺點

Shopify Hydrogen 的缺點

您從頭開始創建的開發人員繁重的工作流程

雖然 Shopify 框架確實為您提供了無頭模式的好處，但一切都必須由開發人員在 Hydrogen 中創建。 不幸的是，這意味著非技術團隊成員將無法對站點的前端層進行更改。 截至 12 月的 Shopify 市政廳活動，2022 年計劃中沒有短期或長期的拖放工具。 最後，這種策略可能適合已經擁有大量開發資源的電子商務團隊。

目前沒有可用的商店預覽

除非您希望創建自己的預覽環境，否則您將無法看到您現在正在創建的氫動力商店的實時預覽。 這可能會使電子商務團隊的非技術成員難以實施。

使用 React 服務器組件

Hydrogen 的輸出不會是靜態漸進式 Web 應用程序，因為它使用 React 服務器組件 (PWA)。 您的程序員必須為 Shopify 服務器編寫代碼。 附帶說明一下，React Server 組件非常熱門和新。 您可以稱其為“測試版”。 這是一個好主意，但大多數開發人員還沒有真正接受它。

您需要鏈接自己的內容管理系統 (CMS)

如今，Shopify 和 Sanity 正在合作為 Hydrogen 商店提供內容管理系統 (CMS) 功能。 Sanity 是面向開發人員的第三方 CMS，允許團隊構建內容數據模式（圖片、文本、視頻）以進行低代碼內容管理。

今天的應用程序支持很少

儘管 Shopify 已經為潛在的應用支持定義了一個理想的場景，但其第三方應用生態系統目前仍處於早期階段。 目前，API 並非對所有事物都可用。 而且您創建的內容不會立即與 Shopify 應用商店兼容。 對於您使用的每個 Shopify 應用，您都需要設計自己的中間件。

氫氣距離液體替代品還有很長的路要走

大量商家最近投資了 Shopify 主題。 然後 Shopify 將重點從 Shopify Liquid 主題和這些主題目前服務的非技術受眾轉移。 ‍如果您希望將 Hydrogen 作為一種可能的無頭選項，請記住，此框架可能需要一些時間才能趕上 Liquid。

結論

我們將引導您完成這篇文章，希望：您對 Shopify Hydrogen 和 Shopify Oxygen 有一些基本的了解。 擁有許多令人驚嘆的功能，絕對值得一試以增加您的在線商店的效果。 因此，您的業務可以滿足客戶的需求，並在互聯網環境中帶來更多的發展機會。 但是，如果您仍然對這項技術感到困惑，Magesolution 願意成為合作夥伴來協助您的業務。 憑藉在該領域的豐富經驗，我們有信心提供最好的服務：Shopify 解決方案。 因此，如果您有任何問題，請聯繫我們以獲取更多信息。