"i only speak liquid" #37: Choosing to go Headless: Hydrogen or other?

Hey all 👋!

Welcome to my first edition of 'i_only_speak_liquid'. I’m Luke, an expert on Storetasker and I love working on headless challenges within Shopify. As always - I’ll be writing 4 editions before handing the pen off to another expert. Enjoy!

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.

One learning as a freelancer:

Learning being the key word.

We’ve all chosen to be a freelancer for different reasons and sometimes I think we all try to be an “expert” in everything that the web has to offer. It’s okay to not know everything and to tell clients that you do not know off the top of your head and will let them know about a question they had etc after.

This is also important to know when it comes to new tech like Hydrogen, React and Vue etc. We all started out somewhere and a lot of the time you’ll learn a lot more getting stuck in but the key, super key part is, you have to put in the effort to learn and keep on learning.

I’ve found the greatest improvement in my skills because my hobbies align a lot with what I work on. I love to tinker in linux servers; creating Docker containers and building my own commercial Shopify apps. All these hours spent outside of billable hours help when I come up against a new client and they want something new or different. It feels more familiar to be confident diving into new docs, planning a new strategy and making sure I feel comfortable that I can take on the project with any additional discovery needed.

See you in 2 weeks,

Luke