Headless Shopify: Which frontend framework is best to use?

Going headless with Shopify will require a frontend framework – typically Javascript-based – separate from the Shopify platform itself. To ease this process, Shopify provides a ready-made framework called Hydrogen. However, Hydrogen is by-far not the only option, and in fact there are a myriad of alternate tools that might prove more beneficial depending on your ideals.

There isn't a "best" frontend framework to use – it's a decision that will be made collaboratively with your development or agency partner. However, it's an important consideration since the frontend framework will be the primary interaction point for end-users and its stability will make a huge difference to the effectiveness and longevity of your stack.

For instance, some JS frameworks are more targeted toward Static Site Generation, while others are more appropriate for Server Side Rendering. To be honest, the lines have blurred significantly over the last few years, with most frameworks having evolved to better-support areas they may have previously lacked. 

It used to be the case (2015 to 2021-ish) that individual frameworks had clear-cut strengths and weaknesses, but over time feature sets have consolidated and are, these days, mirrored fairly closely. For instance, while Gatsby was once the "king" of static site generation, we feel that Next.js offers a toolset that today rivals Gatsby's static site generation capabilities. Most likely it'll be down to professional experience and developer preference, in terms of which framework is ultimately chosen.

Some frameworks are newer (and more "hip" 🤘) than others. We tend to advise our clients that ultimately – stability is one of the most crucial factors when deciding upon the optimal frontend framework, and that this should take precedence over fancy marketing. Several JS frameworks have seen decline in popularity against others, due to management decisions and shifts in perceived best practice, so it's important to choose stack components that are backed by a strong community involvement and are on a consistently upward trajectory.

Should we use Shopify Hydrogen?

Hydrogen can expedite development of a headless Shopify store because of the tooling and components that it provides out the box. There are many nuances in e-commerce, all of which are critical to functionality, and Hydrogen essentially provides a head-start in terms of frontend architecture & functionality.

Because it's built by Shopify, Hydrogen makes many assumptions about a store’s front-end architecture. By default, Hydrogen provides a fairly complete setup from which to bootstrap and build a headless storefront with Shopify, due to the fact that it's essentially a "starter kit" for taking a Shopify storefront headless, and in many ways, mimics much of Shopify’s core frontend functionality. 

We're the experts in Headless Shopify.

Your search for answers ends here. Discover our services.

Explore Headless Shopify Services

However, this conformity with Shopify's standard approach is precisely what many brands aim to break-free from with headless.

Of course, customizing a Hydrogen storefront can ultimately get you to the same place as building one from scratch with another JavaScript framework – that's part of the freedom of headless tech. Whether it makes sense to opt for Hydrogen or a more "multi-purpose" JS framework depends on how tightly-coupled you wish to be with Shopify's assumed behavior, or indeed whether you wish to dictate how things work from the get-go.

Using Next.js for Headless Shopify

Next.js is one of the most popular frontend frameworks, and has continued this growth year on year. The framework is wildly popular with developers – and for good reason. Next's un-opininated architecture and rich support for multiple rendering methods enables devs to implement first-rate experiences that are as optimized as they are dynamic. With the newer App Router (replacing Next's previous Page Router), the framework now provides an intuitive, performance-first approach to building page layouts, making templating and intelligent rendering easier and quicker to achieve than before. For Headless Shopify builds, not only is this efficient on code and developers' time, but also improves maintainability of the codebase, encouraging best-practice architecture of the codebase from the start.

Historically, Next had challenges in regards to its efficiency in static site generation, but with App Router these have significantly improved. Again, this is an ode to the fact that JS frameworks in general have become more mature and well-rounded over time.

Today, we feel that Next.js is one of the most well-rounded, multi-purpose JavaScript frameworks, and lends itself well to a broad range of modalities and use cases. A use case we've found it particularly capable is for Headless Shopify builds, where its recent improvements in more granular, route-based control provide strong advantages for frontend commerce architecture. 

React for Headless Shopify

The most popular Javascript library, React has become a stalwart for modern & interactive user experiences. While the framework is superb for building feature-rich, dynamic web applications, it provides minimal boilerplate out of the box. For unique web applications, this works well. However, for headless e-commerce builds, starting from React alone is a tall order, and would require significant amounts of architecture in order to get things going. For most headless Shopify sites, starting a build from bare-bones React would be akin to reinventing the wheel – and in most cases would cost time with no substantial gain. A richer framework with a more developed boilerplate from which to bootstrap will work best for most headless Shopify sites. Inexperienced developers can easily fall foul of what we call the "client-side trap": We've heard horror stories from clients where their previous development team did not sufficiently utilize server-side rendering techniques, resulting in a predominantly client-rendered storefront that tanked search engine rankings.

A far more efficient approach is to utilize a more complete React-based JavaScript framework, such as Next.js or Remix, to enhance speed of development, improve maintainability, and ensure better compliance for the proper utilization of appropriate rendering modes.

TLDR on React for Headless Shopify: Use React-based frameworks rather than bare-bones React for building a Headless Shopify store. Server-side rendering and/or pre-rendering are crucial components for headless Shopify builds, which is better catered to (and with less work) by a purpose-fit React-based framework such as Next.js. And where possible, don't reinvent the wheel!

Typescript vs JavaScript for Headless Shopify

Typescript is a programming language that brings static typing to JavaScript. JavaScript on its own is fairly unopinionated, and while this can foster faster development cycles at project onset, it can also result in lack of consistency and validation as a codebase grows larger.

Informal chat? Works for us. 🤘

Contact Cocoon for a no-cost, no-obligation consultation.

Let's talk Shopify

Typescript can help developers catch errors earlier in the development and deployment cycle, preventing them from sneaking into production. And even if buggy code is pushed, a continuous delivery pipeline can catch these prior to deployment if the code has been written in Typescript.

What’s the difference between JS and TS for headless Shopify?

It’s important to understand that Typescript is JavaScript. Typescript isn’t fundamentally different to JS, it just builds on top of JS. In that sense, there’s nothing you can’t do in Typescript that you can do in JavaScript. The difference between them is the additional syntax Typescript adds to JavaScript, like static types, interfaces, namespaces, and more. Typescript’s additional syntax, when utilized effectively within a codebase, can make it more robust.

Takeaway: Typescript is a solid choice for Headless Shopify stores, because it reduces the prevalence of errors within the code, ensures greater consistency, and is easier for large teams to maintain as the size of the application grows.

JavaScript boasts simpler syntax and a marginally faster development process, but lacks in static typing—which can become harder to maintain and more prone to small bugs without additional testing measures in place.

While Headless Shopify stores are JS-based, the most popular frameworks such as Next.js and React provide native support for Typescript out of the box.

Speak with Headless Experts

At Cocoon, we have a trusted arsenal of proven tools and technologies that we work with, and will align our decision closely in relation to the build requirements for any given project. Contact us to discuss your Headless Shopify project.