Remix.run eCommerce Starter
Remix is getting quite some attention lately, and being in the eCommerce space, it has caught our eye.
The performance, server-side data loading, simplicity, and the way Remix.run does not manage cache in the framework is excellent for fast-changing dynamic eCommerce pages - especially at scale. These are some reasons why we have built an open-source Remix boilerplate tailor-made for product storytelling and performance. Learn why here.
Remix vs. Jamstack
The last few years have been packed with front-end frameworks using the Jamstack methodology. Frameworks that are statically pre-generating the web pages so that they are fast. This is great for regular web pages and perhaps when the number of pages is not that big. But when you have more dynamic content, the concept of pre-generation is not the greatest.
Don’t get us wrong, we like Jamstack, and it is an excellent fit with Crystallize. But sometimes, depending on the use case, there's just something that is a better fit, in this case: Remix.run.
With Remix, all the pages are being generated dynamically. Good old server-side rendering (SSR), but with a modern React-based front-end framework. All the page fragments are being rendered in parallel, meaning less waiting.
The way it works is really fancy.
The data on the other side might change, and Remix will fetch the data all the time, but HTTP Cache comes in handy here. It’s really easy to implement Browser Caching, Reverse Proxy Caching, and/or CDN.
And to conclude on the magic touch, the code you write is the same Server Side and Client Side, of course, it’s all (Re)mix. Remix knows when to load the needed data Server Side (onFirstLoad) or via a fetch when browsing subsequent pages or fragments.
Regarding the HTTP Cache, it’s important to mention that the cache control is not part of the Remix framework. It is based on the HTTP standards where you use the cache headers. Having complete control over the HTTP cache headers with a great CDN in front, you have the foundation for event-driven HTTP caching.
You can decide to have a cache strategy for SSR page loads and for data loading.
Protip: don’t forget to consider that only the SSR cache is in play on the first load as the data are (re)mixed in the page rendered server-side.
In short, speed, standards-based, simplicity, and ultimately more control. And that is not all. With Remix, among other things, you have nested routes natively (on top of React Router v6), Optimistic UI mechanisms, a fancy way to handle the errors (server or client-side), and “Actions” managed like a charm to handle your forms! (with or without JS)!
When is Remix Great for eCommerce?
By default, Remix is dynamic. It is optimized for delivering dynamic content in real-time. There is less overhead in the framework, which is also great for site speed.
We have already talked about cache-control with fine-grained headers. This means that we can cache content in a more controlled fashion. E.g., we could cache prices for a specific type of customer. We can purge cache based on tags.
Remix.run eCommerce Starter
To make it easier to get started with Remix and eCommerce, we have built an open-source Remix eCommerce Boilerplate. This boilerplate allows you to quickly get up and running with a fully functional webshop built on the following tech stack:
- Remix.run as the frontend framework
- Tailwind for styling
- A CDN of choice for event-driven HTTP caching
- Crystallize as GraphQL ecommerce backend
Crystallize + Remix + Fly.io + Fastly
With Remix being built on web fundamentals we can more easily design our composable commerce stack to fit our needs. The first composable commerce stack we launched with Remix is based on the following:
- Remix.run - frontend framework
- Fly.io - hosting service
- Fastly - CDN caching
- Crystallize - super fast GraphQL ecommerce API
We did a Livestream on this boilerplate and commerce stack. You can view the recording below.
Where To Go From Here?
Without a doubt Remix is an exciting new framework that offers amazing possibilities out of the box. And yes, only time will tell if it will catch on.
It’s as easy as that!