When content is fluid and relative to the medium brands are often focused on repurposing and reusing the same message on multiple platforms. With so many different articles, posts, apps, and countless other types of content to track, having a good CMS is more important than ever.
Content Management System (CMS): a tool that helps users create, manage, and modify digital content.
As it stands, there are a few different types of CMS:
A traditional CMS (often described as monolithic) couples the frontend (the design of a website and its content) and the backend (the interface used to create content) bundled into a single application that is web-first.
CMS providers like Wix, WordPress and Squarespace are good examples of the traditional model. They usually require the use of a specific framework or language with everything tied into a specific application.
A decoupled CMS has a backend where content is prepared for presentation and a frontend that can be separated from that. The content itself can either be pushed for delivery via an API or an integrated frontend.
The data from the backend is always published somewhere, regardless of whether calls are being made to the API or not. Headless WordPress and Drupal with REST APIs are a good example of the decoupled model.
A headless CMS has a backend where content is prepared and that's it. The content and its data are only accessible via calls made to the API - be it REST or GraphQL. Headless CMS don't come with a frontend or presentation layer built-in and is how most modern CMS like Strapi, Contentful and Sanity work.
Note: Headless CMS is a subset of decoupled CMS. The major difference between the two is the presence of an optional frontend interface in decoupled CMS and complete lack of a frontend in headless CMS.
Traditional CMS were the industry standard for more than a decade, but the times they are a changin'. With content now playing a major role in every modern business, any CMS that locks users in and limits the possible distribution of content is out of the question. It is often possible to build a new in-house solution that forces the olds tools to work with modern problems, but that requires a lot of time and resources.
On the other hand, decoupling the backend from the frontend with a headless CMS gives users the ability to instantly expand the reach of their content and the platforms they can serve. That extended audience is an invaluable asset for any company looking to find new audiences, users, clients, or even customers.
Working with a CMS was considered a fullstack operation and for most of the history of traditional CMS that was the case! Setting up medium to large scale Drupal or WordPress sites required knowledge of servers, routing requests, site-hosting, site-maintenance, and even web design. There is a lot of heavy lifting involved in traditional CMS, making the barrier to entry for frontend developers quite high.
With headless CMS everything has changed.
Headless CMS clearly have a lot of benefits, especially for anything interested in professionally managing content. Narrowing those positive aspects down to just a few really highlights just how a headless CMS has frontend developers' interests at heart.
A few of those great examples:
Better Performance and Security
Traditional CMS can be slow and cumbersome to deal with and are infamous for their large code bases. All that code is necessary in order to keep both the frontend and backend properly functioning. Frontend developers will immediately notice how Headless CMS have a noticeably smaller code base, conveniently translating into and less malicious attack vectors.
Headless CMS typically provide content via a read-only API with no database to secure. To add to that, many Headless CMS allow for the integration of a high-performance CDN instead of directly accessing the database, further lowering the risks of breaches or attacks like a DDoS (Direct Denial of Service).
Better Developer Experience
With a headless CMS, frontend teams can fully concentrate on the visual aesthetics, user experience and accessibility of the website, making the whole front-end development process easier. It really is a developer-first approach where content is delivered in its rawest form to give developers the ability to choose how the data is finally presented.
As an added bonus, developers don't have to worry about all of the endless security updates and other maintenance issues that come with using a traditional CMS like WordPress or Drupal.
Having the frontend and backend decoupled means little to no downtime at all. This allows for more customization, scaling, and seamless upgrades without harming performance or usability. Most headless CMS are hosted by the provider, however some like Strapi or Forestry provide self-hosting options. No matter the case, many developers find headless architecture easier to maintain.
The overused templates of traditional CMS are often difficult to change, forcing the outdated tools to limit the design of your frontend. Some make you use HTML or CSS in incredibly specific ways in order to fit the strict requirements of the CMS. In short, very few traditional CMS allow your frontend to be completely independent.
Headless CMS, however, deliver content via an API and give frontend developers a convenient choice for how they want to build their frontend and what frameworks they want to use. That then helps frontend developers build and design websites that match their artistic vision. With the popularity of JAMstack, it's no wonder this has proven to be a popular choice with developers having a large number of static sites to choose from.
The Headless CMS approach enables developers to use different CMS or content sources with ease, while still using the same decoupled frontend approach. That means similar designs can be extended and exported to totally different projects and will work out-of-the-box with minimal effort. It doesn’t matter what programming language or framework you use, headless CMS integrate with any code base. Developers are no longer forced to conform to the CMS with a headless CMS!
In the past, changing CMS meant rebuilding the entire site from scratch.Not only is that not very efficient, but I always felt like there must be a better way to do things. If your frontend is separated from your CMS, that flexibility to change CMS while keeping nearly all your frontend code is inherent to the platform. All you need to do is update the content source.
Unlike traditional CMS that have a cumbersome process for localization, the API-only approach of Headless CMS lets content for multiple regions around the world exist simultaneously and gives you the flexibility to programmatically change the language of an API call's response based on the header.
That lets frontend developers focus on displaying the data regardless of what language is needed with little to no setup. CMS like GraphCMS and Strapi come with these types of localization features built in.
The decoupled nature of Headless CMSs means your content and development teams can work in parallel, speeding up production and allowing you to reuse and combine content as needed. This style of working means content creators don’t need to worry about how different frontends display their content and frontend developers don’t have to go back and forth with content teams to perfect the way content is displayed.
With a headless CMS, the process starts with making sure everything is displayed properly for how the content is consumed. Building the right website quickly and easily is simply a matter of matching a given audience's needs. This greatly reduces the amount of time it takes for a website to get to market while also ensuring all users will be able to access your content.
Hopefully, I’ve shed some light on why you as a frontend developer should use a Headless CMS. With so many options out there it can sometimes be difficult to decide which is the best choice. Luckly, the folks at Headless CMS have compiled a list of headless CMSs that is regularly updated. So if you’re looking for a way to step into the future of content management, that’s a great place to start your journey.
What is your favorite headless CMS feature? Let me know on my Twitter
If you enjoyed the article, be sure to Tweet about it
Please note: Since we initially published this blog post, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case. Please help us by reporting it here.