First of all, if you don’t know the term “headless commerce”, it just means e-commerce applications where the storefront communicates with the commerce backend via an API. Vendure is one such “headless” server - it deals with all the product, order & customer data and logic, and the storefront interacts with it via its GraphQL API.
I’ve been aware of Remix for a while, but it was only after reading their blog post comparing Remix to Next.js that I really sat up and paid attention. I soon discovered that it could be an ideal framework on which to build a headless commerce storefront:
- it supports server-rendering by default
- it has native support for prefetching to speed up page loads
- it encourages graceful error handling
- it runs on edge servers (more on this later)
In fact, I was so impressed with what I saw that I decided to make Vendure an official sponsor of the inaugural Remix Conf!
React made simple
As a React newbie, I wasn’t sure what I was letting myself in for - I’ve dabbled with Next.js, but I’m not afraid to
admit that some of the more advanced uses of hooks still confuse me. I was really happy to discover that the whole
design of Remix meant I very rarely needed to reach for anything more complex than
For the initial proof of concept I had the help of a React-savvy friend to get things started, and after sharing my progress on Twitter I got some invaluable tips from Kent from the Remix team (shout out to Kent for his incredible work supporting and boosting the Remix community!)
After that I found I was able to move quickly, even with my limited React experience! The more notoriously complex aspects of building a React app - wrangling build tools, dealing with state management libraries - seem to be completely side-stepped by Remix’s opinionated approach to the app-building experience.
Effortless server rendering
Thankfully, most modern JS frameworks have some kind of built-in support for SSR. Remix is a great example of this. The
server and client code exists in the same file and passing data from the server to the client is a matter of returning
an object from the
Bye-bye client libraries
Since Remix is a full-stack framework, it is able to load data directly from a database rather than requiring an HTTP API like most front end frameworks. I was curious to see how it would work with Vendure’s GraphQL API as a data source.
I was very pleasantly surprised to find that it works really well! I would usually reach for a full-featured GraphQL
client with a normalized cache like Apollo Client or Urql, but by fully embracing the Remix way, plain old
worked perfectly. The usual issues of client state getting out of sync (which I typically solved with a normalized
client cache) are solved by Remix’s method of revalidating any data that might have changed.
Not only does this significantly simplify data handling, it also completely removes the need to ship any kind of GraphQL client library to the browser!
Living on the Edge
One option is to run it as a traditional Express app. But due to the smart platform-agnostic design of Remix, it can run in any Node.js server like Vercel, Netlify or AWS Architect. Furthermore, it can run on non-Node.js platforms like Cloudflare Workers or Deno Deploy.
Cloudflare Workers is a particularly exciting technology - it allows you to run code at “the edge” - which means a network of servers distributed all around the world. So if a customer in Sydney visits your store, they will be served by a Cloudflare server right there in Sydney. Likewise in Vienna, Lagos, Seattle or any of the 250+ locations worldwide. This can dramatically reduce the latency of requests, making your storefront lightning fast (as you’ll see in the demo below!).
Yes, the video above is in real-time!
The Vendure server is a default installation running on a $5 Digital Ocean droplet backed by SQLite. No special caching or performance tricks - just a completely vanilla install.
The Remix storefront is running on Cloudflare Pages. It feels like a static website, but it’s fully dynamic.
The combination of Remix’s performance-first design running at the edge really has to be seen to be believed. Try it for yourself! 👇
Special thanks to Edo Rivai for doing the initial work on the Remix storefront repo - your React expertise got me started in the right direction! Also thanks is due to Conor Burns & Timur Dogan of 0xcb.dev who first got it running on Cloudflare Pages 🙏.