Headless WordPress Development with GatsbyJS and GraphQL

Headless WordPress is rising in popularity for a number of reasons – speed, security and overall experience. Here are some of the pros and cons of exploring headless WordPress development with GatsbyJS and GraphQL.

What is GatsbyJS?

GatsbyJS is a static site generator which means it pulls down information from different kinds of sources (e.g. databases, CSV files or a CMS like WordPress) and it uses a JavaScript front-end library React.js and GraphQL to query data. It then produces a set of HTML files and these files are uploaded to the server so visitors to the website can view these pages.

Default WordPress vs Headless WordPress 

On default WordPress, you will be using a traditional WordPress theme. However, on headless WordPress, you would not be using WordPress themes because the developer will be using a different set of tools outside of the traditional WordPress stack.

On default WordPress, plugins work as you would expect, the website owner can download a plugin from the dashboard and as long there are no conflicts with the theme, it should work. Depending on the plugin it may require a little more setup, it’s a system that most WordPress site owners should know. However, on a headless WordPress site, the site owner can still download plugins, but it will require custom development for it to work in most cases because the plugins do not have authorisation to the GatsbyJS site. The developer would have to open a connection via the WordPress REST API or the WordPress GraphQL API which could add an additional cost to your project to get a developer to make the plugins work properly. 

How do GatsbyJS and WordPress work together?

A traditional WordPress site holds the pages, posts, media files and other custom post types where the site owner can manage them through the dashboard. But using Gatsby JS the developer will be creating the templates for the site using React.js and GraphQL to interact and retrieve the data. Finally, a set of static HTML files will be sent to hosts like Netlify or any host of your choice. Usually, you would have to host your WordPress website somewhere else so people can sign in to their Dashboard and manage content on the website. Then you would host the final static files on another service like Netlify.

Advantages and disadvantages of headless WordPress

One of the advantages of having a headless WordPress site is the performance compared to a traditional WordPress site. It is possible to improve the speed of a traditional WordPress site using caching plugins or certain hosting providers like WP Engine but a headless WordPress site will outperform a traditional WordPress site since GatsbyJS outputs the files as static HTML files, whilst a traditional WordPress site outputs all of the files and runs server side code each and every time a page is loaded.

Another advantage of using a headless WordPress site is security. Since Gatsby is launching static files, there is no WordPress CMS for hackers to actually get into. Which means website owners can take their traditional WordPress site offline so that it is completely secure or just lock it down tighter so only the user can log into the site. The WordPress CMS is then only accessible by admins/editors, whilst end users just access static files.

Developer experience is also worth mentioning. Many developers who have learnt a modern front end framework like React.js or just modern Vanilla JavaScript, like to code in that environment over the standard WordPress PHP Environment. Using the ReactJS and GatsbyJS system developers can use a wide range of tools/libraries and modern web development best practices which is harder to do when building a traditional WordPress theme. 

The final advantage is the hosting cost. It’s possible to host a headless WordPress site for free using Netlify which is more cost beneficial than any typical hosting services. If you have a WordPress site that gets a lot of traffic, having your users go to a static Gatsby site will allow you to drastically reduce the hosting costs, as your WordPress server is just being used to manage/edit the content rather than being visited by every end user.

However, the disadvantage of building a headless WordPress website using GatsbyJS and GraphQL is the steep learning curve. The developer building the site will have to be familiar with React.js and GraphQL to be able to build it at a professional level, and these might be languages typically outside the ‘typical’ skillset of a WordPress developer in the past.

The most important disadvantage is plugin functionality. On a default WordPress site plugins usually work out of the box. However, you will need custom development to get certain plugins working properly on a site. So if you currently have a website with a large number of plugins, it will take a long time to build the website out in GatsbyJS which could increase the overall cost of the project.

If you have a WordPress website that you want to future proof & improve its performance and security, get in touch!