Hydrogen: a solid foundation for Shopify storefronts
-
The basic architecture of the application and Storefront API communication is already pre-build. This means developers don’t have to start from scratch when building pages and functionalities like Home, Cart, Product, Collection, My Account, etc. By leveraging the existing codebase, development time can be significantly reduced, resulting in cost savings. Additionally, less-skilled developers can benefit from a well-written codebase with community support, making it more accessible to a wider range of developers.
-
Can be hosted on Oxygen, which is Shopify’s hosting platform dedicated to Hydrogen storefronts, without any additional costs. It is available for users on the Basic, Shopify, Advanced and Plus plans. However, nothing prevents you from hosting it somewhere else. In the future, Shopify might want to add some features that code running on Oxygen can benefit from (access to data unavailable via Storefront API, no need to implement bulk actions to retrieve large data sets or something like that).
-
Official Shopify support ensures that Hydrogen will be adapted accordingly whenever changes are made to the Storefront API. Updating to a newer version of the framework through official support is a more cost-effective process compared to independently going through the details of the API documentation and implementing changes.
-
Hydrogen is primarily focused on the Shopify ecosystem and is not intended to be a general development framework. It may not be suitable for use with other engines or platforms such as Swell or Magento.
Example storefronts built with Hydrogen
Next.js: flexibility and established market position
-
Building a Shopify storefront in Next.js will usually require more development effort compared to Hydrogen. It is worth mentioning that there is a Next Commerce starter available. However, it lacks many functionalities that are implemented in Hydrogen. Moreover, Shopify develops a Hydrogen React project that provides a set of React components for interacting with Storefront API. This package can be used with any third-party React framework, such as Next.js or Gatsby.
-
No Oxygen hosting. Since Oxygen hosting is exclusively for Hydrogen storefronts, you would need to find your own hosting solution (Vercel, Netlify, a custom VPS, etc.), which means an additional cost in addition to paying for the Shopify plan.
-
Established position on the market. Next.js is not only well documented, but also has a larger community and ecosystem built around it. Developers working with Next.js can benefit from a wealth of resources, tutorials, and community support. Additionally, it is easier to find experienced developers or agencies that specialize in Next.js compared to Hydrogen + Remix.
-
You are not vendor locked-in. Next.js offers greater flexibility, while Hydrogen is tightly integrated with Shopify's ecosystem. This allows for easier replacement of parts of your application with non-Shopify solutions, providing the ability to mix and match different technologies and tailor the storefront to unique business requirements.
-
Support for Incremental Static Regeneration (ISR). This feature allows pre-rendered pages generated at build time to be updated and regenerated on-demand based on a revalidation time. Utilizing this rendering technique can significantly boost application performance.
Example storefronts built with Next.js
Summary
In conclusion, the choice between Hydrogen and Next.js is challenging, but there is no wrong choice. It simply requires thorough assessment of your business needs and capabilities.
Hydrogen offers solid foundation for further development, Shopify support in maintaining the core components, and compatibility with Oxygen hosting. On the other hand, Next.js provides a more flexible approach with a larger community and powerful ISR feature.