• Why improve website performance? Dukaan case

Liquid (the current templating languages used in shopify storefronts)

It is very slow and is built with Ruby on Rails and remains one of the biggest pain points of Shopify stores. It was made as a easy-to-learn way to build shopify website directly on shopify backend on not write own server side code. it is the non-headless approach to build on shopify and used directly on shopify website editor in both code and Drag and drop format

<aside> 💡 Addressing the very issue of poor performance of Liquid based websites - Shopify themselves came up with Shopify Hydrogen framework built on Remix JS.

</aside>

Why hydrogen with Remixjs is a game changes? Link here

The basic philosophy of remixjs state’s it all

By not abstracting default we behaviours and allowing developers to have a choice to use them unlike frameworks like Next js who over-abstract in the name of developer ease and then developers become dependent on them to improve the functionality.

In the performance test using default img loading behaviour that Nextjs abstracts with ‘next/image’ we were still able to retain a very high performance with such a content filled site.

No deployment cost with maintaining servers as hydrogen is completely Oxygen(Shopify backend framework) compatible and run’s directly on Shopify’s distributed CDN.

Key advantages of Remix -

• It compiles with esbuild, an extremely fast JavaScript/CSS bundler and minifier.
• It uses progressive enhancement on the server side. Only necessary JavaScript, JSON, and CSS content are sent to the browser.
• It performs dynamic server-side rendering.
• It knows when to refetch mutated data, as Remix oversees the whole workflow.
• It includes an end-to-end solution with React Router, server-side rendering, production server, and backend optimization.