What is Gatsby?

Gatbsy is marketed today as “The static dynamic site generator for dynamic web developers.” It is a front-end design tool and a static site generator, but that does not mean it is not interactive or not dynamic. It uses React for templates and CSS for styling, and you can benefit from its built-in plugin architecture reminiscent of Drupal and WordPress.

 

Before continuing, I’ll save you The Great Gatsby jokes and puns, but I actually love the book, so if you want to discuss that, you are also welcome to send me a DM!

 

On the other side, Gatsby is a freemium and open-source framework based on React that helps developers create incredibly fast web pages and web apps. Gatsby was created by Kyle Matthews in 2015 and became popular around 2018. As we were saying, it works with ReactJS, Webpack, GraphQL, and ES6. It is based on the Jamstack architecture: that is JS + APIs + Markup = JAM. Basically, the way the web is built nowadays.

Why use Gatsby

As with many new technologies, it provides the typical three pillars: speed, security, and a good dev experience.

 

• Why speed? As a static site, it is way faster than many alternatives since it is almost impossible to beat its performance.
• Why secure? Again, its static nature makes Gatsby-developed sites inherently more secure. There is no database to hack, no user data on the server. You can only access HTML files, so the damage is minimized.
• Why a good dev experience? New technologies can be a breath of fresh air compared to really draining and antiquated stacks. Gatsby provides a modern development environment. It is simple, robust, and sleek.

 

What makes Gatsby an outstanding project is a solid support team and a reliable community that provides documentation due to its open-source nature. While Gatsby is free, it has a team of professionals behind to help it grow and flourish—a feature that many open-source projects lack, even with their strong sense of community.

When should you use Gatsby?

In his video, Ben Awad explains how to choose between GatsbyJS, Next.JS, and CRA, depending on the type of project. While Gatsby presents a simple, SEO-oriented performance, it is not convenient when dealing with data sources that have frequent updates. Gatsby is not ideal for a website that is constantly changing, like social media.

If you were planning to build the next Facebook, Twitter, or Instagram, Gatsby might not be the ideal framework. While you are at it, avoid the control and surveillance stuff, though. On the other hand, if your site only needs updates every hour or every couple of days, you will be okay.

Why is it so fast?

So, yeah. Gatsby is fast, maybe one of the fastest options out there when it comes to frontend development. But why is it so fast? Well, there are some key features to consider. Let’s make it short and sweet. Here they are:

 

• Gatsby pre-renders your sites at build time.
• Gatsby preloads the next page when hovering a link.
• Gatsby can optimize your images automatically.

Mobile-first approach and Gatsby

You know we have a thing for mobile-first development. If you have no clue, then you can play catch up here. We have been talking about Gatsby as a framework for building web apps, especially for desktop, but it’s not limited to a specific viewport. Developing with Gatsby with a mobile-first approach is possible, but you will need an additional tool: Capacitor.

 

If you are a developer interested in this topic, you can read more about it in Florian Gyger's article: Build blazing-fast mobile apps with Gatsby and Capacitor. As always, links are below.

Gatsby: a tool for developers

Gatsby is a unique tool for developers thanks to three essential features that set it apart from other frameworks:

 

• Developer-friendly and designed to be extensible. Gatsby plugins are developer-friendly, which helps solve almost any technical problem while providing scalability and room for extension.
• Code everything with React and GraphQL. Developers, you know what this means. I will not even try to explain this one. If you need more advice, you can contact us, and I’ll put you through with our dev team.
• Simplicity and ease of adoption. You may think that being updated to the latest technologies is hard, and I wouldn’t differ, but Gatsby has a strong community and can be easily acquired. Here is a complete tutorial with examples by Luke Joliat if you feel so inclined.

 

Gatsby, combined with powerful tools like Plasmic, can be an extraordinary tool to use with your team for development. You know we are big fans of collaboration and the open-source community. We use Figma for collaborative design and so on. Plasmic can make your Gatsby site editable to the whole team, giving you autonomy, eliminating development cycles, and helping you deliver desired outcomes.

The new Gatsby: v3.0

Let’s do a quick summary and review what is new from the Gatsby development team. In terms of benefits, we have listed a few:

 

• Fast, accessible, secure and SEO-optimized
• Built with popular, proven technology
• Unified access across content sources
• A plugin for nearly everything you need
• An incredible open-source community
• Gatsby’s popularity continues to grow

 

But there is some trouble in paradise. These were quite common problems in Gatsby v2.0:

 

• Slow local development experience
• Long build times
• Creating pages from data was tedious
• “Worked on my dev server” but not on the site (that one is infuriating)

 

Don’t panic! The cavalry's here, and the new Gatsby v3.0 promises an all-around better experience. If you are a developer, you can watch a demo of the latest version (link below), but the main issues have been covered. Gatsby v3.0 provides a faster DX, faster rebuilds, simple page creation, clear release cadence, and what you develop correlates with what you build. Gatsby is just putting itself to speed; we expect a lot more from them in the future.

 

At Awkbit, we work extensively with Gatsby as our technology of choice for the front end. Open-source, speed, security, performance, and a good dev environment are not just keywords for us. They are the pillars of our work as a software factory. Are you looking for a fast alternative to build your website?