BEST PRACTISES

Building a Headless CMS Website: Benefits, Challenges, and Our Insights

Estimated reading time: 11 minutes
April 28, 2022
BEST PRACTISES
Building a Headless CMS Website: Benefits, Challenges, and Our Insights
Estimated reading time: 11 minutes
April 28, 2022
BEST PRACTISES
Building a Headless CMS Website: Benefits, Challenges, and Our Insights
Estimated reading time: 11 minutes
April 28, 2022
  • /
  • /
Product Marketing Manager at Aspirity
Written by
This article was written
in collaboration with
Zhanna F. and Maxim V.
Web Developers at Aspirity
Let's discuss your ideas!
Book a call
with our Client Manager,
Oleg
Meisner
Looking for front-end development team?
If the question is how to build a website with headless CMS, the answer will be quite straightforward. There's no way to do it. So why are we here?

Well, although headless CMS is not a full-fledged solution, it's a great way to address any backend issues. It allows handling everything related to APIs, databases, content, and more. However, all frontend tasks and visual representation of the content still require your effort.

This post explains the use of headless CMS based on our experience with Strapi.

We at Aspirity focus on outstanding frontend development. In most of our projects, backend solutions remain on the client's side. However, this article showcases our experience working on a full-stack project.

We will explain how we dealt with APIs using headless CMS instead of designing a custom solution from scratch. Keep reading to learn our insights and conclusions based on this case study.

How to Use Headless CMS

Before getting deeper into details, let's determine what headless CMS is and how you can benefit from it.

If you have ever built a website in WordPress, it won't be challenging to understand such a system. Simply speaking, headless CMS is a WordPress admin panel without a theme and customized interface.

And that's exactly why it's called headless. Without the front layer "head," it's just a "body" for operating data. Depending on your website's specifics, you can connect it to any kind of "head" you need.

Still don't fully understand how to build a website with headless CMS? Let's make it more clear.

When to Use Headless CMS

As with any other ready-made solution, headless CMS is used for performing standard tasks. So when you need a custom approach to build a unique product, a CMS could be more of a hindrance than a help.

Suppose you're a front-end developer. You want to get your backend solution without diving deep into it. And here, a headless system like Strapi comes to the rescue.

The Aspirity team turned to Strapi because our client had already used it. Strapi is an open-source tool that allows us to work with MongoDB, PostgreSQL, SQLite, and many more. It enables building simple standard backend solutions with ease and getting ready-to-use APIs.

On top of that, these APIs can be connected to any frontend framework you opt for. You can use React, Vanilla.js, or Vue. Or even Angular, if you enjoy sophisticated kinds of entertainment.

So, if you don't want to handle the data on your own and cope with the maze of full-stack development, Strapi will help you create APIs almost painlessly.
Looking for relevant cases?

How to Get Started with Strapi

So how to build a headless CMS website from scratch? The journey of a thousand miles starts with the first step. This case is no exсeption.

How to begin using Strapi headless CMS in just a few clicks?
1
Get started with Strapi.
2
Paste the generated link into your Terminal to run your project. Node.js and Node Package Manager are required.
3
In a few minutes, all the packages will be installed.
From now on, all backend processes will run automatically, no matter which framework you use on the front. Strapi is a platform that allows building all you need very quickly and is relatively easy to use. Here is what exactly you can do from the start.
Set up an API in just a few clicks. Content-Types builder and Events sections will allow you to create simple entry content for your events. You should just fill in the title, description, and initials. This is the core feature helping you create your data structure.
Add new entries and categories. You can add new entries and organize them by categories based on your data structure.
Set roles and permissions. Use this feature to grant or restrict access to your events. Thus, you can make your content publicly accessible by setting it up for the public role.
Publish the content. You can publish your content in a few clicks and make it accessible through the API.

Why Use Strapi

Strapi is an excellent tool for accelerating the development process without diving too deep into backend development specifics like APIs, databases, etc.

Here are the key reasons for turning to this headless CMS solution.

Backend Made Easy

Now, let's explain how it works in more detail.

Here are the core Strapi components you can benefit from:
An interface that allows creating models that are later generated into URLs for creating, editing, and viewing content.
The Koa server, similar in use to Express.js.
Useful documentation, excellent community, and many helpful tutorials.
Models and CRUD are easy to create.
No-code admin panel indicating data connections and types.
Have an amazing idea?
We will be happy to develop that idea into an MVP or a full fledge product!
GET IN TOUCH NOW!
Just fill in the form and we'll schedule a meeting

Wide Choice of Databases

Strapi uses the ORM model that handles much work related to databases.

The Strapi system supports the following databases:
SQLite
PostgreSQL
MySQL
MariaDB
MongoDB
Such a wide choice makes your code free from restrictions related to database queries. In addition, ORM provides you with the basic functions of interactions with tables like Find, Create, Update, Delete, Count, Text Search, etc.

ORM allows describing models that will be created automatically, with no need to directly deal with the database, no matter which one you use.

Automated Admin Panel

In Strapi, the admin panel is created automatically, and it's easy to use for anyone who knows how to cope with tables. The fields are divided into specific types, and each of them goes through validation.

Also, the admin panel includes a built-in roles and permissions system we mentioned above. You can grant and configure various permissions for viewing, editing, got mode, etc. On top of that, this feature works both for admins and the app's end-users, configuring access to any URL.

Email registration works by default. The providers grant access to your app via certain logins. You can configure providers and fill in the list. Thus, registering new users through list editing is quite easy.

Advantages and Disadvantages of Headless CMS Compare to Traditional CMS

So, what's the difference between a traditional content management system and a headless one?

First of all, they differ in their architecture and connection between the app's front-end and back-end sides. A traditional system CMS doesn't require APIs since the front and the back are inextricably linked. In contrast, a headless CMS has an API at the heart of its structure. It makes the connections between content and its presentation layer more flexible.

Therefore, a headless system is more applicable when connecting multiple platforms, frameworks, or devices. In turn, a traditional CMS is sufficient for simple projects that do not require a dynamic and multilevel approach.

Here's how a headless architecture differs from a traditional one.
Keeping this in mind, let's take a closer look at the advantages and disadvantages of a headless content management system.

Headless CMS Benefits

Here are the key benefits of a headless CMS.
The admin panel is easy to use even for beginners.
It's convenient to create one-level models. However, some issues with the components occur when it comes to nesting. Thus, it could be challenging to organize a more complex data structure.
Responses to errors are built-in.
If one needs to handle basic data operations, such systems make life easier.
It's completely free.
The community is very active.
Due to Strapi's popularity, new plugins and templates appear regularly
There are multiple helpful plugins like new localization and providers, connection with Telegram bots, etc.
One of the latest features enables creating drafts without publishing them to the web-site immediately.
Headless CMS includes numerous templates for various types of apps, including eCommerce, blogs, etc.

Headless CMS Drawbacks

Now, let's look at potential challenges you might face when using a headless system.
1
You may need to do much work related to formulas, calculations, data generation, etc. In our case, we had to rewrite almost all CRUD.
2
When we started to work with Strapi, there wasn't Auth0 on the providers' list, which was quite a challenge. However, now it's there.
3
A headless CMS like Strapi causes certain issues when working with databases. These problems will likely arise if you need something more complex than a standard scenario. Suppose you want to update an empty field in a particular database. Replacing a certain value with a null variable can be challenging. In other words, Strapi is not very friendly to non-standard transformations and creative experiments.
Looking for a team?
We solve world-class front-end challenges using ReactJS and Flutter.

Headless CMS Website Building Tech Stack

With headless sites, how to build is not the only question you should ask. It's also what technology to choose when turning to this CMS solution.

Well, as mentioned above, Strapi allows for any technology you prefer. This applies to both frontend frameworks and databases. So the choice of your app's tech stack entirely depends on your preferences, the developers' expertise, and the project's specifics.

When working on the Arctic project, our developers opted for the following tech stack.
The server-side. The app's backend was entirely covered by Strapi, which is Node.js-based API framework.
The client-side. Our front-end developers have chosen React due to its speed, flexibility, great performance, and reusable components.
The databases. Initially, we used MongoDB, which seemed more usual for the JavaScript framework. But later, we changed it to PostgreSQL to align with the client's other products and avoid conflicts in the future scaling process. Another reason was that all databases except MongoDB are relational. And Strapi, when changing the data type in one element, can automatically adjust the type in the entire table.

How Much Does It Cost to Build a Website with Headless CMS

Every website development project is unique. Those built with the help of headless CMS are no exception. Thus, the average cost is quite hard to estimate as it depends on numerous factors.

What should you consider? Your project's specifics, features, complexity, your tech partners' location, required UI/UX solutions, etc.

The only thing that distinguishes a headless CMS website is a streamlined approach to the backend. Building APIs requires less time and effort. So, if a headless CMS is suitable for your project, it might save the development team quite a lot of time. On top of that, using Strapi is entirely free.

There are three key stages of creating a digital product without the need to build the entire back-end system from scratch. Let's look at each of them and roughly estimate their price range.
Discovery. Your tech partners will define your project's key goals and milestones during the discovery phase. Sometimes, more comprehensive UX research is required. This initial stage may cost you approximately $1,000–10,000
UI/UX Design. Next, the designers build a clickable prototype containing all the core functions of your app. After testing it on real users, it's time to move on to creating UI. The design stage's approximate price is $15,000-50,000
Frontend Development. Finally, it's time to build the client-side of your app and connect it to the server-side through API. Depending on your project's type and complexity, the development stage will likely cost you $25,000-100,000

Aspirity is Your Software Dev Team Partner

We at Aspirity always make every effort to meet our clients' expectations and tailor the development process to their needs. Thus, when working on Arctic, a project management platform for a real estate development company, we decided to turn to the Strapi headless CMS solution.

Our team primarily focuses on research, UI/UX design, and frontend development. However, this time we had to deal with a full-stack project. The use of headless CMS helped us overcome all challenges and build an app with a custom frontend, capable of fulfilling its key goals.

Headless CMS solution allowed us to save many precious hours. We avoided wasting time setting up authentications, access rules, and working with data.

And most importantly, has it made the client happy?

No doubt it has. Arctic is a convenient Atlassian-like service with multiple modules and functions, including:
Communication features.
Dashboards and interactive charts.
File storage and sharing.
Task management tools.
Time tracking features, etc.

Address Backend Development Challenges with Headless CMS

Building a website with headless CMS is an excellent choice for frontend-focused and non-IT companies. It will help you avoid many backend and database difficulties.

Headless systems like Strapi enable the development team to concentrate all their efforts on custom UI/UX design frontend solutions. At the same time, building APIs and connecting databases to the front side of the app can be handled with ease.

Many businesses can consider headless content management systems a decent alternative for full-fledged backend development. In addition, open-source CMS platforms like Strapi are completely free. They will provide you with a convenient admin panel, role and permission management, helpful plugins and templates, etc. Thus, you can handle basic data-related operations regardless of the tech stack you opt for.

If you need a more detailed consultation on the use of headless CMS solutions, our experts will be glad to help you out.

We at Aspirity offer multiple services, including UI/UX and web design, frontend and backend development, QA, project management, and more. Our specialists always do their best to build an efficient workflow and find solutions that will meet the needs of a particular project.

Get in touch and tell us about your business goals. Together, we can work a miracle!

Frequently Asked Questions

1
Why Use Headless CMS?
A headless CMS like Strapi is an open-source content management system based on the Node.js framework. Businesses may turn to this solution to save development time and streamline numerous processes like building APIs, coping with databases, using a no-code admin panel, etc.
2
What's the Difference between Headless CMS and WordPress?
WordPress is a traditional CMS that consists of all the required components closely related to each other: the database, admin panel, reading/writing integrations, and frontend. A headless CMS doesn't include frontend, which makes its architecture much more flexible. On top of that, Strapi-like CMS is much faster due to the technology it's based on.
3
Is Headless CMS a Database or a Server?
In a sense, a headless CMS is both a database and a server as they are system components. You can host APIs on the Koa.js server and use the database to store content.
Strapi contains both a server and a database all baked into it. The server hosts the APIs, and the database stores the application's content. Strapi uses the Koajs framework for its server.
4
Where to host a Headless CMS?
You can host a headless CMS on any server, including traditional and alternative ones. For example, Strapi is an open-source platform, and you can deploy it on servers like AWS, Heroku, Azure, or else.
5
Is Strapi Performance Satisfactory?
Strapi system is well-performing and suitable for scalable service-oriented web apps. Building a headless CMS website is quite efficient since no challenges related to ORM and auto-generated controllers are likely to occur.
6
How to Start a New Project with Strapi?
You can start a new Strapi project in a few easy steps:
Install all packages to your device.
Sign up as the first administrator.
Use Content-type Builder to create your collection types.
With your new collection types, create entries.
Manage access in the Roles & Permissions section.
Publish your content.
The API is built and ready to use.
7
Is it Secure to use Headless CMS?
A headless CMS like Strapi is considerably more secure than a traditional WordPress system. Thanks to advanced settings, you can hide your backend from the public. Thus, the hackers won't be able to access it.
This article was written in collaboration with Zhanna F. and Maxim V. Web Developers at Aspirity
Product Marketing Manager at Aspirity
I've been working at Aspirity for almost 2 years now. I work to find the right customers and provide them with the best teams and services helping develop and launch their digital products.
Written by

Building custom software or have an existing one?

Aspirity is an offshore web development agency. We specialize in management, admin, and dashboard software.

If you have a custom software project — contact us for a confidential consultation or just read more from our blog.

If the article seemed interesting to you, share it with your friends