Pros And Cons of Using Gatsby in WordPress Projects
Tags: wordpress, gatsby, webdev
Published: 2020-04-30 12:13:58

<p>Merging <a href="http://www.gatsbyjs.org" target="_blank" rel="noreferrer noopener nofollow">Gatsby</a> with WordPress became a <a href="https://2019.stateofjs.com/overview/" target="_blank" rel="noreferrer noopener nofollow">really hot topic this year</a> and </p>
<p>Thanks to <a rel="noreferrer noopener" href="https://pagepro.co/blog/2019/10/09/how-gatsbyjs-can-help-your-business-to-overtake-competition/" target="_blank">many business advantages</a>, more and more companies are adapting Gatsby as a part of their tech stack, which makes <a rel="noreferrer noopener" href="https://pagepro.co/" target="_blank">React and Gatsby developers</a> in high demand as well.</p>
<p>As WordPress is one of the most popular CMS and website creator, the popularity of Gatsby raised a question in the content environment: “Is Gatsby better or worse than WordPress?”.</p>
<p>But my question is: “Does it have to be better or worse than WordPress?”</p>
<p>What if both technologies could work together and combine the best of them?</p>
<p>Does that relationship make sense?</p>
<h2><b>Why using Gatsby with WordPress?</b></h2>
<h3>1. Modern performance</h3>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/03/nathan-duck-KnLj3o9A66E-unsplash.jpg" alt="a man in a futuristic spaceship">
<p>Using <a href="https://pagepro.co/gatsby-development.html">Gatsby Development</a> means using all the blessings of <a href="https://pagepro.co/react-development.html">React</a> and GraphQL - the hottest modern frontend libraries.</p>
<p>It opens up many possibilities to create a <a href="https://pagepro.co/blog/2019/11/22/7-reasons-why-you-should-be-using-react/">truly outstanding and fully customized user experience</a>, with additional website performance and speed boost.</p>
<p>GatsbyJS is a Static PWA Generator. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.</p>
<h3>2. Gatsby's Security</h3>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/03/Screenshot-2020-03-13-at-21.13.22-1024x597.png" alt="Gatsby logo on the wall">
<p>In the case of security, WordPress has a lot to catch up, and this is where Gatsby comes in as a hero.</p>
<p>Again, Static Site Generators are extremely safe, as there is no direct connection to the database, dependencies, user data or other sensitive information.</p>
<h3>3. Plugin free</h3>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/03/dawid-zawila-zb2vBaHYB2I-unsplash.jpg">
<p>Having a look from a non-developer’s point of view, many people use WordPress, as it is quite easy to operate with.</p>
<p>If there is a need to take care of something simple, like content editing, or small layout changes, they can easily handle it themselves without the help of a developer.</p>
<p>However, if a non-developer want’s to adopt any custom functionalities, he is fully dependent on WordPress plugins, which makes it very limited in case of user experience and customization, so in order to get what they want, they just add plugins one after another.</p>
<p>What they often don’t know, is that running each plugin is like loading a new library.</p>
<p>So by using too many of them, and putting plugins one on top of another, it makes their website extremely heavy and hard to render, which ultimately means - VERY SLOW.</p>
<h3>4. Development pleasure</h3>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/03/nicole-wolf-xTBn1YBrTE-unsplash.jpg" alt="a female developer next to laptop with coffee on a table">
<p>Gatsby opens up many technological possibilities that can be highly beneficial for the project.</p>
<p>The developer has more freedom in choosing tools, which allows them to make a truly customized and outstanding both user and development experience.</p>
<h3>5. Your content is already there</h3>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/01/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg" alt="many books in chaotic order">
<p>If you're thinking about migration to use new technologies to be able to do more, you don’t have to be afraid of your previous content as well.</p>
<p>With Gatsby, there is no need to migrate any content, as it’s already there, in your WordPress CMS.</p>
<h3>6. More reasons why use Gatsby with WordPress:</h3>
<ul><li>Easy to manage and well-known WordPress admin panel</li><li>Ready to use user login system and authorization</li><li>Highly developed, yet easily customized WordPress API</li><li>With Gatsby and Gutenberg (new editor) you can build a drag’n’drop Gatsby site builder</li><li>Lower hosting costs</li></ul>
<h2><b>Why not using Gatsby with WordPress?</b></h2>
<p>Like any relationship, this one also has its problems.</p>
<p>Most importantly, WordPress is a blogging platform and it doesn’t always find itself as a headless backend, mostly because it still uses “old” technologies, like PHP, and is slower than other backend platforms, like Strapi or Contentful.</p>
<p>Let’s dive a bit deeper.</p>
<h3>1. New knowledge is required</h3>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/03/siora-photography-hgFY1mZY-Y0-unsplash.jpg" alt="a girl hitting her face with a book">
<p>If you want to work with Gatsby and WordPress at the same time, you ultimately need to be well familiar with both PHP and JS languages.</p>
<p>Gatsby is also a mix of React and GraphQL, so they are required to be known as well.</p>
<p>However, from other perspectives, it’s a great opportunity to start thinking  React-wise and broaden development horizons.</p>
<p>Learning React and GraphQL may also appear a great idea, as both technologies are taking the fruits of technological boom and probably will stay on a higher shelf for a little longer.</p>
<p>However, we mentioned it earlier - non-devs will hate. Or simply they won’t be able to act.</p>
<h3>2. Losing many WordPress abilities and functionalities</h3>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/03/Screenshot-2020-03-13-at-21.11.54-1024x838.png" alt="dying rose">
<p>By mixing Gatsby with WordPress, WP is becoming backend only, which means we are losing a lot of its functionalities and abilities.</p>
<p>For example, you cannot use theme Hooks.</p>
<p>WooCommerce, for instance, is using native WP hooks but is also able to add his own hooks, which enables him to customize many actions. Actually, you can get into any phase of order and modify, or completely change the action (like checkout).</p>
<p>To make it possible with Gatsby, you need to write the connection with the API from scratch.</p>
<p>Another thing is the plugins.</p>
<p>If you want any plugin to work correctly, you have to program it yourself by using its API. The problem is, not every plugin is sharing his API, which means you won’t be able to make it compatible.</p>
<h3>3. Content Changes</h3>
<img src="https://pagepro.co/blog/wp-content/uploads/2020/03/Screenshot-2020-03-13-at-21.12.42-1024x741.png" alt="typewriter with an empty paper">
<p>As I wrote already, Gatsby is a static site generator, which means it cannot be “just edited”, and any (even small text) change will require a new deployment.</p>
<p>So if you have a page that requires many daily content changes, you may find it both time-consuming and irritating.</p>
<p>Also, if your content is distributed through many channels, and has its own specific and very strict modeling, Gatsby may not be able to execute it correctly.</p>
<h2><b>Wrap up</b></h2>
<p>Combining Gatsby with WordPress is relatively fresh (or at least refreshed lately) topic, and I suppose the number of initiatives around it will just increase.</p>
<p>Gatsby is one of the hottest technologies at the moment, and just the same as React and GraphQL, he is gathering more and more fans around.</p>
<p>Yet, we still have to remember that WordPress powers 35% of the internet and surely doesn’t stop.</p>
<p>This is also why many new technologies are working and searching for possibilities and solutions to collaborate.</p>
<p>The future seems interesting, but as always, let’s see what happens.</p>