Lightning Fast Headless Commerce with Vendure and Remix
Tags: remix, webdev, javascript, ecommerce
Published: 2022-05-25 11:43:03

[Remix](https://remix.run/) is a new full-stack JavaScript framework which focuses on web standards, modern web app UX,
and which promises to help you **build better websites**. In this post we'll explore how Remix is ideally suited to
headless commerce.

---

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.

![Screenshot](https://www.vendure.io/blog/2022/05/lightning-fast-headless-commerce-with-vendure-and-remix/lighthouse-score.webp)

I've been aware of Remix for a while, but it was only after reading
their [blog post comparing Remix to Next.js](https://remix.run/blog/remix-vs-next) 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 ships minimal Javascript to the browser, keeping initial loads fast
- 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](https://remix.run/conf#sponsors) 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 `useState`!

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](https://twitter.com/kentcdodds/status/1522596597565038592) (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

E-commerce is the archetypal example of the need for server-side rendering (SSR) of web applications. Why? Because
ensuring that search engine crawlers can read our pages is _essential_ to driving traffic to our shop. Back in the early
days of JavaScript web apps, we had some _interesting_ solutions to this problem - anyone else remember using headless
Chrome to crawl our sites and generate static HTML files? On the other hand, build-time static site generators like Gatsby can become difficult to scale to stores with hundreds or thousands of products.

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 `loader` function.

Not only does this approach make your pages SEO-ready by default, it also allows you to limit the browser bundle to _only_ that code _strictly needed on the client_. This can massively reduce the amount of JavaScript sent to the browser,
significantly reducing load times and speeding up the storefront experience.

## 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 `fetch`
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

Since a Remix app is both a server _and_ a client application, we can't just host it like a simple static website. It
actually _executes JavaScript_ when a new request comes in. So how do we host it?

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](https://remix.run/docs/en/v1/pages/technical-explanation#http-handler-and-adapters) like Vercel,
Netlify or AWS Architect. Furthermore, it can run on non-Node.js platforms like Cloudflare Workers or Deno Deploy.

[Cloudflare Workers](https://workers.cloudflare.com/) 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!).

## Show me!

{% embed https://www.youtube.com/watch?v=ppT29udbjeo %}

**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!** 👇

### 🛒 [remix-storefront.vendure.io](https://remix-storefront.vendure.io/)


### 👨‍💻 [github.com/vendure-ecommerce/storefront-remix-starter](https://github.com/vendure-ecommerce/storefront-remix-starter)

---

_Special thanks to [Edo Rivai](https://twitter.com/EdoRivai) 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](https://0xcb.dev/) who first got it running on Cloudflare Pages_ 🙏.