Meet Gatsby

Here at Craft Pixel, Gatsby is our tool of choice for building client sites. In this post we will cover the features and benefits Gatsby offers that make it the clear choice for many of our sites and projects. But before we dive in, let’s answer the question: what is Gatsby?

Gatsby is a static site generator that utilizes modern web technologies to build sites that are optimized for speed and security. You may be wondering, what the heck is a static site generator? An SSG builds your site into static files and folders and serves those to users. In contrast, traditional web apps wait until a page is requested and then generate the view each time. An SSG does this in advance so that every view is ready ahead of time.

You may be thinking, if my site is built to static files it probably won’t be very dynamic or interactive, right? Not with Gatsby. Gatsby utilizes React, one of the most flexible and dynamic front-end frameworks. Gatsby simply builds out dynamic pages at build time instead of each time a user visits the page.

So when exactly is “build time”? Builds can occur whenever, on demand. We can set up hooks to trigger a build, whenever you data changes. For example, publishing a blog post in WordPress can trigger a build. That way the site rebuilds whenever the your data changes, keeping the website in sync. Decoupling the site’s architecture in this way gives us some significant benefits and features.

Performance

Building out pages in advance allows the site to be much more performant and fast. Sites load in record time and navigating between pages doesn’t cause the page to refresh. Gatsby also offers additional tools to make our pages load even faster, such as intelligent prefetching and image optimization. Have you noticed how fast pages load when clicking around the sample site?

Scalability

More users, more content, no problem! Other sites have to build their views each time they are requested by a user. If a site like this spikes in traffic it has to keep up with all of these requests, potentially resulting in slow performance or even crashing the site. This is not an issue when the site is built ahead of time! The architecture is optimized for scale out of the box.

Security

Cyber attackers use methods like scripting, database injections, and server-side vulnerabilites to attack websites. This can compromise valuable business data or worse, user data. Only serving static files eliminates many of these threats. Removing the need for servers to perform logic and do work reduces the ability for these servers to be compromised and exploited.

That’s it for now! Hopefully this gave you a better idea of why we use Gatsby at Craft Pixel. Next we will look at WordPress as a content management system.