HomeBlogFor developers

Gatsby-powered websites (2020 build note)

A short technical note from rebuilding this site in Gatsby, React and GraphQL. Kept as-is for historical accuracy.

Written in 2020, during lockdown, when I rebuilt this website with Gatsby, React and GraphQL. My view on WordPress has changed since: I wrote below that it was slow and a security risk, and that's not what I'd say today. Most of my work is WordPress and WooCommerce, and a well-built WordPress site is neither. This site now runs on Next.js, and Gatsby itself has faded. I've left the post as I wrote it, as a note of where I was then.

Tell me the problem Call +27 87 150 9305
For your technical person

Traditional websites. A quick explanation of how traditional websites work. Let's take WordPress, for example. If you visit a WordPress powered website, your browser will make a call to the server to fetch the particular webpage. So every time a server gets a call for a webpage it needs to render that webpage and send the rendered version back to the requesting browser.

  • The Server gets a request for a page.
  • The Server will read the WordPress PHP code.
  • WordPress's PHP code will connect to the database to fetch the page's content and to the files directory to fetch any images.
  • It will start to build out an HTML page using the instruction in PHP (WordPress code).
  • Once completed rendering the page into an HTML document and then sends it back to the browser.

This is almost done every single time when requesting a webpage. So with every page render server resources are being used. Imagine 1000+ users requesting the same page from your web server. Every page would need to be rendered for the web browser requesting it. This is inefficient. If you click on a link to go to another page on a website, you can recall that you always need to wait for the webpage to be downloaded and rendered in your browser.

We don't even have to talk about all that plugins that are usually associated with a CMS like WordPress, making it very slow, unresponsive and a huge security risk. [2026: I no longer see it this way. A well-built WordPress site with few, well-chosen plugins is fast and safe, and it's most of what I build.]

Gatsby: blazing fast websites and apps. When your browser tries to get the content from a Gatsby powered website, it will download almost the whole website in one go. So, if you go from page to page, the content will already be there! Only large and high-quality images will be loaded with a blurred effect afterwards, but in mere milliseconds depending on your internet connection. This is to prevent content jumping all over the place and give your users something to start reading.

Not only that, since its JavaScript powered, the JavaScript is client-side and not server-side in this case. Your computer, tablet or mobile phone's hardware resources are used to render and display the content and not the server. So, the website will feel immediately snappy and very responsive to your actions. You can try it out by going from page-to-page, or post-to-post on this website. That is also the beauty of Gatsby, you don't require expensive hosting solutions anymore. A Gatsby site can run from a shared hosting server and still achieve the same performance, because again, it makes use of the physical resources on the device where you are downloading it to.

There is so much more Gatsby can do, and this is only the tip of the iceberg. You can have a separate app version of the site, with different layouts and functionality for desktop, tablet or mobile. You can go as far and instead of serving webpages, serve apps to a user's browser. The same code that is used to build out the site can be harvested and used to transfer the functionality to a fully native mobile application for iOS or even Android.

Security. Gatsby is also extremely secure, because hackers don't have access to the database to manipulate the login details or data. Gatsby sites is built from code directly each time before it is published. It is highly unlikely that a hacker would be able to get access to a secured Gatsby site, but even if hacker managed to get access to a server and make a change in the code, it would get overwritten with the original code, on the next build.

Fresh new code every time. On every new build, that is when you create a new post or page for your website, the system compiles everything again into a new website app. The process takes a few minutes, but the bonus is that you get a fresh new site (files) every time that will perform at its peak and not slow down over time.

My datasource (CMS). My previous site was a WordPress site, because I still do custom WordPress and WooCommerce development for customers. I decide to make it a headless WordPress setup. In that, I stripped it from all its plugins and its front-end to only act like a CMS, content management system. Basically, all my data and posts are stored in WordPress on a separate secure server. That data is only collected when the Gatsby site is compiled from code into a website. It is decoupled, so I can be hosting my CMS solution on a web server, that is blocked from normal traffic, or I can host it locally on my local server since the Gatsby site does not need a live connection to the CMS all the time. GraphQL only pulls in the data when it needs to build a new version of the site. GraphQL is a query language: it asks for exactly the data a page needs and returns it as JSON.

Conclusion. I love it; it allows you to only use the tools / code that you require building out a website and not be forced to include 100's of futures and extra code that you don't require, like with WordPress. It is like building a sport car; you need to build it as light as possible, but also as powerful or as fast as it can be. Almost every feature in Gatsby can be fine-tuned to how you want it. You can customize your heart out. You are in full control of your own website app and don't have to worry that something will break in the next update. Something that you have no control over when it comes to a popular CMS tool and the software changes it brings on every new release/update.

See the work

Tell me the problem. I’ll tell you honestly what comes next.

+27 87 150 9305

Monday to Friday, 09:00 to 20:00 SAST. Or email info@antondevilliers.com.

Tell me the problem

Step 1 of 3. Pick what’s closest. You can explain in your own words next.

I reply myself, usually the same working day. The first conversation is free, and you’ll know the price of every piece before it starts. How a project works · Privacy

WhatsApp