Proper technology stack for ecommerce
Hi guys,
Trying to figure out what framework to use for an ecommerc application that will need to scale well. I am currently between next.js and remix.
What is the problem?
Currently, my main technology stack is React, Typescript, React Query. And the only thing I would want from an app is for it to be well suited for SEO and Core Web Vitals. Which means I want to bypass the initial blank page created by react. So it needs SSR.
The backend is written in ninja (python) and exposes its api which will be the main data provider for the application. After a thorough review of Next, I feel that it is a bit too much for my needs. It is known that optimization of fonts of images etc. etc. is needed but it can also be done without next's built-in solutions. Remix seems smaller as well as faster, which is what I care about (Core Web Vitals and user's sense of site speed).
In addition, if the data comes from the api then I don't see the need for this data to be additionally processed on the backend side of next or remix. On the other hand , for example, a product page will have to be to render this page on the server side for caching purposes. Here I was also looking at next.js solution with PPR and using CDN for that, but I don't know if it's worth working on it especially since it's an experimental solution for now (The problems with hosting this solution outside of Vercel don't encourage me either). To summarize the technology stack current is React on the frontend and API in python. And needs help in finding the best solution for optimizing react for SEO
The backend is written in ninja (python) and exposes its api which will be the main data provider for the application. After a thorough review of Next, I feel that it is a bit too much for my needs. It is known that optimization of fonts of images etc. etc. is needed but it can also be done without next's built-in solutions. Remix seems smaller as well as faster, which is what I care about (Core Web Vitals and user's sense of site speed).
In addition, if the data comes from the api then I don't see the need for this data to be additionally processed on the backend side of next or remix. On the other hand , for example, a product page will have to be to render this page on the server side for caching purposes. Here I was also looking at next.js solution with PPR and using CDN for that, but I don't know if it's worth working on it especially since it's an experimental solution for now (The problems with hosting this solution outside of Vercel don't encourage me either). To summarize the technology stack current is React on the frontend and API in python. And needs help in finding the best solution for optimizing react for SEO
10 Replies
Remix is really good for optimizing for core web vitals, especially for ecommerce. Shopify even bought it and now it's the framework they recommend for ecommerce
Okay, but if I choose remix should all api traffic go through the remix backend? In next js I had an idea that those things which should be cached e.g. products will be passed through next backend. And for example user data will be managed in the frontend part by fetch api and react query. Does this approach make sense in remix?
I'd still advise having those reqs run through the server on Remix or Next, for a few reasons:
1. More control over handling, easier, cleaner code/separation of concerns
2. Easier and cleaner to enforce security
And last but not least, the most important reason and big perf gain, is that if you call your API via your frontend on the server side, and your API/frontend are using the same hosting provider and are close to eachother, that API request will execute much quicker from server <-> server as opposed to the client -> backend
Either one will work fine. Both are really good for optimizing web vitals and your users won't really notice a difference.
Next has waaay more info/examples online, so it might be easier to get started. And next's image optimization is really hard to replicate manually.
Also there are no problems hosting next apps outside of Vercel, there are only problems hosting a serverless next app.
But I'm pretty biased towards next. You should probably play with both and see what you like more.
You don't have to (and probably shouldn't) create a next api to proxy requests to your backend. It will just add one more network hop for your requests. Caching can be done without it.
Moreover, if you handle all the user-specific data on the client, then you can probably just cache your pages. That would be simple and great for the web vitals
Yes, but if you leverage SSR, then you can have your API requests happen much closer to your server
That's true, but only if that server is the end destination for the request and not just a proxy for a different server.
Ecommerce backend usually has a lot much more logic besides serving data for the frontend and it's often not feasible/reasonable to move all of it into next/remix
Use sensible routing, cache 99% of the page and use redis
Or the V thing that replaced it
The most important thing there is to make sure the cart component/account component isnt cached. Almost everything else can sit in cache storage for days or until a save on a product triggers a purge for its product page and a couple of catalog pages
Good PSPs will usuallt provide modules to implement, check out all platforms they offer their module for
And whatever you do, dont go Magento
i made this table which outlines what nextjs can do
but can anyone confirm if remix can also do all those four? (ssg, isr, ssr, csr)??
After learning more about Remix I see that the main communication goes through the server we use the loader() function for this. It is also recommended there to use the fetch function (remix boasts optimizations of this functionality so that there are no race conditions, for example)(https://remix.run/docs/en/main/guides/data-loading#external-apis).
But it also allows you to do queries through clientLoader. (https://remix.run/docs/en/main/route/client-loader#clientloader). It can be used to baypass remix backend.
In addition, if I understand the way the remix works (please correct me if I'm wrong) in the case if we would change, for example, the color of the product, it would change the entire path and ask the server which would render the page anew. And in the case of using clientLoader we can simply change this data as in SPA application.
The problem I noticed is that it is not possible to use Providers (contexts) the only one available is OutletContext (https://remix.run/docs/en/main/hooks/use-outlet-context). So the data must be stored on the server or in cookis (https://remix.run/docs/en/main/discussion/state-management)