WordPress is a popular content management system that can be used for a variety of websites. One option that you may not have heard of is a headless WordPress site. This is a website that does not use the traditional WordPress front end. In this blog post, we will discuss what a headless WordPress site is, how it works, and the pros and cons of using this type of website.
A traditional WordPress installation combines both the frontend user interface and the backend administrative area. A headless WordPress site separates these two functions, with the frontend living on a different server than the backend. This can be done in a variety of ways, but often a headless WordPress site will use a separate web application such as ReactJS, NextJs, VueJS or AngularJS for the frontend.
The following picture shows how WordPress is set up normally. Here we see the frontend and the backend is running on the same host together.
On a headless WordPress installation, the frontend is typically placed on a completely different server and the backend is kept separate. An API exists between the backend (WordPress API) and the frontend to communicate the content for the site.
You might be wondering why anyone would want to set up their WordPress site in this way. There are a few reasons why this option might be appealing:
Having the frontend and backend on separate servers will definitely help to improve performance and make it easier to manage updates and changes. This is by far the best advantage of using a headless architecture. The frontend can pre-build the page contents by fetching them from the WordPress API and cache all of the HTML output ready for the user. This is great for static pages that don't update very often like blog posts or landing pages. This means that the frontend does not need to continually request content from the backend for each and every user request and then build the content and then display it. This can dramatically increase the speed of a WordPress site.
Also, the performance of your site can now affect your search engine optimisation (SEO), so improving your loading times can help to rank your site higher.
A headless WordPress site can easily scale to handle more traffic by adding additional frontend servers. This can be done without affecting the performance or stability of the site. You could also implement auto-scaling on your front end to automatically scale your capacity up and down based on demand. This can be done on a traditional WordPress installation, but it's easier to do with a headless architecture.
The backend can be locked down and access restricted, making it harder for hackers to gain access to your content. The front end can be open and accessible to the public, making it easier for users to interact with. This provides a good balance of security and usability.
As with anything in life, there is also some disadvantages with a Headless WordPress architecture:
The frontend is often limited in terms of functionality, compared to a traditional WordPress installation. It may not have all of the features that you are used to or that are available on the backend. For example, you may be used to installing WordPress plugins at will to enhance your site. Typically the WordPress backend is stripped down to just support the WordPress API and content creation. Fancy plugins that change the frontend, simply do not work. Depending on how the frontend is created, depends on how you can implement these features.
You will also find that your favourite WordPress theme does not work on a Headless architecture as the frontend is responsible for the page layouts, fonts etc. WordPress themes become redundant in this architecture, meaning you need to typically have a good coder to hard code the site design into the frontend using whatever technology you have chosen to use.
Setting up a headless WordPress site can be more complicated than setting up a traditional website. There are more components that need to be configured and managed correctly in order to get everything working properly. Also, with more complexity comes additional costs to support and maintain.
In conclusion, a headless WordPress site can provide some advantages over a traditional WordPress website. These advantages include improved performance and scalability as well as increased security. However, there are also some disadvantages to consider such as limited functionality and increased complexity. It's important to weigh up the pros and cons of each option before making a decision on which is right for you.