What is headless Magento 2?

The headless approach is very common in e-commerce nowadays. But what is it, what advantages it has, and why do Magento 2 merchants need to go headless? Let us briefly explain the essence and show some examples.

What does headless Magento commerce mean?

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:

• Flexibility. Thanks to the separated frontend and backend, you can manage the content of your website and make changes without affecting the business infrastructure. That helps you meet constantly changing demand for new features and shopping capabilities.
• Customization. The headless system allows you to do experiments and customize both parts of the website independently without any consequences.
• Speed. A headless website can be much faster than usual because changes on the frontend don’t require the same changes in the backend and vice versa.

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 for creating headless Magento store, and you can lose some features. But there are already successful examples of Magento 2 websites that are headless. We will consider them below.

Examples of Magento 2 headless stores

Magento is a good choice for the back-end of headless architecture. Below are examples of combinations of headless Magento 2 as a backend and CMS or framework for the frontend.

Eleganza: Magento + PWA Studio

The website of the brand Eleganza is one of the few examples of headless Magento 2 where PWA is used as the frontend part:

Zadig & Voltaire: Magento + Vue Storefront magento 2

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 vue Storefront Magento 2 integration on the Magento Live event.

Oliver Bonas: Magento + bespoke front-end framework (Tom & Co)

Oliver Bonas is one of the examples of headless Magento with Angularjs-based framework:

But bespoke can be used to create headless Magento on React.js, Vue.js, or other modern javascript frameworks, as well.