What the heck is Gatsby js and why use it
You’ve heard of WordPress, Squarespace, and Wix...but what the heck is Gatsby.js?
You’re hiring a freelancer or agency to build your company's website and considering your options - WordPress, Squarespace, Wix - and then, someone mentions Gatsby.js. You learn that it’s used by many of the largest companies across the globe - but you’ve never heard of it, and don’t know what to think. This is the position that 95% of our new clients find themselves in and it’s understandable. Technology evolves fast and it can be hard to keep up. However, if you’re hiring an agency to build a website in 2021 - Gatsby.js must be a part of your vocabulary.
Table of Contents
- What is Gatsby.js?
- Site Builders vs. Gatsby
- Gatsby is cheaper to maintain
- Gatsby for SEO
- Gatsby is more secure
1. What is Gatsby.js?
If you google “What is Gatsby.js,” you’ll be inundated with terms that only developers understand. Here’s what you need to know: GatsbyJS is a “React” based “static site generator.” React is a coding framework created by Facebook. You can think of it as the 1’s and 0’s that powers Facebook, Instagram, Netflix, the New York Times, and many more. Static sites are websites that are “pre-rendered” before users request them. They essentially eliminate an entire process in the sequence - making for blazing fast websites.
Think of what happens when you type www.google.com into your browser. The server receives your request, pulls together the code to show (or render) the website, and then displays it on your computer. With Gatsby, the code is already “pulled-together.” The server does nothing besides display the page that has already been “loaded.” No computing power is necessary for the server.
When you visit a website that uses Gatsby, the pages feel like they load instantly - because they are. This keeps users on your site instead of “bouncing” (which we’ve written about extensively) and also means Gatsby sites are incredibly affordable to host, which we discuss in detail below. In the end, Gatsby.js is simply a tool to help developers create websites utilizing the best practices for the modern web.
2. Site Builders vs. Gatsby: Functionality
By far and away, the biggest downside of site builders like Squarespace, Wix, Weebly, etc, is the limited functionality. There is a natural appeal to site builders - the templates look good, you can drag & drop elements to make a page, and they’re cheap (well, not really: more on that later). The downside is that you’re completely confined to the functionality they give you. The minute you need a feature that isn’t provided out-of-the-box is the minute you’ve outgrown your site. Imagine the following scenario:
Sally & Gabby are well-respected authors of breakfast & dessert cookbooks. They each operate websites where they post their favorite breakfast & dessert recipes. Sally had her website built on Squarespace, whereas Gabby had hers built with Gatsby. Both websites have a popup promoting their cookbook for delicious desserts.
Sally & Gabby notice that, when users view recipes for cookies, there’s a 60% chance they’ll purchase the dessert cookbook. When users view recipes for breakfast, that chance goes down to 1%. Being savvy, Sally & Gabby ask their developers to promote their breakfast cookbook on pages that have recipes for breakfast, and their dessert cookbook on dessert recipe pages.
Unfortunately, in this scenario, Sally is out of luck. Squarespace makes it incredibly easy to include one popup - but there is literally no way of adding another. Gabby, on the other hand, can adjust her strategy and instantly see an explosion in sales for both of her cookbooks.
We see this happen far too often. Businesses build their websites with site builders like Squarespace, Wix, or Weebly thinking it’ll be sufficient for their needs. Then, the cold reality strikes a few weeks later when they’ve already out-grown the site they just created. Instead of scrapping the website and starting over properly, they fall victim to the sunk-cost fallacy and miss out on tremendous amounts of organic revenue.
3. Gatsby is Cheaper to Maintain: Monthly Costs
The executives that run the aforementioned site builders are savvy: they know if they’re too limited in functionality, they won’t get any business. They also know that they can’t possibly develop every functionality that users need in a reasonable amount of time. So, they outsource this work to third-party vendors in the form of plugins. This is true for Squarespace, Wix, Weebly, Wordpress - the whole bunch. The upside? They can offer more of what you need for your website. The downside? You end up paying an additional fee for every additional feature.
Everything is behind a paywall
Site-builders seem inexpensive at first, but it’s a thinly-veiled facade. Want e-commerce? Just pay $200/month for the e-commerce plugin. Hosting? $40/month. Sally’s singular promotional popup? $18/month. Your domain name? $10 anywhere else, yet $20 on a site-builder. Site builders start off cheap - but can quickly grow to a monthly bill of $400 or more. That’s almost $5,000 a year.
Gatsby, on the other hand, returns control over pricing to the developer. You might pay $5,000 for the time that it takes a developer to code those functionalities, but it’s a one-time cost. You won’t be boxed in by a monthly fee, and you won’t find yourself missing out on revenues because your site-builder doesn’t provide the functionality you need.
You’ll also save on hosting costs - as we mentioned earlier, static sites require minimal computing power. They don’t require a dedicated server/VPS and the complexities that come with them. In fact, you can host Gatsby sites completely free of charge with providers like Netlify, Gatsby Cloud, and others.
4. Gatsby for SEO: Search Engine Optimization
Gatsby is built for SEO, and a website powered by Gatsby will outperform a WordPress, Squarespace, Wix, or Weebly site any day of the week. This is true for many reasons, some too complex to include in a high-level synapsis. However, there is one constant & easy to understand advantage: Gatsby is much faster than any of the aforementioned options.
Google gives preference to fast websites in search results. If a user has a question, they turn to Google. If Google shows them a link to a slow-loading website, they risk the user leaving and going to a different search engine. Thus, they pay extremely close attention to how fast your website loads. We talked briefly about how Gatsby does this above, and have written extensively about why Page Speed matters for businesses in the past.
Don't just take our word for it - below is a screenshot of our site's earliest history on Google. Within two months, we outranked web design agencies that have been in business for 5+ years for high-intent search queries. For example, we rank #1 for multiple queries such as: “[city] web design.” Of course, we like to give some credit to our understanding of SEO - but Gatsby took care of the technical side without extra fiddling.
5. Gatsby is more secure: Security & Uptime
The biggest threats that businesses face in 2021 are virtual - we hear it all the time. A big company had a security breach and gave access to bad actors. Similarly, security threats to websites are ever present. They often appear more inconspicuously and more frequent than truly evil hacks, however, they can be just as harmful to revenue.
This is the biggest problem that plagues WordPress websites - relying on third party plugins leads to security breaches, and more often, broken plugins & websites. Every time you install a plugin, you’re putting your website in the hands of someone you don’t know.
We often hear of companies that pay a monthly fee for site uptime monitoring. We also see businesses rushing frantically to hire a developer because their site broke overnight due to out-of-date plugins. In our world, the Gatsby.js world, both of those are unheard of. We left those problems in 2017 - and I urge you to do the same. Your site breaking, or going offline, can cost you thousands in lost revenue. If there’s a solution that’ll virtually eliminate that threat, I ask, why would you not use it?
Gatsby.js sites are also unhackable in the regular sense of the term. As we touched on earlier, Gatsby sites are static. Once they’re live, they’re just a handful of files living in the cloud. There are no “entry points” for a hacker - unlike WordPress plugins, which have authority to inject code and manipulate your site. That is, after all, how they work, even when working as intended. All it takes is one bad actor, one rogue plugin, to harm your business.
We hope that after reading this, you have a better understanding of Gatsby.js and the advantages it offers over site builders and WordPress. Thank you for reading, and if you have any comments or inquiries, you may forward them to email@example.com.
We're Snappy Web Design, a web design & seo company in Michigan. We primarily service Brighton, Ann Arbor, and Detroit. We specialize in designing and developing websites for small businesses in Michigan. We're an all-in-one Web Design + Web Development + Digital Marketing agency. Get in touch with us before starting your next project for a free quote and helpful information.
More from Snappy Web Design
Subscribe to the Snappy Web Design Blog to get notified when a new post goes live. We'll never share your e-mail address or use it for any reason other than to share new posts.
Published September 1
Snappy Web Design is the one-stop-shop for web design.
Michigan's Newest Web Design Company
You search Google for “Michigan web design” and find my site. I’m Joe, and I’m the head developer at Snappy Web Design. I’m the new guy on the block, and an expert in providing full-service web design for small business owners in MI.
I’m different from typical web design agencies because I aim to be your partner for all things related to your onli...
Published August 0
A horrifying trip through poor UX design
Visit this website and you’ll be infiltrated by three separate popup modals and two banners urging you to sign up for something. You’ll be forced to sequentially close the popups and banners to actually see the text on the page. One modal, fine - but three of them? And two banners? A bit excessive. The worst is yet to come ...
Published August 5
Learn how to style and set the active link in this Material-UI Tutorial
Wondering how to set or style the active link in Material-UI? This Material-UI tutorial will teach you how to style an active drawer / tab item with simplest code possible.
The Mui AppBar and Drawer provide a great starting point - but they don't provide a solid foundation for highlighting the active tab. As a result, many developers end up with 'hacky' methods of setting active nav items. Fortunately, there's a better way.