What’s the difference between headless and serverless WordPress?
Tags: hosting
Published: 2021-10-28 16:05:18

---
title: What’s the difference between headless and serverless WordPress?
published: true
tags: Hosting
canonical_url: https://blog.ymirapp.com/headless-vs-serverless-wordpress/
---

<!-- wp:paragraph -->
<p>In the last few years, two new terms have emerged in the WordPress and larger web development space. Those two terms are headless and serverless. On top of both being terms ending in "-less", they're two terms that aren't very self-explanatory. (Are there still servers with serverless? <a href="https://blog.ymirapp.com/serverless-vs-hosting-wordpress-server/">Yes.</a> Is headless some new horror movie category!? Nope!)</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":162,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://blog.ymirapp.com/uploads/2021/10/headless.webp" alt="" class="wp-image-162"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>But to make things worse, because you often use these two new development paradigms together, people use the two terms interchangeably or think they’re the same thing. But they’re not! This increases the confusion and suspicion around both paradigms.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So with that in mind, this article will walk you through both concepts. This should hopefully clear some of the confusion. But we'll also see how both paradigms are changing the WordPress development landscape. Let's go!</p>
<!-- /wp:paragraph -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:heading {"level":1} -->
<h1>Headless: decoupling frontend and backend</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://en.wikipedia.org/wiki/Headless_software">Headless</a> WordPress websites are the result of the rise in popularity of JavaScript as a full-fledge programming language. As JavaScript popularity grew, new ways to build websites became popular. King among them was the <a href="https://en.wikipedia.org/wiki/Single-page_application">single-page application</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you're not familiar with a single-page application, it's basically a JavaScript application that runs in your browser. If needed, it'll communicate with a backend to get any data it needs or perform other operations such as sending email. With WordPress, that backend is your WordPress installation.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A single-page application like I described is headless. That's because the frontend (the head in the analogy) is <del>decapitated</del>decoupled from the backend (the body). This separation between <a href="https://en.wikipedia.org/wiki/Frontend_and_backend">backend and frontend</a> is really all that headless means.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":164,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://blog.ymirapp.com/uploads/2021/10/headless-diagram-1024x364.png" alt="" class="wp-image-164"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>So when we're talking about headless WordPress, it's just a WordPress site where you only use WordPress as a backend. You don't need to use a theme to display your WordPress content. That's done by the frontend application. In that scenario, your major frontend decision on the WordPress side is whether you want to use the <a href="https://developer.wordpress.org/rest-api/">REST API</a> or <a href="https://www.wpgraphql.com/">GraphQL API</a> to communicate.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Serverless: on-demand computing</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This brings us to <a href="https://en.wikipedia.org/wiki/Serverless_computing">serverless</a>. Serverless is a marketing term to describe <a href="https://en.wikipedia.org/wiki/Function_as_a_service">function as a service</a>. Functions as a service allow you to run code on demand without the need to manage a server. This is where the serverless name comes from.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Serverless is an interesting paradigm shift because it allows developers to focus on writing code and not worry about where it'll run. If you're curious about how hosting WordPress using serverless is different vs using a server, you should check out <a href="https://blog.ymirapp.com/serverless-vs-hosting-wordpress-server/">this article</a>. The interest in serverless is also tied to the growing popularity of <a href="https://en.wikipedia.org/wiki/Microservices">microservices architecture</a>. With serverless, it's easy to create small microservices by just writing some code and deploying it. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once deployed, you also don't have to worry about scaling these microservices. Serverless scales automatically. So there's no worry that you'll blow up your server if you get a traffic spike.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This ability to scale on-demand is a very powerful feature of serverless. It's also why serverless makes for an <a href="https://blog.ymirapp.com/why-serverless-perfect-hosting-woocommerce/">ideal platform for hosting WooCommerce</a>. Hosting a WooCommerce site is more demanding than a regular WordPress site and serverless, with its on-demand scaling, is ideal for it.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Why are headless and serverless used together?</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now, the more interesting question is why are those two terms confused with one another. It's basically because both paradigms are complimentary. Let's go back and look at headless again.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With headless, you have a JavaScript frontend application that runs in the browser. You don't need a server to host it. You just need to put the code somewhere the browser can download it. (Often it's just on a <a href="https://en.wikipedia.org/wiki/Content_delivery_network">content delivery network</a> (CDN).)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This frontend application needs to communicate with a backend to get any data it needs, make changes to it or perform other operations. This backend needs to be hosted somewhere.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You could use a server to do that. But you already have a frontend application that doesn't need a server. Why not just go all in and have the backend not use a server as well!? So you'll see a lot of these frontend applications also use a headless <em>and</em> serverless backend.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That's why those two terms are often confused with one another.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>You can have one without the other</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>That said, while this confusion exists, the reality is that you can have a headless WordPress site without a serverless backend. In fact, none of the headless WordPress sites have a serverless backend. They just host WordPress on a server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That's because <a href="https://ymirapp.com">Ymir</a> is the only platform that lets you deploy WordPress on serverless infrastructure. But at the same time, you can have a serverless WordPress site that isn't headless. The Ymir blog that you're reading this article on uses serverless, but it's not a headless WordPress site.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So there you have it, headless and serverless, two terms shrouded in mystery, but hopefully, demystified at last!</p>
<!-- /wp:paragraph -->