The headless approach is very common in e-commerce nowadays. But what is it, what advantages it has, and why Magento 2 merchants need to go headless? Let us briefly explain the essence and show some examples.
In a nutshell, a headless website is a site where your store frontend and the backend are separated, and data exchange is set up via API requests and retrieving. The frontend part of a website is called “the glass” and can be configured with the help of the e-commerce solution, the CMS, or a combination of both.
This approach has the following advantages:
Note: How to increase your store speed up to 95 in Google PageSpeed Insights? Amasty Google Page Speed Optimizer can help you to achieve the maximal score by automatically minifying and merging the JS and CSS files, optimizing HTML code, and resizing images without quality loss. Enable lazy loading and use webP format to make your website layout upload faster.
Of course, we should mention that this system has some disadvantages. The development of such a website is more complicated and requires a lot of specific technical skills. Also, there is still a lack of available APIs, and you can lose some features. But there are already successful examples of Magento 2 websites that are headless. We will consider them below.
Magento is a good choice for the back-end of a headless website. Below are examples of combinations of Magento 2 as a backend part and framework or CMS for the frontend.
The website of the brand Eleganza is one of the few examples of using PWA as the frontend part:
VueStorefront Is one of the most used frameworks for creating the headless website with Magento 2. Jonathan Ribas, CTO, did talk about their shift to a modern technology stack on the Magento Live event.
Oliver Bonas is one of the examples of headless Magento with Angularjs-based framework: