Advantages and Disadvantages of Gatsby-based WordPress solutions

We first came across this technology at the WordCamp Europe 2020 online conference, which immediately piqued the interest of our developers. After several more subsequent readings, just as a test, we started the creation of a WordPress project based on GatsbyJS, which now includes our own articles. The speed of the sample website was striking; pages loaded in almost a fraction of a second. It’s quite amazing…

What is GatsbyJS?
GatsbyJS is an open source, completely free React-based framework used for building extremely fast, static websites and applications. Its first edition, made in 2015, was initially used to create blogs and portfolios, as well as corporate landing pages, and from 2018 onwards, it was also used to develop CMS-based websites.

Gatsby is able to communicate with various CMS systems such as WordPress, Drupal, Contentful. Data is extracted using GraphQL from the API of the CMS and other systems.

Using it requires basic React and GraphQL knowledge, but even if we do not have this developer knowledge, because GatsbyJS is perfect for learning the particularities of both React and GraphQL alongside the technology.

Gatsby is currently one of the latest and most dynamically evolving technologies, which already has at least as many development camps as React.

WordPress based “Static” Gatsby website

GatsbyJS in this case acts as a frontend, receiving the data through the WordPress API. Examples of such data are images, posts, pages, WooCommerce products, or ACF fields that we upload through the WordPress administration system.

To establish a Dynamic Data Connection, you will also need Webhooks (HTTP callbacks). After creating a new post or a page in the WordPress admin interface, you will need to completely re-launch the Gatsby project. This can only be done automatically with Web hosting services that are able to Build and Deploy the static website we upload. Examples include (Netlify, and AWS Amplify.)

The speed of Gatsby is not comparable to that of WordPress, as a React-based website will always be much faster than its PHP-based counterparts. Being a static site generator however, Gatsby is extremely secure because it has no direct connection to the database and the user data.

The downside, however, is that WordPress can only function as an admin system, and we cannot take advantage of a lot of its features and capabilities. (For example, theme hooks cannot be used at all.) We can only use plugins with open API code that need to be programmed individually.

Gatsby sample website

Our sample project can be accessed through blog.netwerk.hu. Specific articles and their associated highlighted images, as well as categories, are displayed using GraphQL. Webhooks have made it possible for the text content to appear immediately after being created it in the WordPress administration system. For the project, we also used the well-known category listing of WordPress.

So, with the combination of Gatsby and WordPress, we can create extremely fast websites. Will this technology be the future of web development? What is the direction of the WordPress core development? We cannot know for sure. However, hopefully this is just the beginning, and the future might see WordPress competing with a React-based sites.