Choosing to go Headless: Hydrogen or other?

What I’ve been thinking about:

Recently, I've been working with more and more clients that are looking to move their Shopify storefront to a ‘headless’ frontend. If you are new to the term, it is a technique of separating the client side shop from Shopify and running another piece of technology. These are typically popular frontend frameworks React or VueJS.

I hear you ask “But what one should I choose?”.

It depends on what you are more proficient in and how much you still want to lean on Shopify.

Hydrogen, is Shopify’s internal homegrown headless setup that is based on React/Remix and can be integrated nicely into the Shopify admin as an additional Sales Channel.

Vue devs have a bit more setup needed as there’s no Hydrogen for Vue. This means we’ll focus on a combo of Vue/NuxtJs and a third party company called Nacelle that helps connect the Shopify data into Nuxt.

Pros of Hydrogen

• It’s Shopify’s technology which means it should be the most supported inside their own ecosystem.
• It uses less moving parts than the Vue alternatives which means less to manage, upgrade and maintain.
• Set up and deploying is very easy to manage inside the admin and deployed through Oxygen another Shopify platform.
• It’s free to use (at the moment).

Things to consider for Hydrogen

• It uses Remix as the base set up for SSR (Server side rendering) and can have a steep learning curve for devs if they are used to just Liquid.
• It’s still fairly new and a little undocumented so you’ll need previous experience in React/Remix to really get it working.
• It might not make sense for smaller businesses as the additional control means a lot more extra dev time (good for us though)

Pros of Nuxt / Nacelle

• Vue is seen as a bit easier for devs to learn (if you are using the options API) that breaks up the flow into more obvious chunks.
• Shopify data is indexed externally in Nacelle which means that your store has a bit more redundancy. Also caching is handled by Nacelle which is easier to set up compared to the Storefront API.
• More flexibility on builds and deployment. Not using Hydrogen means you have more control on who hosts your builds and how you build it

Things to consider using Nuxt / Nacelle

• Nacelle is a paid for platform, so there is an additional cost to use the service.
• Additional services mean more to maintain - although Nacelle is managed serviced you will still have to do some bits.
• Like React, Nuxt is for server side rendering and can be a bit of a learning curve to manage the server side and client side pages.

So there you have it, hopefully enough to get you started on your journey with headless apps and Shopify. There’s no right or wrong answer when it comes to choosing one framework over the other. Just go with the one you feel most comfortable with and paired up with your clients needs for the project.

3 links you can’t miss:

Shopify Hydrogen Docs: This will show you how to get started using Hydrogen and you can install it on development stores so you can play with it and learn how it works.

Nuxt Docs: Nuxt is like remix as we’ve talked about and has a decent set of docs on how to get set up.

Nacelle Docs: Nacelle’s docs again have a decent amount of content to help you get connected and have a section specifically for Nuxt which helps the initial setup greatly.