DEV Community

Cover image for Which Frontend Framework Would You Use For an Ecommerce Storefront?
Shahed Nasser for Medusa

Posted on • Updated on

Which Frontend Framework Would You Use For an Ecommerce Storefront?

Medusa provides 2 starter storefronts for your headless commerce platform, one using Next.js and one using Gatsby. These 2 frameworks not only provide a good developer experience, but they also allow you to create fast ecommerce storefronts. This provides users with a good experience when using an online store.

In addition, as Medusa is a headless commerce platform, developers can create a custom storefront with any frontend framework of their choice. They just need to interact with the REST APIs.

If you were to create an ecommerce storefront and had full freedom to choose which frontend framework to use for the storefront, which would you pick and why?

Discussion (59)

Collapse
hacker4world profile image
hacker4world

I would use Vue.js it's so fun to work with

Collapse
shahednasser profile image
Shahed Nasser Author

Would you use it with Nuxt.js or any other framework? Or as is?

Collapse
joshwcorbett profile image
Josh Corbett

Definitely recommend using Nuxt because of the SEO and SSR for better and performant storefronts

Collapse
hacker4world profile image
hacker4world

Of course i would use nuxt for better seo and performance

Collapse
gjorgivarelov profile image
gjorgivarelov

As an owner of an online store, I chose a vendor based on the steapness of their learning curve. The less buttons I had to toggle, the better it looked to me. It took few hours to set up the store on SquareSpace, it wasn't painless but it definitely takes shorter time than building one on my own from scratch. From scratch also means customized- yes, but you'll quickly learn that standardized look sells waaaaay better than the custom one.
I am the producer of the items sold on my store, the photographer, the market research, the social media contact, the customer service, the business owner and not to forget the day job I still have otherwise this web store of mine would not exist. I can't also be the webmaster, security expert and developer- I have to focus on the business itself...
So whenever you set out to build a web store for someone else, mind that number: the number of toggles to press. The less there are, the better it'll look to your customer.

Collapse
shahednasser profile image
Shahed Nasser Author

That’s a good perspective. I agree that it’s important to minimize the number of steps and buttons, to make the navigation from one place to another faster, and to provide an intuitive experience where people can easily find what they need.

Building a custom store doesn’t have to be from scratch though. There has been a lot of open source work that allows you to take something already existing and turn it into your own vision with a few tweaks. You’ll find that a hassle with most enterprise solution and might require a lot of workarounds.

Collapse
justkeithcarr profile image
Keith

Hi Shahed. Mind me which templates you tend to look at?

Thread Thread
shahednasser profile image
Shahed Nasser Author

Not sure what templates you mean

Thread Thread
justkeithcarr profile image
Keith • Edited on

Oh I saw you spoke on templates and I thought you might of actually used a few.

Collapse
codewander profile image
codewander

I have no experience with ecommerce systems, so I wouldn't place much weight on my advice.

Between next.js and gatsy, I would choose next.js because it can support incremental server side generation of content, which means your rebuild times can be fast, while allowing your full catalog of product pages to be generated as they are accessed. Remix's server side rendering might be interesting as well.

Collapse
shahednasser profile image
Shahed Nasser Author

True, they all have their pros and cons

Collapse
codewander profile image
codewander • Edited on

In an ideal world, python / ruby / golang server side rendering would smoothly interoperate with client side hydration in frameworks that already existed, instead of just having node + js for that option. Then I would pick python server side rendering combined with js client side hydration.

Update: golang has "bud" framework for ssr with js views. So, just waiting for ruby and python ssr frameworks.

Collapse
lukasw12v profile image
lukas
Collapse
shahednasser profile image
Shahed Nasser Author

A great option!

Collapse
ijimmoore profile image
Jim Moore

Pricey, no?

Collapse
jfbrennan profile image
Jordan Brennan

Wouldn’t use a frontend framework for an e-commerce site. I’d serve server-rendered product pages cached as close to the device as possible.

Collapse
christiankozalla profile image
Christian Kozalla

Right. Traditional SSR without client-side hydration is the way to go in my opinion 👍

Collapse
shahednasser profile image
Shahed Nasser Author

Interesting, why is that?

Collapse
jfbrennan profile image
Jordan Brennan

For e-commerce you want insanely fast page loads with perfect SEO and server-rendered with aggressive caching is how to achieve that. E-commerce sites also don’t have a lot of serious client-side state management. It’s mostly CSS magic and simple JS for interactions and cart management.

Collapse
ivanjeremic profile image
Ivan Jeremic

Marko.js was so to say made for best ecommerce performance so nobrainer.

Collapse
shahednasser profile image
Shahed Nasser Author

I’m honestly first hearing about it from the comments so that’s interesting to me

Collapse
ivanjeremic profile image
Ivan Jeremic

It is a Framework made by Ebay

Thread Thread
shahednasser profile image
Shahed Nasser Author

Ohh that's so cool I had no idea

Collapse
danilovmy profile image
Maxim Danilov

I wrote my own e-commerce backend on python and use vuejs/nuxtjs for the frontend.

I don't understand why I need anything more than nuxtjs.
There are enough components, a large community. And it's very fast.

Does medusa have any advantages?

Collapse
shahednasser profile image
Shahed Nasser Author

It's important to point out here that the comparison shouldn't be Medusa vs python and vue.js. Medusa is composed of 3 components: the headless server, the admin panel, and the storefront.

Medusa's headless server is built with Node.js in an abstract architecture to allow developers to easily customize existing features or integrate third-party services in a plug-and-play process. Instead of being dependent on a specific service, you install an existing plugin (or create your own), add the necessary configuration and code for it, and it will run as part of Medusa.

The headless server also provides you with the freedom to connect any frontend to it uniformly. This means that the implementation for the server is not catered to a specific frontend like a website which would put mobile apps at a disadvantage, instead, the headless server handles all logic independently of what frontend is accessing it.

So, you can choose to create the frontend with Vue.js or any similar framework. There are existing starters that you can set up but you can also use your own.

I think the biggest advantage, however, is the fact that it's an open source platform. It's very cool that you created your own, but you can alternatively utilize an existing open source platform like Medusa and customize the code as you see fit. No limitations or workarounds whatsoever.

This allows you to reuse an existing platform with many ecommerce features instead of reinventing the wheel, and focus on adding your own custom features.

Collapse
wesen profile image
Manuel Odendahl

Whatever frontend you already know, to be honest. If possible, something that has a cart and checkout component you can reuse. The rest is just standard pages.

Collapse
shahednasser profile image
Shahed Nasser Author

That's a good point! If you can reuse something it's definitely better than reinventing the wheel

Collapse
ajshivali profile image
Shivali Pandey

I would use react or vuejs. I personally prefer vue, it is so easy and fun to use. Also passing props and data bindings are so much easier. Vue also provides you with hooks already so you would not need to create any custom hooks.

Collapse
shahednasser profile image
Shahed Nasser Author

That's cool, would you use any specific frameworks with each?

Collapse
heyylateef profile image
Lateef Adetona

Shopify announced their Hydrogren framework, its a React based framework that uses GraphQL to query products in the components. I'd probably use this for my own ecommerce storefront

Collapse
goldnead profile image
goldnead

I just wrote my own shopify storefront wrapper with alpinejs on an existing site that runs on statamic. Depending on the store complexity and what stack you want/have to work with that is a lightweight and pretty flexible option.
Thought about using it with a Medusajs backend in a future project. Seems promising :)

Collapse
shahednasser profile image
Shahed Nasser Author

Sounds interesting! Looking forward to see it with Medusa

Collapse
badt0men profile image
Daniel Dozie

I actually used Nextjs for a Shopify custom Storefront I'm working on.

semmslux.com

Speed, SEO et al.
The idea is to use something you're pretty familiar with, so you don't waste time trying to fit in circles and squares. Especially when you have a deadline.

Collapse
shahednasser profile image
Shahed Nasser Author

I agree with you. And unfortunately a lot of ecommerce platforms don't give you the freedom to choose what frontend framework to use to enhance the user experience. You'll probably end up stuck with something like PHP

Collapse
paratron profile image
Christian Engel

Since ecommerce pages are mostly static and need really good SEO, I think I'd pick elderJS to build it.

Collapse
shahednasser profile image
Shahed Nasser Author

Another Svelte framework, I see a lot of love for Svelte!

Collapse
zainbinfurqan profile image
Zain Ahmed • Edited on

I am currently using Next.js for one E-Commerce project and its pretty good in terms of "SEO", "Code quality", "problem solutions response on different website" & much more.

Collapse
shahednasser profile image
Shahed Nasser Author

Agreed it’s a good choice!

Collapse
aguilera51284 profile image
Arturo Aguilera

Solid.js

Collapse
shahednasser profile image
Shahed Nasser Author

Interesting choice!

Collapse
andrewbaisden profile image
Andrew Baisden

I would go with either React, Next or Medusa.

Collapse
shahednasser profile image
Shahed Nasser Author

Good choices!

Collapse
alaindet profile image
Alain D'Ettorre

I'd like to see Angular

Collapse
shahednasser profile image
Shahed Nasser Author

Would love to see an ecommerce storefront built with Angular

Collapse
christiankozalla profile image
Christian Kozalla

I'd like to try Marko.js for an e-commerce project!

Collapse
shahednasser profile image
Shahed Nasser Author

That’s a new one!

Collapse
brense profile image
Rense Bakker

Payload, vite, react, vercel, stay headless 😉

Collapse
satyamr123 profile image
Satyam Rajvanshi

Vue and Nuxt

Collapse
elenajo67265278 profile image
Elena Jones

very insightful!

Collapse
ijimmoore profile image
Jim Moore

Nuxt works great w SHOP or Commercetools. I wanna try Squarespace too tho

Collapse
merthod profile image
Merthod

NextJS has one of the strongest templates there is.

There's also another based on a real-time Node fw that adds those kinds of utilities.

NextJS FTW!

Collapse
alphonso06 profile image
Al Javier

React or Svelte. Both are enjoyable to work with.

Collapse
shahednasser profile image
Shahed Nasser Author

Would you use any specific frameworks with each or as is?

Collapse
moutafatin1 profile image
moutafatin1

What about remix ?

Collapse
shahednasser profile image
Shahed Nasser Author

Good choice!

Collapse
james_palermo_bc208e463e4 profile image
James Palermo

dotNET. Robust, well supported, expandable to massive scale, fully cross platform, and highly opinionated.

Collapse
snelson1 profile image
Sophia Nelson

Great post!

Collapse
booboboston profile image
Bobo Brussels

Very good stuff