Gatsby.JS Pros and Cons

Introduction

Companies are looking for modern solutions to problems with their websites like slow page load speed, bad SEO or inability to improve user experience. The demand for such solutions grows because competition online is tough, and every business wants to beat the rest.

As a result, there are many technologies and frameworks to choose from that can help these companies overcome their challenges. One of them is GatsbyJS, and today, we would like to present its pros and cons so you can decide whether it can solve your problems, too.

What is GatsbyJS?

In short, Gatsby is a React-based free and open-source framework that helps developers build blazing-fast websites and applications. It offers built-in performance, scalability and security.

Developers love this static site generator for its great documentation and using modern tech stack that’s future-proof. However, it’s also loved by business owners and marketers, and soon you will find out why.

GatsbyJS and Jamstack

Gatsby development is now one of the most popular ways for building superfast, and super SEO-friendly Jamstack websites.

It can be perfectly combined with different headless CMSes, or eCommerce platforms to drive extraordinary performance and SEO results.

If you want to learn more, we always recommend starting from our guide – What is Jamstack?

On top of that, we made a short video that may help you decide whether you should use Jamstack architecture for your project, or not:

When to use GatsbyJS?

If you want to answer this question, first you must think about your goals. What do you want to achieve by using GatsbyJS for the next project?

Then check your answers with goals that you can achieve with GatsbyJS:

• Increase in conversion and sales
• Boost in marketing efficiency
• Overtaking competition online
• Better user experience
• Lower maintenance costs
• Easy to scale

Is there at least one match? If yes, you can move on to the next part.

If not, you can talk with us anyway to see if Gatsby will help you achieve your goals.

What can you build with Gatsby?

Deciding on using Gatsby is also correlated with what you want to build. There are some best use cases for Gatsby:

• PWA (Progressive Web Apps)
• Jamstack websites
• Static eCommerce storefronts
• Headless eCommerce platforms
• Performant marketing pages
• Super-fast digital business page

Pros of Gatsby

Gatsby gains popularity thanks to many benefits offered for developers and business owners and marketers. Regardless of your position in the company, it’s worth knowing all benefits as at least one of them may be a deciding factor in choosing Gatsby for the next project.

Pros of Gatsby for business owners

Every business is profit-oriented because money is like oxygen for companies. However, Gatsby brings more than just money to the table for business owners. 

Fast page load speed – bounce rate from loading a page is quite high nowadays (as you can see on a screen below), so you have to make sure that visitors will actually check the value you deliver on your website.

SEO efficiency – don’t believe those saying that SEO is dead. They have been saying that for the past few years and still organic search traffic brings money and high ROI for those investing in it. And investing in Gatsby means investing in SEO as Gatsby websites are SEO-efficient thanks to their performance, and being lightweight and easy to scan for Google robots. More on SEO below.

More leads and customers – as websites built on Jamstack architecture are faster and SEO-efficient, it results in getting more leads and customers from the website. To learn more, check out how important is the speed in business.

Security – businesses in the digital world are more and more aware of the importance of cybersecurity. However, it also becomes more and more difficult to make websites secure. Gatsby may be a solution as it is a static site generator, and static websites are more secure than dynamic websites.

Future-proof – because “every website is an app, and every app is a website”, using Gatsby means that the website or app will stand the test of time. Therefore, you won’t have to invest in another technology for at least a few years.

Low hosting costs – costs of hosting Gatsby websites start from $0 (Netlify Starter Package) as they are lightweight and don’t take much storage space.

Pros of Gatsby for marketers

When marketers find out about Gatsby, it’s love at first sight. Because, as a marketer, how can you not fall in love with SEO optimisation, fast page load speed, higher Google rankings, organic traffic growth and even a possibility to create landing pages without involving developers?

And that’s not all.

Below, you will find the most important pros for marketers using Gatsby.

Accessibility – everyone, especially those with temporary or permanent disabilities, should be able to access websites, tools and technologies, and that’s what web accessibility is all about. WebAIM (Web Accessibility in Mind), a non-profit organization, named Gatsby as the most accessible web framework out there.

Gatsby uses some practices to make its websites as accessible as possible:

Accessible routing – thanks to the accessible routing, it’s possible to use a keyboard to navigate through the website. However, Gatsby offers more than that – for example, you can set up custom page announcements on a page change.

Building HTML pages by default – Gatsby compiles pages using Node.js environment, so you don’t have to worry about progressive enhancement (which means loading core page content before anything else).

Linting using a plugin – Gatsby uses a special package (called eslint-plugin-jsx-a11y) that reduces the time needed to find accessibility errors. This plugin, among other things, also encourages you to add alternative text to all images.

Page metadata – if you want to have full control over the website’s content and structures, Gatsby gives you that. Having a possibility to add metadata like page titles, meta descriptions and alt texts helps a website rank higher in Google search results. It’s because all of these things help search engines to understand the content on your website and when to display your site in search results.

Use react-helmet components to set metadata for your website, and remember about adding a plugin called Gatsby React Helmet to support server-side rendering (SSR).

Performance and speed – websites built on Gatsby are like synonyms of speed and performance. Built-in features like static files rendering or progressive image loading are responsible for that. But why is it so crucial? Well, since Google’s update from 2018, site speed became the new ranking factor. In other words, the faster the website is, the higher it will rank in comparison to slower ones. It’s also important from the users’ perspective because they want websites to load fast.

Structured data – such data helps Google robots to understand the website’s content. Google needs this information to display the most relevant websites in search results. In other words, if you use structured data on your website, it may help you rank higher.

With Gatsby, it’s easy to add such data – you can use react-helmet, which is embedded in the page head or page body.

Greater user experience – all of the points mentioned above make Gatsby websites provide a greater user experience. And great UX is not just about performance or speed – it’s about creating made-to-measure experiences that are accessible to everyone, easy to navigate and visually attractive.

Organic traffic growth – as Gatsby sites are SEO efficient, it consequently leads to higher organic traffic that increases over time.

Possibility to create landing pages – with a bit of code knowledge, marketers can build landing pages without involving developers.

Pros of Gatsby for developers

Developers are always looking for new ways to improve their workflow and quality of their work. Demand for modern technologies that help with these two things is growing, and Gatsby is one of the best responses to this demand.

Reasons why developers choose Gatsby:

• Gatsby Cloud – it’s custom cloud infrastructure for building Gatsby sites that provides four useful things:
  • Incremental Builds – 1000x faster builds.
  • Real-time CMS previews – you can preview changes from your CMS in real-time. Therefore, you will make no mistake when publishing content updates.
  • Deploy Previews – developers can preview updates in the context of the entire website before merging the code.
  • Lighthouse Reports – you can check auto-generated reports on the site’s performance, the best practices, and the accessibility.
• Modern workflow – GatsbyJS follows the latest web standards and technologies including React, GraphQL and Webpack. Therefore, the best features of React and GraphQL are available for GatsbyJS developers.
• Out-of-the-box performance – websites and apps built on Gatsby are performant by default, so developers don’t have to install additional plugins or extensions.
• Easy to learn – especially for those with a good grasp of JavaScript.
• Great documentation – documentation is well structured and easy to use as you can see for yourself on Gatsby’s official website. It helps a lot with learning Gatsby and using its full potential.
• Active community – the popularity of Gatsby is growing, and so is its community. If you have some problem, there is a chance that someone already solved it or will help you with it.
• Access to the Gatsby ecosystem – plugins, starters, boilerplates and React packages boost the development.
• Great developer experience – Gatsby gives you an ultimate web building experience because of all things mentioned above.
• Multiple data sources – Gatsby makes it possible to use any number of different data files locally and pull data from remote sources such as WordPress, Medium, etc. In other words, from any source with available API.
• Very easy for CI/CD – you can have automatic deployment setup created in 60 seconds on Netlify.

Summary of Gatsby pros

Cons of Gatsby

Gatsby is still evolving, so it’s not surprising that it has some downsides. Therefore, there are some use cases in which Gatsby is not a good choice.

Don’t use Gatsby if:

• There will be a lot of content – for example, if it’s a large blog, generating a static website can take up to 15 minutes. However, for those using Gatsby Cloud, there is a solution called Incremental Builds which shortens build time up to 1000x, but it’s not free (cost starts from $19/month)
• You need to update content a lot – because those updates won’t be visible instantly as in, for example, WordPress
• It’s a corporate-size webshop – this point is similar to the first one because the more content you have, the longer the build time will be. Although the solution is Gatsby cloud, first of all, you have to pay for this, and second of all, any updates still won’t be visible right away

Alternatives: Gatsby vs Next.js

Gatsby has its competitor, which is called Next.js and is also based on React. They have a lot in common like speed and performance but also have their differences like best use cases.

You can read the comparison between them in one of our blog posts or watch our video below:

Further readings

You may still have many different questions regarding Gatsby, so feel free to read recommended articles or reach out to us directly.

• Why is Gatsby JS Good for Google Rankings?
• Pros and Cons of Using Gatsby in WordPress Projects
• When Not To Use GatsbyJS?
• What Are GatsbyJS Alternatives?
• What is Jamstack? A Guide For Business People