Gatsby Development 101
Tags: gatsby, javascript, webdev, beginners
Published: 2022-08-11 23:17:31

<p><span style="font-weight: 400;">Gatsby.js is one of the most popular JavaScript frameworks. It offers many advantages for business, such as its powerful plugin system, the ability to use React, and built-in performance and image optimization.&nbsp;</span></p>
<p><span style="font-weight: 400;">Gatsby doubles as a static site generator empowering you to create a website from scratch using HTML, CSS, and JavaScript. It's open source and free to use, and it has a massive community of developers who contribute to the project.&nbsp;</span></p>
<p><span style="font-weight: 400;">It empowers companies to build blazing-fast websites, progressive web apps, and single page applications by giving them the toolbox and blueprints needed to build fully customizable digital experiences.</span></p>
<p><span style="font-weight: 400;">This post covers</span></p>
<ul>
<li><span style="font-weight: 400;"><a href="#id1">What is Gatsby.js?</a></span></li>
<li><span style="font-weight: 400;"><a href="#id2">Gatsby Features</a></span></li>
<li><span style="font-weight: 400;"><a href="#id3">Why choose Gatsby in your projects?</a></span></li>
<li><span style="font-weight: 400;"><a href="#id4">Gatsby.js pros and cons</a></span></li>
<li><span style="font-weight: 400;"><a href="#id5">What to build with Gatsby?</a></span></li>
<li><span style="font-weight: 400;"><a href="#id6">Gatsby vs Next.js vs React</a></span></li>
<li><span style="font-weight: 400;"><a href="#id7">Gatsby and Jamstack</a></span></li>
<li><span style="font-weight: 400;"><a href="#id8">Gatsby in the wild</a></span></li>
</ul>
<p><span style="font-weight: 400;">Interested in giving Gatsby a try? Keep reading.</span></p>
<h2 id="id1"><span style="font-weight: 400;">What is Gatsby.js?</span></h2>
<p><span style="font-weight: 400;">Gatsby.js is a static site generator developed by Max Stoiber and Kyle Mathews in React. A static website is an excellent alternative to traditional web development frameworks like PHP or Ruby on Rails because they can be hosted anywhere without needing a server-side application.</span></p>
<p><span style="font-weight: 400;">Gatsby takes this one step further by pre-rendering your pages so they are as close to static as possible, resulting in impressive performance improvements.</span></p>
<h2 id="id2"><span style="font-weight: 400;">Gatsby Features</span></h2>
<p><span style="font-weight: 400;">Now that we've taken a long look at Gatsby let's dive deeper into its features.&nbsp;</span></p>
<h3><span style="font-weight: 400;">Code-splitting&nbsp;</span></h3>
<p><span style="font-weight: 400;">Code-splitting is a software development technique that builds the application in different independent chunks that can be loaded on demand. As a result, your applications load only what&rsquo;s necessary each time, helping your websites achieve faster time-to-interactive.</span></p>
<h3><span style="font-weight: 400;">Smart preloading</span></h3>
<p><span style="font-weight: 400;">This type of preloading predicts and prefetches content and assets in advance with an accuracy of over 90%, speeding up next-page navigation on average 900ms, improving your SEO and Core Vitals Score.</span></p>
<h3><span style="font-weight: 400;">GraphQL support&nbsp;</span></h3>
<p><span style="font-weight: 400;">GraphQL is a language that uses a special syntax to describe the data you want in your component. Then, that data is made available through a headless CMS in the browser when needed.</span></p>
<h3><span style="font-weight: 400;">Solid plugin ecosystem&nbsp;</span></h3>
<p><span style="font-weight: 400;">Similar to WordPress, Gatsby has a plugin layer that extends its functionalities. You have four plugins to choose from: source plugins, progressive images, analytics, CSS libraries, and other website functionalities like SEO, offline support, and RSS feeds.&nbsp;</span></p>
<h3><span style="font-weight: 400;">Open source&nbsp;</span></h3>
<p><span style="font-weight: 400;">As an open source product, Gatsby has a solid collection of hooks and functionalities that allows a Gatsby developer to customize it and the digital experiences you create as much as you need.</span></p>
<h3><span style="font-weight: 400;">CDN-ready&nbsp;</span></h3>
<p><span style="font-weight: 400;">Gatsby leverages an array of servers worldwide that ensure that no matter where your visitor comes from, they will always access a copy of your website closer to them.&nbsp;</span></p>
<h2 id="id3"><span style="font-weight: 400;">Why choose Gatsby in your projects?</span></h2>
<p><span style="font-weight: 400;">Along with Gatsby enhancing your website&rsquo;s speed, SEO, and more, additional benefits are depending on your specific project. Let&rsquo;s look at these.&nbsp;</span></p>
<h3><span style="font-weight: 400;">Technical benefits of Gatsby</span></h3>
<h4><span style="font-weight: 400;">Jamstack-ready</span></h4>
<p><span style="font-weight: 400;">What if we could take the reliability and robustness of a traditional web server infrastructure and combine it with the ease of use and developer-friendly nature of a platform like WordPress? Well, Gatsby can. Built on top of modern technologies and 100% ready for Jamstack, Gatsby offers an attractive alternative to traditional web hosting setups.&nbsp;</span></p>
<h4><span style="font-weight: 400;">Image optimization</span></h4>
<p><span style="font-weight: 400;">Serving optimized images is challenging, especially if you have to serve them to multiple devices and channels. Gatsby makes it easy to do it using plugins like the gatsby-plugin-image component that fetches images using GraphQL and transforms them using Sharp, a high-performance image processing library.&nbsp;</span></p>
<h4><span style="font-weight: 400;">Works with a headless CMS</span></h4>
<p><span style="font-weight: 400;">Gatsby integrates seamlessly with most </span><a href="https://ikius.com/blog/gatsby-cms"><span style="font-weight: 400;">headless CMSs</span></a><span style="font-weight: 400;"> in the market, enabling you to reap the benefits of a modern tech stack and build your frontend on a robust headless backend.&nbsp;</span></p>
<h4><span style="font-weight: 400;">Gatsby Cloud</span></h4>
<p><span style="font-weight: 400;">Gatsby Cloud is a cloud platform specifically built for building, previewing, and deploying Gatsby websites. With Cloud, your site is built and deployed in real-time on a global Edge network that provides millisecond load times for site visitors worldwide.</span></p>
<h4><span style="font-weight: 400;">Modern workflow&nbsp;</span></h4>
<p><span style="font-weight: 400;">Gatsby js follows the latest web standards and technologies. This includes a React-based architecture, GraphQL, and Webpack. For Gatsby developers already proficient in React, moving to Gatsby should be seamless.&nbsp;</span></p>
<h3><span style="font-weight: 400;">Business benefits of Gatsby</span></h3>
<h4><span style="font-weight: 400;">Internationalization</span></h4>
<p><span style="font-weight: 400;">Internationalization or i18n is the practice of adapting your content to the language and culture of your target audience. Gatsby leverages React&rsquo;s internationalization packages react-intl and i18next, and it also uses gatsby-plugin-i18n to help you create localized content faster.&nbsp;</span></p>
<h4><span style="font-weight: 400;">Search features</span></h4>
<p><span style="font-weight: 400;">A website without search features isn&rsquo;t very accessible. Luckily, a few ways to add search capabilities to a Gatsby site exist. For instance, you could use Gatsby&rsquo;s native js-search library or use an external, API-based search engine like Algolia and ElasticSearch.</span></p>
<h4><span style="font-weight: 400;">Robust authentication</span></h4>
<p><span style="font-weight: 400;">User authentication adds another layer of security to your website or app. If you need to create gated content restricted to authenticated users with Gatsby, using the plugin gatsby-auth is possible.&nbsp;</span></p>
<h4><span style="font-weight: 400;">SEO-friendly</span></h4>
<p><span style="font-weight: 400;">Gatsby can also help you with your website SEO.&nbsp; It makes it easier for search engine crawlers to crawl and index your site. Plus, Gatsby has other advantages to SEO. This includes helping your site rank and perform better in search engines. Using Gatsby makes your site fast and efficient for search engine crawlers, like Googlebot, to crawl your site and index your pages. Some advantages, like speed, come out of the box, while others require configuration.</span></p>
<h2 id="id4"><span style="font-weight: 400;">Gatsby.js pros and cons</span></h2>
<!-- ######## This is a comment  ######## -->
<table>
<tbody>
<tr>
<td>
<p><span style="font-weight: 400;">Pros</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Cons</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">SEO-friendly</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Needs constant content updates</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Future-proof</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Potentially slow build times</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Low hosting costs</span></p>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Secure against cyberattacks</span></p>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Allows for omnichannel marketing</span></p>
</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<h2 id="id5"><span style="font-weight: 400;">What to build with Gatsby?</span></h2>
<p><span style="font-weight: 400;">Gatsby turns your text into beautiful, interactive sites that are easy on the eyes and quick to load. You can take any content and publish them onto one of many customizable templates in seconds. All without ever having done anything technical before, even if you don't know how code works.</span><b></b></p>
<ul>
<li aria-level="1"><b>Business pages: </b><span style="font-weight: 400;">The power and flexibility of Gatsby make it an excellent choice for building business sites that need to be integrated with several third-party platforms. You can use Gatsby to build a single-page application and present it to your visitors, providing a lightweight, interactive experience.&nbsp;</span></li>
<li aria-level="1"><b>Jamstack websites: </b><span style="font-weight: 400;">Jamstack is a content API that returns JSON or XML. This means you can use the same backend for your Gatsby site and native applications, which are both important if one wants their application's UI to be accessible by users using other devices.</span></li>
<li aria-level="1"><b>Headless eCommerce stores:&nbsp; </b><span style="font-weight: 400;">Merchants who want a modern commerce framework based on proven technologies like React can find it in Gatsby. With Gatsby, you can&nbsp; build breathtaking commerce experiences and deliver omnichannel content across different devices to reach more potential consumers using Gatsby&rsquo;s plugin system and pre-built integrations.</span></li>
</ul>
<h2 id="id6"><span style="font-weight: 400;">Gatsby vs Next.js vs React</span></h2>
<table>
<tbody>
<tr>
<td>&nbsp;</td>
<td>
<p><span style="font-weight: 400;">Gatsby</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Next.js&nbsp;</span></p>
</td>
<td>
<p><span style="font-weight: 400;">React</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Application size</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Smaller than a React application but bigger than a Next.js one</span></p>
</td>
<td>
<p><span style="font-weight: 400;">A Nextjs application is smaller than a React app</span></p>
</td>
<td>
<p><span style="font-weight: 400;">A React application is bigger than a Nextjs app</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Developer experience</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Average&nbsp;</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Great&nbsp;</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Great</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Maintainability</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Easy to maintain</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Easy to maintain</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Hard to keep updated</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Ideal use cases</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Blogs, static sites</span></p>
</td>
<td>
<p><span style="font-weight: 400;">eCommerce, company websites, static landing pages</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Single page applications, company websites, portals</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">SEO-friendly</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Yes</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Yes</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Yes</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Documentation&nbsp;</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Excellent</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Excellent</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Average</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Plugin ecosystem</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Bigger than Next.js</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Small</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Bigger than others</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Internationalization</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Yes</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Yes</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Yes</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Starter templates</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Yes</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Limited</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Plenty</span></p>
</td>
</tr>
<tr>
<td>
<p><span style="font-weight: 400;">Community size</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Large</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Larger than Gatsby&rsquo;s</span></p>
</td>
<td>
<p><span style="font-weight: 400;">Huge&nbsp;</span></p>
</td>
</tr>
</tbody>
</table>
<p><span style="font-weight: 400;">If you&rsquo;re still struggling with which one to choose for your next project, take a look at our article on </span><a href="https://ikius.com/blog/what-is-a-static-website"><span style="font-weight: 400;">how to choose a static site generator</span></a><span style="font-weight: 400;">.</span></p>
<h2 id="id7"><span style="font-weight: 400;">Gatsby and Jamstack</span></h2>
<p><a href="https://ikius.com/blog/what-is-jamstack"><span style="font-weight: 400;">Jamstack</span></a><span style="font-weight: 400;"> is a new technology stack changing how we build websites and applications. The JAM in Jamstack stands for JavaScript, APIs, and HTML markup - meaning you can use it as an alternative to </span><a href="https://ikius.com/blog/jamstack-vs-wordpress"><span style="font-weight: 400;">WordPress</span></a><span style="font-weight: 400;"> or Drupal if your business needs something more lightweight but still powerful enough.&nbsp;</span></p>
<p><span style="font-weight: 400;">As a </span><a href="https://ikius.com/blog/how-to-choose-a-jamstack-agency"><span style="font-weight: 400;">Jamstack agency</span></a><span style="font-weight: 400;">, we at Ikius are intimately familiar with Gatsby.js. Choosing Gatsby as your JavaScript framework has plenty of advantages for developers and business users, with the added benefit of being one of the best technologies in a Jamstack tech stack.&nbsp;</span></p>
<p></p>
<p><span style="font-weight: 400;">Gatsby is a great option for companies and brands who want to build Jamstack-based digital experiences that are fast, scalable, and ultimately successful in serving thousands of visitors.&nbsp;</span></p>
<h2 id="id8"><span style="font-weight: 400;">Gatsby in the wild</span></h2>
<h3><a href="https://ikius.com/work/brightway-careers"><span style="font-weight: 400;">Brightway Careers</span></a></h3>
<p><span style="font-weight: 400;"><img src="https://cdn.aglty.io/bwql7jyk/brightway careers home page.png?w=800" alt="brightway careers home page" /></span></p>
<p><span style="font-weight: 400;">We migrated </span><a href="https://brightway.careers/"><span style="font-weight: 400;">Brightway's</span></a><span style="font-weight: 400;"> site from WordPress to Jamstack and saw an astonishing increase in Google Lighthouse's performance score. We also provided guidance and help regarding UI/UX when working with Brightway's designers to create a refreshed style for the brand.</span></p>
<p><span style="font-weight: 400;">The site is multilingual and features a fully customizable page structure with modular components and content for each locale. The content is managed with Sanity, an excellent </span><a href="https://ikius.com/blog/what-is-a-headless-cms"><span style="font-weight: 400;">headless content management system</span></a><span style="font-weight: 400;"> for Brightway's use case, achieving a 6x faster load speed compared to its previous WordPress build.</span></p>
<h3><a href="https://ikius.com/work/real-estate-asset-management"><span style="font-weight: 400;">KVH</span></a></h3>
<p><img src="https://cdn.aglty.io/bwql7jyk/kvh group.png?w=800" alt="kvh group home page" /></p>
<p><span style="font-weight: 400;">We designed and built a modern Gatsby website for Real Estate Asset Management KVH Ltd, whose previous WordPress-built site was buckling under the weight of plugins.&nbsp;</span></p>
<p><span style="font-weight: 400;">Thanks to Gatsby&rsquo;s great plug-in ecosystem, pre-loading, and worldwide servers, we were able to enhance the KVH site from being weighed down under plugins to smoothly loading.&nbsp;</span></p>
<h2><span style="font-weight: 400;">Closing thoughts</span></h2>
<p><span style="font-weight: 400;">If you're looking for a powerful, flexible, and performant frontend framework, Gatsby is definitely worth checking out. You can do much with Gatsby with its plugin system and React support. And the built-in performance optimizations make it a great choice for high-traffic websites.&nbsp;</span></p>
<p><span style="font-weight: 400;">If you're looking for a static site generator that offers an intuitive, user-friendly experience, Gatsby is definitely worth checking out. With its huge community of developers and growing library of plugins, it's well on its way to becoming the go-to option for static websites.&nbsp;</span></p>
<p><span style="font-weight: 400;">And thanks to its support for progressive web apps and single page applications, Companies can use Gatsby to build some pretty amazing websites. So if you're ready to take your website or app development skills to the next level, Gatsby is a great place to start.&nbsp;</span></p>
<p><span style="font-weight: 400;">If you want to assess whether or not Gatsby is the right tool for the job you have in mind, get in touch with us, and let&rsquo;s discuss your Gatsby project. Our </span><a href="https://ikius.com/blog/what-is-a-headless-cms"><span style="font-weight: 400;">Gatsby development service</span></a><span style="font-weight: 400;"> can help you make a decision or help you choose the right technology for your project.&nbsp;</span></p>