My Experience Using Shopify's Hydrogen

published at: Mon Jan 02 2023

I wanted to make my fashion designer girlfriend a great web experience for her personal brand. She's a non-technical but hands-on person, so I wanted to make something that was familiar for her to interface with and automated a lot of the cross-posting that's required when running an e-commerce business.

Using a CMS as a headless platform opened up the possibility of doing things like crossposting products to Etsy, automating Instagram posts, and managing inventory from a single data source. This would let my girlfriend spend more time sewing and less time crafting posts. I knew that selling pieces online was also a goal for her, so a bespoke solution or something like Shopify/Big Cartel would eventually be part of the picture.

Naturally, this led me to Hydrogen, a framework for developing Shopify sites, which I ultimately selected for the following reasons:

It looked cool
I'm a React developer, so I liked the idea of being able to work with Shopify like any other React project. I wouldn't have to fuss around with Liquid or be constrained to an existing Shopify template. Note that I have previously chosen to do things like work with React Native before so I am aware that I have terminal React-brain.
Managing this project (ie: sales, communications, analytics, whatever) would eventually be handed off to my non-technical girlfriend, so going fully bespoke for a shopping platform was out of the question.
I wanted to keep the development feedback loop both simple and tight by leveraging Shopify's existing CI.
The project does not seem tremendously popular, despite appearing to be well-funded and well-marketed — there's probably like 20-25 hacker news posts about this whole thing over it's two-year lifespan... I was feeling curious to find out for myself.

I walked into the project with close to zero experience with Shopify/Liquid, Hydrogen, or Remix. I chose only default configuration options: JavaScript for language, Remix for framework, and Oxygen for runtime. Given that this was a side project for me, I was comfortable with the inevitable fuck-ups and running behind schedule that come with working within new frameworks.

With that said, let's explore if Hydrogen lives up to the initial promises of the platform back in 2021:

1. fast user experience: fast loading and responsive
2. best-in-class merchant capabilities: personalized, contextual, and dynamic commerce
3. great developer experience: easy, maintainable, and fun.

Things that were good:

It's Shopify

Much like no CTO is fired for choosing SAP, my girlfriend probably won't be pissed in at me in a year or two for choosing a mature, stable e-commerce platform. There's also the bonus of the large community that does weird and interesting things with Shopify's API, so I was never alone in the deep end with any particular bug.

Built in CI/CD

Honestly this shit rocks. For a small project, pushing to main and seeing the site live in ~60 seconds is very, very nice. You're probably reading this and thinking about saying, "well Andy, what about having test and staging environments" and this is where I would cut you off — I do not care. This is a small, weekend project! I managed zero infrastructure and this freed up a huge amount of time for me.

The docs

The docs on Hydrogen — and docs for Shopify in general — are really robust, and the basic walkthrough on Hydrogen was enough for me to get 95% of a basic e-commerce site up.

Things that were not good:

Remix

The reason Remix was chosen as the de-facto framework for Hydrogen is probably a political choice. Hydrogen initially started as its own React framework that eventually switched over to Remix when Shopify aquihired the team there. There seems to be some not-invented-here syndrome going on with the choice of framework as opposed to something more stable and popular, given that there are known #WONTFIX errors with hydration when using Remix.

These hydration errors crop up immediately after install in a fresh Hydrogen project and are somewhat severe: all the gains of streaming SSR are invalidated for a non-trivial percentage of users. Any user with a browser extension will have their page rendered via CSR. As a developer, you now have a ton of incidental complexity that comes with implementing streaming SSR (Suspense, etc) and your users see none of the benefits.

GraphQL

The schema for Shopify models (Products/Orders/etc) are largely non-extensible — you get the fields that you get for the most part — so I ended up just taking pretty much every field whenever I fetched a model. There's a huge amount of cognitive overhead introduced with the granular GraphQL way of doing things as opposed to just pulling everything with a REST call, and user's don't see a ton of benefit.

Shopify images are slow

Hydrogen has its own Image component that's reminiscent of Image components in a few other frameworks. It more or less handles writing srcsets, accessibility, and lazy loading. This would be welcome, but Shopify doesn't seem to cache images in a discernible way. I consistently received multi-second "Waiting for server" load times for images that were processed by Shopify. This is really sub-par, as 99% of a fashion website is going to be images, and it's crucial that an e-commerce site is as fast as possible. I spent a good deal of time trying to identify and then optimize this bottleneck; had I known of this performance issue, I would have just processed these images myself with an external service.

My takeaway:

Hydrogen is a pretty fun, lightweight framework. There's a lot to love about constraining yourself to what Shopify gives you, and Oxygen really rocks. If you're a capable developer and you want to, like, sell a small widget, I'd (tentatively) recommend using Hydrogen, so long as you're down to cut your own images.

That said, if I were being paid to make an e-commerce site by a non-technical client, Hydrogen would not be my first choice unless the client specifically requested it or unless the shop was very, very small. I find dealing with the out-of-the-box errors that come with Remix to be pretty unacceptable from a developer perspective, and the leap of complexity between templating via Liquid and writing TypeScript/GraphQL/Remix is just too huge and extraneous for the average business.

To me, Hydrogen seems viable as a middle-of-the-road choice for small projects owned by technical people. This is a very small niche! A savvy technical person is generally going to want to A) steer clear of the problems with Remix and just use hydrogen-react via the more-featureful Next.js or B) avoid the complexity of an app altogether and use an off-the-rack Liquid template. There is just a really small sliver of situations where a small sliver of developers would ever reach for Hydrogen and would be satisfied with the results.