Nowadays on the web you can find sites made in any way: sites created in pure HTML (like the first page created in the history of the internet), sites created through builders like Instapage, sites structured using CMS like WordPress or Drupal (at least once in our lives we have all banged our heads on it) and more complex sites that look like real web applications because of the way they are structured.
The desire of a development team is always to innovate and still innovate by going after the latest frontiers of coding especially to get everyone in agreement: SEO must be first, so you need a site that performs well and is completely open to changes for constant indexing on search engines; first place must also be graphics because of course the first impression is very important with WOW effects and storytelling. A developer, however, must always consider data security and cleanliness of code he publishes so as to make life easy for later implementations and maintenance of the whole project.
How then to achieve a good but at the same time lightweight product?
One could express the concept of Headless in more than one way so that it can be understood by everyone, technical and non-technical:
- “Each module of the site must be responsible for only the part it is responsible for” (an abstraction of the SOLID principle of Single-Responsibility, if there are any programmers).
- “Each section of the site must be well defined and developed in the best way for what it is supposed to do, even going so far as to create complex structures that interact with each other via APIs” (perhaps we are still too much at the technical level).
- “The site must have well-defined zones with one application dedicated to the frontend and one to content management and, why not, a third application useful for managing complex interactions within the site.”
In short, the latest frontier in web development is to create sites in which there is a platform for displaying content and a CMS platform for managing the content to be exposed to users: a Headless CMS.
What Headless means
There is nothing supernatural or spooky about using a Headless CMS: this name is used to describe the already popular decoupled (decoupled) software architectures in which two applications are built that communicate via APIs.
In the development of these solutions, therefore, there is a tendency to insert an additional layer between the content and the end user who navigates the page via his or her preferred browser. The difference with monolithic CMS systems such as WordPress is that of not having all the content and web pages on the same platform (to understand: on the same web space), but having a platform dedicated solely to content management and a platform that requests the data to be displayed to the user and displays it in the correct way via the browser.
The presence of multiple layers to maintain might give headaches to those who have always been accustomed to monolithic or even static solutions in which you know exactly whose responsibility it is to display a given piece of content. But a development team and, more importantly, a well-organized project can benefit enormously from such an architecture.
Key benefits of a headless CMS
Building a website with Headless technology certainly requires a development team capable of working with both frontend technologies such as html, css and javascript, and backend CMS platforms such as WordPress and Drupal written in PHP. At the strategic level of both advanced technological positioning and the possibility of multiple integrations, a decoupled website could bring numerous advantages over monolithic solutions dependent on standard plugins or modules.
Total graphical flexibility
To begin with, a WordPress theme has to follow certain semantic rules of construction given by the monolithic setting of the platform. There are many developers who have now customized and created themes that guarantee endless possibilities, but, in some way, you are always connected to the original platform’s starting structure.
With a decoupled site, one is able to develop the site’s graphics with the framework, libraries, and dependencies necessary to best suit the graphic design created. Javascript frontend frameworks based on Vue or React can be used to generate disparate customer journeys by allowing developers to animate and entertain users using the right technologies and not by trying to “run” certain libraries within projects that do not natively match these capabilities.
The key principle is just that: being able to focus on technologies that natively are designed for this type of development.
Speed and performance
A Headless CMS guarantees an optimized content management platform: the administrative user in charge of entering and maintaining posts and pages accesses a different backend panel from the site that users will then go on to browse.
This technological decoupling allows the frontend, perhaps developed with Javascript frameworks, to be uploaded to hosting platforms that are optimized to ensure speed performance in the enjoyment of the Web site. The frontend, in this way, will be solely in charge of displaying content while also using CDN (Content Delivery Network) and caching systems.
SEO Friendly
The decoupled system is easily scalable in terms of functionality. Headless CMSs often give the ability to extend manageable content for each type of page or post by ensuring that additional text fields can be added such as the entire management of parameters useful for SEO optimization of pages: title, meta description, structured data… In a moment, this information can be exposed via API and sent to the frontend so that it can be quickly integrated within the pages.
Security and maintenance
As mentioned earlier, in a Headless site the content, and therefore all sensitive data, does not reside on the platform that users access to navigate the site. On the other hand, WordPress is a monolithic platform, and a compromised plugin-which would perhaps have no interaction with the frontend-could lead to data loss or theft.
A decoupled system, on the other hand, provides greater security that cannot be achieved even with plugins or security modules of traditional CMS platforms. In fact, adding a layer between the frontend and backend allows the database to never be directly exposed to users while keeping both the data and the users secure.
Scalability
In the event that there is a spike in users, brought about for example by marketing activities such as DEM or Paid campaigns or a normal growth in organic traffic through a proper SEO strategy, a decoupled frontend is easily scalable so that its performance remains unchanged.
The choice of frontend framework hosting service selected for development therefore plays a key role in the implementation of a Headless CMS-based site.
Headless E-commerce
Headless technology could also be used to create e-commerce platforms through the integration of Javascript libraries such as Snipcart. Such a library allows having the order management backend on a separate panel from the frontend where the full potential of the decoupled structure is maintained.
The e-commerce architecture could be developed by integrating 3 different modules:
- Headless CMS platform for managing the textual content of the site
- E-commerce module integrated via Snipcart
- Frontend that collects information from both backend systems and makes it available to the user in a conversion-optimized navigation
Such a system shows so much potential in that it may not be limited to just integrating an e-commerce module and a content management module, but additional third-party platforms could be integrated.
Read also: E-commerce and UX: user-proof shopping experiences
WordPress Headless CMS
Wordpress is the most widely used CMS platform in the world, and since the latest versions it has made RESTFul APIs natively available to allow developers to expose content transparently to different systems.
The power of WordPress is definitely the spread of the platform: the content entry and management part is known to most and is easy to learn. Through the API exposed by WordPress, custom frontends can be created making it unnecessary to install a theme. The WordPress API, however, may be limited for certain applications, and therefore the development of a custom theme or plugin useful for exposing all the information in a way that is optimized for the associated frontend may be necessary.
Who needs a headless solution
Maintaining a decoupled platform does indeed require systemic technical knowledge for server management, backend technical knowledge for content management systems, and frontend technical knowledge for all that part of website development with which the user interacts.
If you can rely on a team of developers (like ours!), however, this structure will give you many advantages.
An inclusive Headless CMS solution provides scalability and multiple possibilities as content is called from the frontend via API calls. There may not even be a single frontend, but the same content could be exposed on multiple platforms: a corporate site could, for example, easily integrate the latest blog articles with minimal developer effort.
A standard decoupled architecture could therefore involve:
- Frontend site developed with JavaScript frameworks such as Nuxt.js or Gatsby.js
Headless CMS based on WordPress with custom theme creation to ensure API exposure conforms to project specifications - Third-party platform for a data integration coming from the enterprise CRM.
In this infrastructure, the different platforms would communicate with each other via consistently structured APIs for all systems and ensure a constant and secure flow of data.
A user could easily find, on the frontend platform, the latest blog content optimized for a conversion-focused navigational flow. In the case where the user is interested in the product and wants to get in touch by leaving their details, then the system can communicate them directly to the CRM.
This solution makes it possible not to use intermediate databases as might happen, instead, in monolithic CMS contact collection forms. The user would then find himself at the center of a new, secure infrastructure built specifically on the customer journey designed for his needs.
