What Is Gatsby & What Is It Used For?

Before jumping into Gatsby, let’s begin with the context surrounding it. The world of the web is an ever-changing modern phenomenon. What was the norm a few years back is now outdated and considered a “legacy system”. Interactive content, such as videos and images, has become essential to every website. In addition, users want more immersive digital experiences and expect them at near-instant speeds. 

However, many websites still use older technology to create a modern experience. Building static websites doesn’t have to be complicated in this day of immersive, dynamic web experiences. But, if you’re still using legacy web development platforms, you should seriously rethink going a different route. 

Optimising for search engines, page load times, and minifying codes and images can take time away from building a site that looks spectacular and performs super-smooth. Furthermore, it can lead to complications and challenges your team may not have the time for, derailing progress and digital growth. However, fret not! Intuitive developmental innovations such as static site generators can help you worry less about performance. 

Contemporary static site generators are the answer as they can make the web-development process a whole lot easier by handling most of the technical aspects allowing you to focus most of your efforts on the front end – improving the navigational web experience for your web traffic.

One such framework, Gatsby, solves these challenges so you can just focus on making fantastic websites that provide unique digital experiences to your customers. So how does it do it, you might ask? Well, we’ll break all that down and more for you.

This article will go in-depth into the history, current use cases, and the advantages and disadvantages of using Gatsby for building websites and web applications.

Brief History Of Gatsby 📜

Kyle Mathews, alongside Sam Bhagwat, co-created Gatsby in 2015 after working on WordPress and Drupal for over two years. If you’ve noticed already, it’s named after F. Scott Fitzgerald’s novel “The Great Gatsby”.

The platform was built to be a modern JavaScript framework that lets developers build super-fast and unique websites and apps quickly and easily. This framework allows developers to create sophisticated layouts and design effects using open-source inventions such as React for web development.

What Is Gatsby And How Does It Work? 🤔

Gatsby is a React-based open-source JavaScript framework for creating blazing-fast websites and applications.

Gatsby’s mission is to make website development fun by abstracting away the tedious parts, like configuration, data fetching, and asset optimisation, so you can focus on what matters most: your content and your users.

Gatsby is used by some of the world’s leading companies, including Accenture, Wix, and numerous others.  It’s built upon React and GraphQL to pull data from various sources, including Headless CMSs, APIs, and Markdown files. Gatsby builds the website at build time, so there is no need for a dynamic server. This makes its websites extremely fast and scalable without needing server-side code.

Gatsby also uses various modern web technologies such as Webpack, Babel, and PostCSS. Its rich plugin library (over 3000+ at the time of writing) makes extending and customising websites relatively easy and accessible. The plugins provide features: Sass/SCSS support, TypeScript support, image optimisation, progress bars, Google Analytics support, and much more. 

In addition to its core feature set, Gatsby has an ever-growing collection of official and community-built plugins & themes to make development even more accessible & enjoyable for everyone.

Gatsby’s unique “preloading” feature allows page resources to be fetched before the user navigates to this page component. This prefetching process helps it anticipate the user’s next move. This way, your images, links and videos load instantaneously despite not being connected to a server or a database. 

Once a page is loaded, it prefetches resources for other pages your users might navigate. This way, your site loads as fast as possible, making user interactions seamless. 

Furthermore, as there are no servers, databases, and load balancers to manage, your sites and apps never go down and instantly scale for traffic spikes. This also means your sites are ultra-secure due to the absence of a dedicated server. All your content is compiled ahead of time, so hackers can’t get into your database or your CMS and disrupt your website architecture. 

What Is Gatsby used for? 🌐⁉️

At its core, Gatsby is mainly used as a static site generator that leverages React. This framework is typically used for building websites and applications using React. The platform provides features that make it easy to get started with React, including a CLI tool, structural data handling, and code splitting. 

Gatsby is mainly used to build static websites, Progressive Web Apps, and even Electron apps. However, it’s also well-suited for building blogs and other content-heavy websites. 

Thanks to its many plugins and themes, the platform makes it easy to get started with a wide variety of website designs and layouts. In addition, as it’s built on top of React, it benefits from all of the performance and development improvements associated with ReactJS.

React is a library meant to provide a particular set of core functionalities for developers to utilise and incorporate into their projects to facilitate more accessible coding. It is intended to be lightweight and broadly applicable. Gatsby uses React to maximise coding efficiency via reusability and loads only critical HTML, CSS, JavaScript, and other data to boost performance.

Dynamic Vs Static Websites 🤷‍♂️

Before we go any further, let’s go over dynamic and static websites, as this concept is essential to understand the specific use cases of a tool like Gatsby.

💭 What Is A Static Website?

Static sites have been around for a while and are how websites were built initially, i.e. with just HTML, CSS, and JavaScript. They are not dynamic, which means they aren’t rendered during runtime; there is no server-side code and no database in play feeding real-time data to the application. Essentially, every visitor who lands on the site will see the same thing. 

Every page on a static site is stored as a single HTML file and rendered from the server to the front end precisely, without any changes or alterations. The only way the content of the page changes is if the code of the HTML is edited.

Advantages Of Static Websites

A static site’s benefits are speed, search engine optimisation, and security. Not only are static sites made with Gatsby blazing fast, but they have implicit protection as there is no database or server. Furthermore, unlike standard React applications, static websites make SEO much more straightforward since search engine bots and crawlers can find the content relatively quickly and easily.

Disadvantages of Static Websites

On the flip side, Static websites are not the best for scalability and don’t suit content-heavy interfaces such as social media websites. In addition, as each page will have to be built individually, setting up the entire website can be time-consuming. This also poses a concern for management and maintenance, as content changes and updates will have to be made page-by-page, which can be unnecessarily bothersome and almost impossible for large websites.

💭 What Are Dynamic Websites?

On the other hand, dynamic websites deliver and display content dynamically according to user behaviour or based on user-generated content. These websites are built using server-side language and technology, allowing each page’s content to change in real-time, specific to each web visitor. Some prime examples are Instagram, Facebook, Netflix, Disney Plus, CNN, etc.

Dynamic websites generate displayed content based on the user’s past interactions with content or their recorded content preferences. This data is stored in a backend database, which connects to the website’s front end during run-time.  

Advantages Of Dynamic Websites

Dynamic websites rely solely on a database system to fetch content particular to a specific visitor. As a result, it is easier to manage and maintain on an ongoing basis. This also facilitates scalability, as multiple pages can be changed and edited quickly and reasonably straightforwardly.

Furthermore, the catered content specific to the user’s behaviour, preference, or location leads to an immersive user experience that static websites can never provide. This level of unique personalisation also leads to improved traffic retention and conversion rates.

Disadvantages Of Dynamic Websites

Most dynamic websites tend to be content-heavy, so that they can run into more technical complications and performance issues. However, this also means that the overall time, resources and finances involved in creating a dynamic website will far outweigh the requirements for building a static version.

Gatsby – An Amazingly Convenient Static Site Generator 😌

Gatsby, being a static site generator, is a tool that assists developers in building static sites by doing most of the laborious groundwork for them. This allows developers to focus on improving the website’s frontend architecture and layout while the platform takes care of the burnt of the backend development on its own.

Generally, JS frameworks and libraries generate HTML content on the client side during runtime. However, static site generators generate this content during build time, as server-side rendering is not applicable here. 

📊 Differences Between Gatsby and Next.js

Gatsby is not the only development framework that uses ReactJS. So, you might think, how is it different from other React-based technologies?

The main difference between this type of framework and one that uses server-side rendering is the absence of server-side code. So, unlike a tool such as Next.js, Gatsby does not render anything on the server when a request is made, as everything is done at the build time of the application.

Gatsby is primarily a static site generator, while Next.js is used in fully-fledged React applications involving server-side rendering. As a result, they generally have very different use cases.

Advantages of Using Gatsby Over Other React Frameworks ✅

Gatsby makes creating a static website as simple and fast as possible. If you’re looking to build a static website, regardless of the size or scope, then it’s a great option that you should seriously consider.

But first, let’s explore why this framework is such a fantastic web-development framework.

🧐 Incredible At What It Does

Being a specialist static-site generator tool, Gatsby is possibly one of the best solutions if you want to develop a static website. In addition, it has some great features and plugins that differentiate it from other static site generators, making it a convenient solution that takes care of most technical problems in a website development project.

🤝 The Great “React” 

Gatsby leverages React, so it is an excellent choice for those proficient in this web-development technology. However, it also pairs well with other platforms like Netlify, and you can also easily configure your site to build and deploy every time you push local changes to GitHub.

🤩 Extensive Plugin & API Library

Gatsby also has a great ecosystem of plugins supported by an active and helpful community that serves various unique purposes and web-project requirements. For instance, its plugins can help you source data from CMSs like WordPress or Contentful, help you integrate with internal search-engine tools like Algolia, and manage your images by lazy-loading whilst optimising them.

The API stack is also impressive, making static site development much more accessible .  Case in point, if you want to source data yourself, you can use various APIs at your disposal. Plugins for sourcing data use the sourceNodes API and the createNode action provided by the platform to make your data retrievable in the build process. 

Gatsby also has many unique components and features that simplify things like routing, linking, and handling images, some of which are not included in the core React library.

Drawbacks of Gatsby – Why It May Not Be For Everyone ⭕

While Gatsby has many benefits that make it a phenomenal static site builder, it may not be the right tool for every project. Here, we’ll review potential challenges you may encounter when using it.

😵 Challenging Setup 

One drawback of Gatsby is that it can be challenging to set up as it requires you to have some knowledge of React. Thus, it can be challenging to get all of the dependencies configured correctly. 

Maintenance is another challenge, as updates are notoriously tedious and not as convenient as with other client-facing CMS like WordPress, for instance.

🤨 Missing Server-side Rendering

Another downside of Gatsby is that it doesn’t support all plugins and features from React. For example, it doesn’t currently support server-side rendering. So if you need a component that it doesn’t support, you’ll either need to find a workaround or use a different tool. 

😩 Rebuilding Is Not Easy

Rebuilding a site takes significantly longer on Gatsby as it’s only meant to build assets and turn them into highly optimised output instead of constantly tracking resources for changes every second.

Consequently, it’s not the best option to build highly dynamic websites that depend on real-time data that frequently gets updates and changes. This is also why Gatsby is predominantly used as a static site builder more than anything else.

That said, it shouldn’t stop you from including dynamic, reactive, or real-time frontend components in your site or app while having Gatsby generate your static files on the backend. 

A possible solution is to create pages that use standard react patterns for dynamic content. Of course, you’ll have to separate the active frontend components from the static backend files, which wouldn’t be hard considering Gatsby’s reliance on React.

😬 Platform Rigidity

Many would consider Gatsby to be an opinionated platform as the platform is quite specific regarding the application’s structure and associated learning curve. As a result, developers who try the platform for the first time will need a while to learn the Gatsby way of doing things. 

In addition, Gatsby doesn’t support some critical features available in other static site generators, such as server-side rendering and dynamic routing. As a result, it may not be the right tool for every project.

🙁 Content Size Specific Build-time

Build-time on Gatsby depends on the size and scale of content, meaning static websites with a ton of content can take a while to develop using this platform. A possible solution to this would be to use GatsbyCloud but at the cost of paying a monthly subscription fee.

Despite its drawbacks, Gatsby is still an excellent tool for building fast and modern websites. If you’re willing to put in the time to learn how to use it properly, Gatsby can be an influential asset in your web development toolkit, but at the same time, it isn’t the best tool for everyone or every web-development project.

Putting It Altogether ✨

In essence, Gatsby carries over all the benefits of static websites, such as speed, security, and SEO. As a result, it is excellent for those who like to do a bit of coding and don’t want just to use WordPress or Squarespace.

However, if you’re under the impression that Gatsby is just for building static websites, think again. By leveraging the power of ReactJS, you can build Progressive Web Applications with it and other dynamic web applications; you’ll just have to implement a few workarounds to make that happen.

Without knowing your specific website requirements, we cannot recommend Gatsby. Furthermore, while this framework has some unique strengths, it can also be challenging in some areas. However, if you’re looking to build a static website, you could do worse than Gatsby.

If you want to learn more about Gatsby or are interested in how it could work for your business, book a discovery call with us today.