{"componentChunkName":"component---src-templates-post-index-js","path":"/blog/what-is-headless-cms/","result":{"data":{"site":{"siteMetadata":{"logo":"https://content.afosto.io/5719193282412544/brand/AFO-Logo-compleet-kleur-RGBat4x.png","siteUrl":"https://afosto.com","siteName":"Afosto.com","twitter":"https://twitter.com/afosto","facebook":"https://twitter.com/afosto","company":{"foundingDate":"2014","founders":["Tjeuke horsten","Peter Bakker"],"phoneNumber":"050 711 95 19","email":"support@afosto.com"},"address":{"streetAddress":"Kieler Bocht 15C","locality":"Groningen","region":"GR","postalCode":"9723 JA","country":"NL"}}},"strapi":{"blog":{"title":"What is a headless CMS? Explained in 5 minutes","slug":"what-is-headless-cms","id":"57","locale":"en","localizations":[{"locale":"nl-NL","slug":"wat-is-headless-cms"}],"seo_title":"What is a headless CMS? Explained in 5 minutes","seo_description":"What is Headless? What is a headless CMS? In this article, we'll explain in 5 minutes what headless is and why we think it's the future! ","reading_time":"00:05:00.000","published_at":"2022-07-21T07:05:07.595Z","author":"Gijs Boddeus","updated_at":"2022-07-21T07:05:07.818Z","body":"A lot of technologies and platform have been added in the last few years. They have all been created to simplify separate parts of e-commerce and web development. For example, the term **headless** is mainly linked to a CMS (Content Management System), but can therefore also be used for e-commerce. \n\n## What does headless mean?\nThe term headless is pretty clear: without a head. So a headless CMS is a CMS without a head or face. The only thing you can do with it is manage and read content. You are completely free to do with your content wherever and however you want. So you can use the same content in an app as well as on your site. So the front end and back end are separated and you can exchange.\n\nThe way this is done is based on APIs. Through these APIs you can access your content and use it in your application or site. This gives the developers on the front end more freedom in what technology they use to create the website or web store.\n\nTraditional e-commerce platforms, including the current Afosto platform, make the choice for you. The language in which you have to build your web store is then already chosen for you. So you will have to learn this language and you are limited in plugins you can install.\n\n## Why is headless better?\nBecause the developers are free in how they build the front end they can use the latest techniques. Take an example of the site you're on right now. [Afosto.com](https://afosto.com/nl/) is built with [Strapi](https://strapi.io/), a popular open source headless CMS. This is where we manage our pages, blogs and menus. The site itself was created in [GatsbyJS](https://www.gatsbyjs.com/), a widely used Static Site Generator (SSG). The creators of Gatsby have combined all the modern techniques and best practices of the web into one platform. This allows you to create super fast websites that score high for pagespeed. If you test afosto.com with Lighthouse (the technique behind Google's Pagespeed Insights), you'll see that all the gauges are green. \n![afosto-lightspeed-score.png](https://qcqcdn.com/afosto/afosto_lightspeed_score_e6bcc355d6/afosto_lightspeed_score_e6bcc355d6.png)\n[full report](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fafosto.com%2F&strategy=desktop&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext)\n\nSo since the content is separate from the site itself, we could also replace Gatsby for another platform. We at Afosto use [ReactJS](https://reactjs.org/) for the frontend, since GatsbyJS also uses this it was quick for us to learn. Another widely used framework is [VueJS](https://vuejs.org/). For this there is also an SSG made called [Gridsome](https://gridsome.org/). So you have free choice in technology and CMS.\n\n## What is headless e-commerce?\nThe CMS is responsible for the content, but that's not enough for a webshop. Your products must also have a place ([PIM](https://afosto.com/products/ \"PIM Afosto\")), your customers must be registered ([CRM](https://afosto.com/solutions/customers/ \"CRM Afosto\")) and a [shopping cart](https://afosto.com/orders/ecommerce-order-management/ \"Order Management Afosto\") must be maintained. Nowadays there are separate platforms created for each part that specialize in, for example, product management or order management. This gives you the freedom to choose the platform that best meets your needs. Many traditional e-commerce platforms offer everything in one, so-called **monolith**. In this, the front end and back end are intertwined. With headless, the front end only issues commands to the back end to update an order, for example. Read this blog to learn more about [headless commerce](https://afosto.com/blog/headless-commerce-what-is-it/). \n\n## Afosto & Headless \nAfosto has its own CMS system along with a brand new [order management system](https://afosto.com/orders/ecommerce-order-management/), [warehouse management system](https://afosto.com/products/ecommerce-inventory-management-software/) and [a fulfillment solution](https://afosto.com/orders/orderpicker/) for managing and fulfilling your orders. This system is built on decades of experience in the rapidly developing world of E-commerce. Headless is a development of recent years that we follow closely and with which we are currently experimenting with some of our customers. Are you also curious about the possibilities of working with Afosto? Then check out the various possibilities on the site or [request a demo](https://afosto.com/request-demo/)! ","primary_image":{"url":"https://qcqcdn.com/afosto/what_is_a_headless_cms_5f88752f7a/what_is_a_headless_cms_5f88752f7a.jpg"},"blocks":[{"title":"What is headless? ","contents":[{"body":"Headless means that the front and back end of a website, app or digital solution operate independently of each other and are only connected through APIs. This means that the backend (content) is separate from the frontend (the design) of a website. "}]},{"title":"What is a headless CMS?","contents":[{"body":"The difference between a traditional CMS (Content Management System) and a **headless CMS** is that in a traditional CMS the backend and frontend of the website are intertwined. In a headless CMS, these parts are separated from each other. This allows for enormous freedom in how you can show products on your website, in-store display or app. \n\nWith a headless CMS you can also link different backend solutions to 1 frontend, this provides freedom of choice for solutions that best fit your specific situation. "}]},{"title":"What is headless E-commerce?","contents":[{"body":"The headless CMS is responsible for the content but to run an online store you need more than that: Your products need to be managed, your customer data needs to be stored somewhere and the webshop orders need to be managed and processed somewhere. By choosing a headless solution you are free to use different API-first systems in combination with a headless CMS. This freedom allows you to create a so-called \"best of breed\" solution specifically for your situation. "}]}]}}},"pageContext":{"slug":"/blog/what-is-headless-cms/","id":57,"locale":"en"}},"staticQueryHashes":["4130126704","494587200"]}