Gatsby Powered 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.
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.
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 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.
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.