Or why am I building one…
Static website generators are gaining more and more popularity these days, but most of the websites people build using them are quite simple and contain just a few pages. But this doesn’t mean these generators can’t be used for building something much more complex.
Like a storefront for the Magento eCommerce platform. Which is one of the complex eCommerce platforms there is?
Let me be clear.. this wasn’t really a good idea just a few years ago with only REST endpoints in place.. but with all the work done around GraphQL — it makes much more sense now.. especially taking in mind that there is already a static website generator.. GatsbyJS, which has GraphQL support in its core.
Let’s elaborate on pros for building a static storefront:
- harder to break
- easier to scale
- easier to optimize for SEO
- much simpler deployment setup/architecture (no need for extra proxies (more cache levels), easy to integrate with CDN)
- lower hosting costs
- easier A/B testing for marketing
- very fast landing pages
Pros for building it specifically on top of GatsbyJS:
- access to a vast variety of a GatsbyJS plugin ecosystem
- great community (you can get answers to your question, get training, get lots of plugins for free)
- VC-backed startup growing really fast
Now I’ll cover each point in more detail.
Harder to break
As I’ve pointed above — Magento is complex. It’s not bad, but sometimes some change in one module or config file can break the whole frontend. But you’ve tested everything on the development environment... and even on staging — ALL WAS GOOD… But on a live website, there was one tiny difference nobody noticed and it broke the code... and your website is down now.
With all the pages pre-generated before deployment — this is simply not possible. You generate them from the live DB and can even run functional tests after. Then deploy. Impossible to break.
Easier to scale
With your whole storefront being just static files you can deploy it to different locations (hosting providers) without much effort — you just need a reverse proxy like nginx which will serve static files from a location closer to your target audience. Black Friday is coming? Server load from serving a static storefront to your users will be a hundred times lower compared to a dynamic storefront.
Easier to optimize for SEO
All the content in the static storefront is already pre-generated and is fully indexable by the search engines, even though it is a React.js application.
Server-side rendering is also possible on the other storefronts, but it’s not than fast (in the case of React.js ones — due to Facebook not investing many resources on improving React.js server-side rendering performance). And Google likes fast response times (surely you can cache it.. but then you need to warm up the cache.. caching adds complexity, bugs and affects running costs).
Much simpler deployment setup/architecture
To add one more server for serving only the frontend — you just need to deploy nginx (or something similar) there, so you can use very cheap cloud nodes for this. Plus there are way fewer reasons for something to go wrong with deployment.
Lower hosting costs
Your users spend way more time browsing your catalog than on checkout page. So if all that traffic goes to the static pages... you can serve way more checkout page views and you are decreasing you hosting costs significantly.
Easier A/B testing
With a static storefront it is really easy to generate COMPLETELY DIFFERENT versions of your website and serve them to different visitors.
You just create different branches for each version, build and deploy them to different directories. Then configure your webserver/load balancer to serve them to different users based on some conditions.
Nothing breaks. Development costs — way lower.
Very fast landing pages
So you are launching a product.. and you’ve spent thousands of dollars on your marketing campaign.. and when traffic hit your store — catalog is loading terribly slow.. conversion rates dropping.. and you are losing money.
This is most likely won’t happen with a static storefront.
The only thing is that nobody has ever built a static storefront for Magento yet. That’s why I’m building one:
Link to the latest demo: https://magento2-gatsbyjs-pwa.mobelop.com/
Still buggy, only simple products work. But it’s built with the support for PWA Studio in mind (official Magento frontend framework for building Progressive Web Apps). Whole checkout flow works — possible to place orders and accept payments using Braintree.
This work is going to be open-sourced.
Follow me to stay updated.