Cover Image for Gatsby Powered Websites

Gatsby Powered Websites

So while been under lockdown for the last 2 months, I have been busy coding out my new website. Using the framework Gatsby, I build it using React and GraphQL. React is the same JavaScript framework that is used to power apps like Facebook, Netflix, Airbnb and so forth. React is also used to build native mobile applications for iOS and Android or even Windows or Mac OS. Gatsby in its own is a PWA (Progressive Web App) React application, but in this case it fulfils the role of a website that renders static content at blazing speeds. Since being a React Application, you can also build out other progressive web-apps inside Gatbsy that hooks into your website or even add e-commerce functionality. GraphQL is the data source that supplies the content to the Gatsby powered site. GraphQL can fetch data, via API calls, from almost any Content Management System, which are not limited to WordPress, Drupal, Joomal or even Contentful.

Traditional websites

A quick explanation of how traditional websites work.

Lets 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.

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 becomes the database for Gatsby to store and deliver the data to Gatsby when requested. GraphQL stores the data in JSON objects, the same as MangoDB, or Google’s Firebase in this case, document objects, which reads and displays the content blazing fast.

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.