A headless architecture typically consists of three layers; headless services, service API and channel head. The core concept is to decouple the backend services like PIM, eCommerce, CMS, Payment and Authentication from the frontend. To glue the heads together, a layer of shared internal services is added that handles syncing between the stack services, as well as operations, such as authentication, order intake or payment.
The benefits of this type of architecture are:
- Freedom to use any front-end framework
- Build a stack of best of breed services, fit exactly to your business needs
- Easily share services across all channel heads
- Update frontend independently of services
- Innovate and experiment with new channels
Channel head aka frontend
The head in headless is the frontend. This is where you build your tailor made storefront, website or app. The responsibility of the frontend should ideally be to display content and enable navigation and search for your customers to find the products and content of interest.
Technologies used in the frontend are typically; React, Vue, NuxtJS, NextJS, GatsbyJS, React Native and Flutter. The frontends are typically hosted on modern hosting services like Vercel, Netlify, Gatsby Cloud, Cloudflare pages or directly on the lower level web hosting services like AWS, Azure or Google Cloud.
Following a headless approach allows flexibility to build the frontend in your favourite framework and host it on your hosting provider of choice. Jamstack, SPA (single page application), SSR (server side rendering) or Native App.
Middleware Service API
The service API is the glue in your headless architecture. It links all the different stack services as well handles parts of the business logic, such as handling payments, authentication, etc. Again, any server-side technology that you are familiar with can be used to build the service API, such as NodeJS, Golang or Ruby and exposed via a simple GraphQL or REST + JSON API.
The individual services are typically implemented serverless for simple horizontal scalability with increased traffic. Practically this is where you connect your API tokens and data from your visitors with the headless API services. E.g. collecting the payments from Stripe callback, creating an order in Crystallize and sending a confirmation email using Sendgrid. The glue for your business.
API services should ideally not persist data, they should simply translate requests between services. The service API is typically hosted on a dedicated service for serverless hosting. Like Vercel, Netlify, Heroku or AWS.
Headless API services
The headless API services are the backend of your headless stack. This is where you build a best of breed stack of services. The toolbox that you use for your Internet craftsmanship. By choosing a range of services you have the freedom to build a stack that fits your business as opposed to shoehorning your business needs into a monolithic single vendor architecture.
Having picked the right services for the right job will allow your solution to scale horizontally and always perform no matter the traffic.