What is a Headless CMS?
The terms Headless WordPress and Headless Content Management Systems (Headless CMS) have continued to rise on Google trends the last few years, spiking last summer during the height of pandemic, as small businesses all over the world investigated moving their businesses online.
CMS refers to the application in which you store and manage website content. Traditionally, that meant using a monolithic system such as WordPress, Drupal, or Joomla. They’re called “monolithic” because their architecture involves several layers, including the backend (database), functional (plugins), and presentational (themes) layer. These layers can all work harmoniously together in a single interface such as a dashboard.
As a Headless WordPress agency, WebDevStudios is seeing a rise in popularity of microservices and JavaScript frameworks such as React, along with WordPress’s REST-API meant developers could decouple the presentational layer (theme) and build a frontend without having to worry about interrupting the workflow of content editors. To quote managed WordPress hosting giant, WP Engine, who is also expanding their own expertise in headless CMS and Headless WordPress:
A headless CMS means you’re creating a developer-focused, API-first system, rather than focusing on how the backend administration will feed the frontend design. Headless WordPress is any configuration where WordPress is not responsible for rendering the site.
Headless WordPress
When the REST-API was merged into WordPress core a few years back, it enabled developers to query data stored WordPress’ database, without having to work strictly within a WordPress theme or the database. Querying REST-API endpoints using JavaScript broke down complex barriers and made it easy to display content anywhere.
Plugins such as WP GraphQL extend the REST-API and give developers even more flexibility, since GraphQL queries don’t depend on REST-API routes. Because working with WordPress’ REST-API means you don’t have to load the presentational layer (theme), this in turn equals better performance on the backend without having to scale your hosting plan.
What’s more, with the power of WordPress Custom Post Types (CPT), content editors could put different types of content into separate buckets, and those buckets could easily be queried and rendered to different websites entirely. For example, content editors could manage a traditional blog using WordPress posts, and serve their customers that content from a decoupled website, like https://acmewidgets.com/blog.
They could also create a “Human Resources” CPT, and a developer could create a standalone website, like http://acmewidgets.com/handbook to offer employees a way to access the company handbook. This could all be accomplished using a single WordPress install.
Decoupled vs Headless CMS
These two terms are sometimes used interchangeably, but they’re slightly different. A true Headless CMS has neither a presentational layer nor a presentational API. A Headless CMS SasS, such as Contentful, is a good example. Their product offers customers a backend for entering and managing content. However, you can’t just “activate a theme” and have a website like WordPress.
Decoupled just means there was a decision made not to work with a CMS’s presentational layer. While WordPress is not a true Headless CMS, it can be used as one when the frontend is “decoupled.”
The Jamstack and Pre-Rendering
Like Headless CMS, the term “Jamstack” is fairly new and is an architecture designed to make websites faster, more secure, and easier to scale. JAM stands for: JavaScript, APIs, HTML Markup. Pre-rendering means your website is built ahead of time, and the generated assets are deployed to a CDN.
To quote Jamstack.org:
The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.
With Jamstack, the entire front end is prebuilt into highly optimized static pages and assets during a build process. This process of pre-rendering results in sites which can be served directly from a CDN, reducing the cost, complexity and risk, of dynamic servers as critical infrastructure.
Leveraging the flexibility and power of WordPress, combined with static site generators like Next.js, pre-rendering a frontend and hosting it on the Jamstack has many benefits.
Headless WordPress Benefits
Familiarity
The biggest benefit of using WordPress as a Headless CMS is that it’s familiar and comfortable. WordPress has been around for so long and is really great for publishing content quickly and easily. It’s hard to find content editors who aren’t familiar with WordPress’ interface.
Making the decision to move to a new CMS should not be taken lightly, since your content editors will need to learn a new system. This transition could cost you more than you think, and worse, might even stunt their creativity which would discourage them from writing at all.
Free… Forever
If you care about owning your data, or are worried about recurring subscription costs associated with using a SaaS CMS (such as Contenful), then using WordPress is the obvious choice. It’s been around for 18 years, is open-source, free, can be hosted on your server, and has a vibrant community supporting it. Unlike with a SasS CMS, you don’t have to worry adhering to their Terms of Service, your data being sold, the SaaS itself being shut down, or worse, being gated, if you fall behind on your monthly payment.
If you’re already using WordPress and are worried about the costs surrounding a data migration, then you’re in good hands. Furthermore, if you choose to use WordPress as a traditional CMS in the future, again, there wouldn’t be a need to migrate your data.
Future Proof
Have I mentioned that WordPress has been around forever and is free? It also powers 39.5% of the entire internet. Think about that for a minute. Be reassured that WordPress isn’t going anywhere anytime soon. With the focus on developing a new block editor, there’s never been a better time for creating and managing content in WordPress.
Speed and Security
Hosting your decoupled frontend on the Jamstack virtually eliminates the threat of a WordPress server or database hack, since hackers won’t even know you have a WordPress install. When a traffic spike occurs, you can rest assured that your site won’t go down because your frontend is nothing more than HTML, CSS, and JavaScript served from highly capable CDNs. There’s no server side rendering or database calls to slow things down.
Hosting Headless WordPress
There’s no shortage of reliable WordPress hosting out there; in fact, there’s an entire industry dedicated to it. While having a Jamstack hosted frontend has many benefits, it doesn’t eliminate the need for reliable WordPress hosting. We’ve partnered with WP Engine, Page.ly, and Pantheon, and each of them offer hosting configurations tailored for using WordPress as a Headless CMS.
Hosting Your Decoupled Frontend
Like WordPress hosting, there are plenty of options out there for hosting a statically generated website. There are a few that stand out, but our go-to is Vercel.
Vercel is the company behind Next.js, the open-source self-described “React Framework for Production.” Vercel’s hosting service was literally built to host statically generated websites with Next.js and features a global edge network spacing 70 cities. It has deep integration with GitHub and built in CI/CD pipelines which create a delightful developer experience.
Another hosting option is Netlify. The co-founder of Netlify, Matt Biilmann, coined the term “Jamstack” and probably has been its biggest champion. Netlify offers many of the same features as Vercel, like a global CDN, GitHub integration, and built-in CI/CD pipelines. Rounding out the list is the Digital Ocean App Platform and Cloudflare Pages.
Whole Stack Development
If you’re looking for someone to partner with when it comes to developing the whole stack—from WordPress all the way to the Jamstack—then look no further. WebDevStudios has been working with WordPress since 2010 and with Next.js since 2019. In-fact, we helped build the official Next.js WordPress Starter and are ready to help you build yours. Contact us today to get started on your Headless WordPress project.
Comments