Why has Gatsby JS – a static site generator – gained so much prominence in the last few years? What makes it more valuable over other static site generators like Hugo, Jekyll and Next.js? Who is Gatsby JS good for? Should you use Gatsby JS for your next development project? What is so great about Gatsby JS anyway? Let’s answer all those questions and more and clear the air about Gatsby JS.
What is Gatsby JS?
Gatsby JS is a powerful, flexible and blazing fast static site generator for React JS. It is a product of modern web technology that leverages all features of advanced open-source innovations in React, NPM and Gatsby communities.
Going beyond the names though, Gatsby is more than just a SSG. It brings to you the speed of a statically generated website and also the functionality of a sophisticated framework. It helps destroy the perception that static site generators are only suitable for simplistic sites like content or marketing, and helps build static sites that load dynamically and can impart feature-rich and smooth app like experiences on the web, thanks to its Rehydrated DOM. So from ecommerce sites to serverless function providers, Gatsby helps build advanced app and web experiences.
What are static site generators and how is Gatsby better?
In an article titled Three digital trends that are shaping marketing today, Justin Nassle of Brandastic.com says:
“While the look and feel of websites are getting more sophisticated, site architecture is getting back to its roots. If you are considering a website rebuild, it might make sense to look at static site generation as an option.”
As the name suggests, static site generators build sites that display static content – like a simple blog or HTML page. These have existed since the 1990s. What then is so innovative about Gatsby JS for web and app development that we sit here talking about it in 2021 like it was the hottest new it thing?
Gatsby is a modern web static site generator that brings dynamic content loading to the table. In traditional database-driven content management systems like Drupal or WordPress, the software layer receives resource request from a client, processes the request and serves a HTML page as requested.
Modern static sites generators on the other hand, offer a thing called dynamic page loading. They separate the content from the templates that carry the content. This helps them generate HTML pages at build time and deploying them on a web server. By combining templates with content brought from an external API, the complete process is made faster and more efficient.
By doing so, modern static site generators bring to the table a number of advantages. They eliminate latency associated with databases and add speed and reliability to the web pages. They load faster, handle traffic spikes better and manage database server software more efficiently.
Best Features of Gatsby JS
Gatsby is rising tremendously in popularity and currently sees up to 2 million monthly downloads on NPM. It has 51k stars on Github and has an active community of developers and contributors. What makes it so popular? Gatsby JS brings to the table a set of unique features that help build fast, rich experiences with ease and alacrity. Some of the best features of Gatsby are
Based in React
One of the best features of Gatsby is that being based in React, it has a simple learning curve and can be easily adopted by developers across the board. Anything you want to build, be it an ecommerce site, a blog or a corporate website, if you can build it with React, you can build it with Gatsby.
Incredible speed
Gatsby pushes the boundaries of traditional web development, letting you flaunt app like experiences on a tight budget. Moreover, it lets you astound visitors with blazing speed and unparalleled responsiveness. Combining static site generation and intelligent page rendering, Gatsby provides smooth, feature rich experiences at scale.
Load data from anywhere
One of the features that Gatsby is widely loved for is its ability to load data from anywhere. Be it a content management system like WordPress, REST, Contentful or GraphQL API, or be it Markdown files.
Gatsby introduced the unique concept of ‘content mesh’. On the Gatsby official blog, Sam Bhagwat, co-creator of Gatsby JS describes content mesh as –
“The emerging strategy for content management selects best-of-breed solutions, tailored to specific use-cases like e-commerce or blogging; it provides a modern framework for rapid iteration and it generates lightning fast websites out of the box.”
Gatsby JS takes away the pain of manual integration and gives developers access to best-of-breed services while preserving content creators’ workflows. So you can easily link third-party platforms and handle a variety of data sources.
This way, the content mesh moves away from monolithic, all-in-one platforms and approaches towards a cohesive model wherein each third-party platform contributes a special functionality to the overall architecture, allowing each platform to do what it does best, while you get a uniform developing experience no matter where the data comes from.
Great performance built-in
The creators of Gatsby JS clearly had performance at their heart and designed Gatsby to deliver great performance right out of the box. Gatsby’s build process is optimized to deliver maximal site performance thanks to strategies like inclining of critical assets and effective code splitting, prefetching resources and more.
The code splitting ensures that only the necessary code for each page is served, increasing speed and performance. Additionally, heavy image optimization and lazy loading helps load up even rich images faster and keeps the experience moving without pause.
Another way Gatsby JS enhances site performance is by smart pre-loading of assets so that users experience seamless navigation. What you get as a result is a blazing fast site that works optimally on the shakiest of networks and wows users from the get go. It also saves development time with a lot of the work already done for you.
Low cost hosting at scale
Since Gatsby sites don’t require servers, you can practically host your site for pennies on a CDN and even entirely free on the Gatsby Cloud. As opposed to server rendered sites, Gatsby outputs static content that is incredibly easy and affordable to host with any provider.
Moreover, by deploying your site on edge, Gatsby takes advantage of modern technologies that protects your data from traditional server-side vulnerabilities, providing a no-hassle experience for visitors.
Gatsby lets you have shorter development cycles
Developers find working with Gatsby delightful. It wraps together the best of modern web technologies like JavaScript, Git, CI/CD and APIs to give you a sophisticated and intuitive developer experience. Developers find themselves spending less time doing optimizations freeing up more time to write code.
Extensive open source ecosystem
Gatsby JS has bragging rights to a warm open source community that makes development a joy. This Gatsby community has so far created over 2000 plugins which means that most of what you want to build into your site may already be available as a readymade tool you can easily integrate into your site. Add to that a fantastic collection of API hooks and developers can customize every step of the development process, be it adding third-party tools, integrating data or converting data from one format to another.
World-class documentation
From a detailed Gatsby JS tutorial for open source development to clear and comprehensive context on everything Gatsby does, there’s an abundance of well-structured documentation for Gatsby developers.
Are there any downsides to Gatsby JS?
There may always be some things about a framework that don’t work for some people. Gatsby too has just a few potential drawbacks
Sharp learning curve
Despite the high level of familiarity Gatsby offers by being based in React, it can pose a pretty steep learning curve for developers. There’s quite a lot to learn such including React, GraphQL, Gatsby specific APIs, Markdown and more. For those unfamiliar with any of these concepts, the learning phase can be overwhelming.
Tricky troubleshooting
Gatsby builds in a great deal of preset functionality that allows it to work like magic and save plenty of developers’ time. However, with the high level of default configurations and underlying tools, it can often be tricky to troubleshoot when something goes wrong.
Plugins can be sometimes sub-par
While Gatsby’s flourishing ecosystem ensures a rich repository of plugins and helps build faster interfaces, there can be times where plugins aren’t entirely reliable. When a lot of plugins are being used, it effectively means incorporating the work of a lot of people you don’t know. Plugins can be spread out and not always of the highest quality. However, this is more of a standard open source trade-off than a Gatsby specific issue.
Gatsby use cases – who is it actually for?
The Gatsby fanbase in continually expanding and newer use cases are successfully manifested month after month. Gatsby’s massive ecosystem of Plugins, Themes and Starters paves the way for rich user experiences in a range of categories such as SaaS, eCommerce, Financial services and more. With the right combinations of plugins and starters, setting up a feature rich site can be as easy as plug and play.
Some of the most popular use cases of Gatsby JS include:
Progressive Web Apps (PWAs)
At its core, Gatsby is designed to be a framework for progressive web apps. With robust PWA features, Gatsby helps build progressive web apps of top order that work seamlessly and load up instantly. Users get high performance app experiences on the web thanks to Gatsby’s out-of-the-box optimization.
Static sites using headless CMS
When you need a static website that serves JavaScript, HTML and CSS, Gatsby does the trick for you. Personal blogs and websites for example, can be made fast, SEO efficient and inexpensive to host with Gatsby. Sites like Most Recommended Books and Kent C. Dodds for instance are personal static sites made with Gatsby.
B2B and SaaS websites
B2B and SaaS websites need to convert, and hence need fast page loading, low bounce rates and high organic search traffic. GatsbyJS helps these websites provide great user experience, top notch integrations with analytics and automation tools and high performance. SendGrid and Oomph are some top websites build with Gatsby JS in this category.
Ecommerce Websites
Building ecommerce websites with Gatsby JS comes with some unique advantages. Building customized storefronts for headless web shops where visitors can browse, buy and pay for products is easy with Gatsby’s fast load speeds, SEO efficiency and data security. Urban Armor Gear and Curology are some shining examples of ecommerce websites built with Gatsby JS.
Custom Landing Pages
The thing landing pages need to have is ease of editing and customizing. Marketers want to be able to make constant improvements to copywriting and need to build and optimize landing pages quickly, often without the help of developers. Gatsby helps landing pages do just that. Job finder website Paths, and Leave Me Alone, an app that helps users unsubscribe from unwanted newsletters are examples of custom landing pages built with Gatsby JS.
When should you not use Gatsby?
There are a few specific use cases where you may want to skip Gatsby and choose another solution. If your projects is particularly complex, has a lot of changing data and moving pieces, Gatsby may lead to increased build times.
Large magazines or newspapers
So if you are constantly adding new information to your sites, specially multiple times a day, choose a more dynamic framework. Blogs that are continuously adding news and update, newspapers and magazines for example, are few examples.
Big corporate ecommerce stores
Also while Gatsby is perfect for small ecommerce sites, larger, corporate size shops will lead to larger build times and slower outputs. With time though, Gatsby might grow up to be able to handle such large builds.
Client-side web apps
If you are hoping to build the next twitter with a lot of client-side server programming and user generated content, Gatsby may not be able to handle the sort of work right now.
Do you need to know React and GraphQL to use Gatsby?
If you haven’t worked with React or GraphQL before, and that’s what’s holding you back from starting your Gatsby journey, there isn’t a reason to worry. While it is true that you do need to be familiar with React and GraphQL to work with Gatsby, getting started with Gatsby is actually a great and easy way to learn these two.
Gatsby’s sophisticated documentation and detailed tutorials make it easy to learn React and GraphQL, making it a great starting point.
Conclusion
As it turns out, developers – new and old – just love Gatsby JS. Be it for its amazingly fast speed, delightful developer experience, high performance, robust community and great documentation, Gatsby JS is a developer’s favorite. The user advantages are no less with flawless app like experiences on the web. Whether you are building a B2B SaaS app or a personal blog, Gatsby has just the right set of tools for you. A fantastic plugin ecosystem, fast CLI and familiarity with React Components makes Gatsby a perfect setup for modern web app development. Giants like PayPal, Airbnb, IBM and Braun have used Gatsby for developing parts of their digital arsenal. So if you’ve been thinking about it, now is a great time to jump into Gatsby development for your next app development project.
For business inquiries
For jobs inquiries