What is Gatsby and why is it different to a WordPress theme?

Gatsby is built with React and is a static site generator that allows the developer to pull data down from an external source and uses this data to be able to create quick static pages.

Gatsby has several plugin tools which allow developers to continue using WordPress as a CMS but Gatsby as the front-end framework. This is different from how we typically build websites, where we would build a theme within the WordPress environment, using the prebuild functions that WordPress comes with.

Pros

Speed performance

Speed performance is noticeably much better when a website is built with Gatsby than a traditional WordPress theme. Page speed can be improved with traditional themes with things such as caching plugins and CDN etc but with Gatsby, the speed improvements come into the workflow and you’re less likely to spend a lot of time trying to get top marks on things like Google Page Speed as Gatsby does a lot of this automatically for you.

Security

With Gatsby, your front-end website and WordPress installation will be on two separate servers, so it will be very difficult for bots and harmful scripts to be able to identify where your content is coming from helping decrease the chances of your website being compromised.

It’s built with React

JavaScript has become much more the go-to programming language in recent years and although PHP still has its place in modern development, some developers prefer to use JavaScript. So now these front-end developers can create websites in WordPress where they might have not been comfortable doing so in the past. React and Gatsby comes with a large number of plugins and support which help with developing ultra-modern applications and so Gatsby helps in providing these technologies whilst content editors can carry on using WordPress as their CMS.

Hosting Costs

You’ll need to have two hosting providers, one for Gatsby (front end) and one for WordPress (back end) but because Gatsby is generating static files the bandwidth will be typically lower. Because Gatsby is also a fairly new technology the Gatsby Cloud service for hosting Gatsby websites is free to use up to a certain amount. Netlify also offers a free limited service in general, the costs tend to be lower.

Cons

It’s built with React

It’s a pro but also can be a con. If a developer has been developing WordPress themes for a long time they will have to have a learning curve on developing websites a different way with React and Gatsby. Learning React can be difficult and challenging so it can take time and energy to become familiarised with a new programming language.

Slow build time

Because Gatsby creates these static pages, it must regenerate all the pages and the whole website every time a content change in WordPress is made. This leads to a delay in the content change being displayed on the front end of the website. Typically, this could be anything from a couple of seconds to a few minutes depending on how large the website is, which doesn’t seem long but content editors are used to seeing changes made instantaneously.

WordPress plugins

One of the main reasons developers and content editors keep coming back to WordPress is its extensive plugin library. These really become an issue when you switch to Gatsby as you lose the functionality that the plugin has in the front end of the website. Because we are separating WordPress out into back-end and front-end development, we have to redevelop this functionality into Gatsby which requires a lot of additional work. If you have a website with a lot of reliance on WordPress plugins it could potentially be a stumbling block on converting your website into Gatsby as the development becomes much greater.

Summary

I have started using Gatsby a lot more to develop ultra-fast static websites, with the inclusion of metrics in Google’s Web Vitals to do with a site’s loading speed in Google’s update is even more important to get your website as fast as it can be. I’m still reserved for using Gatsby in all my web projects. I think some of the cons of working with Gatsby make it very difficult for large websites with a reliance on plugins such as WooCommerce to make the development time much more difficult. I think it completely depends on the project and the scope as to whether to pick this JavaScript language to build a website or go to the more reliant traditional theming.