TABLE OF CONTENTS

Gatsby JS FAQ: All You Need To Know To Start

Rafał Golubowicz
By Rafał Golubowicz
gatsbypicturepagepro

Introduction

People might be looking for FAQs for different reasons – to quickly get an overview of a particular tool or technology, to get their questions answered without jumping back and forth to Google, or to make sure they haven’t missed anything important. The reasons might be different but whatever it is, we are here to help.  This time we created Gatsby FAQ by gathering the most common questions about one of the hottest React frontend technology people use to build superfast and SEO friendly Jamstack websites.

Psst. we wrote a detailed article, just in case you want to learn more about what is Jamstack!

However, if you have any questions that we haven’t included in this FAQ, feel free to ask us directly or leave a comment.

Gatsby JS Frequently Asked Questions (FAQ)

1. How can Gatsby JS help your SEO?

Gatsby offers five different features that will affect your SEO positively. Let’s take a look at them:

  • Accessibility – it’s all about making the web accessible to everyone, especially for those with permanent or temporary disabilities. And as you already know, Gatsby has been named by WebAIM (Web Accessibility in Mind) as the most accessible web framework. It helps SEO because Google favours websites with great user experience.
  • Page metadata – thanks to metadata, Google robots have an easier job while scanning the website. Consequently, they better understand the website’s content and when to display a particular website in search results.
  • Performance and speed – page load speed is one of the most important ranking factors, and as of May 2021, it will be even more important (read our blog post about Core Web Vitals). Therefore, fast websites will rank higher than slow websites.
  • Structured data – it’s the second thing (next to metadata) that helps Google understand the website’s content. Consequently, search results can be more relevant to the user’s search intent. If this intent matches the content of the website, such a website is displayed higher by Google.
  • User experience – all of the things mentioned above combined with a possibility to design a custom interface translates into a great user experience which will become an even more important ranking factor as of May 2021.

2. What is Gatsby JS?

Gatsby is a React-based free and open-source framework to build blazingly fast websites and apps. Developers love this static site generator because it uses the latest tech stack and offers great documentation. Gatsby means not only many business advantages but also the developer experience that combines the best features of React and GraphQL.

3. What are the Pros of Gatsby JS?

Gatsby offers various benefits from different perspectives – it’s not only loved by developers, but also by business owners and marketers.

Fast loading speed

Poor speed and page performance are common reasons that visitors abandon the website without making the desired action. As Gatsby websites are super-fast, you will stop losing clients because of these reasons.

SEO efficiency

Ranking higher than your competitors becomes much easier with Gatsby. It’s because Gatsby websites are static which means they are fast, light, and easy to scan. That’s what Google favours.

Great custom user experience

Differentiate your business from competitors by creating a custom user experience without affecting the website’s performance in a bad way.

Total security

As there is no direct connection between Gatsby website and database, dependencies, user data or other sensitive information, it ensures total security.

Scalability

Gatsby websites don’t require complex solutions or expensive hosting when the traffic increases. Costs depend on your usage so if the traffic drops, so do your costs.

Accessibility

WebAIM recognised Gatsby as the most accessible web framework because of its features like accessible routing or progressive page enhancement.

In the table below, you will find the summary of Gatsby JS pros.

For business ownersFor marketersFor developers
Fast page load speedAccessibilityGatsby Cloud
SEO efficiencyPage metadataModern workflow
More leads and customersPerformance and speedOut-of-the-box performance
SecurityStructured dataEasy to learn
Future-proofGreater user experienceGreat documentation
Low hosting costsOrganic traffic growthActive community
Possibility to create landing pagesAccess to Gatsby ecosystem
Great developer experience
Multiple data sources
Very easy for CI/CD

If you want to learn more, read our blog post about Gatsby pros and cons.

4. What can I build with Gatsby JS?

Gatsby is best for:

5. When to use Gatsby JS?

Firstly, think about your business goals. What do you want to achieve? Then, take a look at the list of goals you can achieve with Gatsby.

  • Increase in conversion and sales
  • Boost in marketing efficiency
  • Overtaking competition online
  • Better user experience
  • Lower maintenance costs
  • Easier business scalability

6. When not to use Gatsby JS?

Gatsby has some downsides because of which it’s not recommended to choose it for:

  • Websites with a lot of content
  • Websites with a lot of updates
  • Corporate-size webshops

7. Who is using Gatsby JS?

See a few examples of companies that built Gatsby websites below.

Digital Ocean

Gatsby FAQ: Digital Ocean as a website example

Figma

Gatsby FAQ: Figma as a website example

Bitcoin.com

Gatsby FAQ: Bitcoin.com n as a website example

Impossible Foods

Gatsby FAQ: Impossible Foods as a website example

Braun

Gatsby FAQ: Braun as a website example

Frontend Day conference created by Pagepro

Gatsby FAQ: Front-end Day as a website example

JS Minds created by Pagepro

Gatsby FAQ: JS Minds as a website example

8. How digital businesses benefit from using Gatsby JS?

Choosing Gatsby can translate into more organic traffic, more leads and more customers. Let me explain why.

Higher Google ranks = More organic traffic

Gatsby is perfect for bringing more traffic to your website as it’s loved by Google and visitors. Google rewards Gatsby’s speed, performance, lightweight and scannability with higher positions in search results. On the other hand, visitors love fast page load speed and custom user experience, designed to fit their needs and expectations.

More leads

As more traffic comes in (and assuming that the conversion rate doesn’t change), you will start getting more leads from your website, i.e. more newsletter subscribers. You should also remember that the conversion rate may go up as Gatsby websites mean custom user experience, adaptable to what users expect.

More customers

Not every lead becomes a paying customer, however, the bigger the number of leads (assuming once again that the conversion rate doesn’t change), the bigger the number of new customers. Also, Gatsby makes it possible to design a website (or webshop) the way you need to so this way you can, for example, fix the broken buying process.

Low hosting costs

Gatsby websites are static which means they are light and don’t take much storage space. Also, you will pay just for your usage, nothing less, nothing more.

Security

Websites built with Gatsby are secure by default as there is no direct connection to the database or other sensitive data. Also, using CDN (Content Delivery Network) eliminates the risk of DDOS attacks.

Future-readiness

Technology is always changing and evolving, trends are coming and going, but it seems that Gatsby is a future-proof technology. You can rest assured that your website will keep the highest web standards (and expectations) in the coming years.

9. What is the cost of building a website with Gatsby JS?

The cost of building a Gatsby website depends on its complexity. 

For example, if you need a simple static website, then the cost of development may be around 4k – 8k.

If you need UI/UX design, then be prepared to spend around 6k – 30k. The specific amount depends on how long it will take.

The development of a big and more complex website may cost around 20k – 80k.

10. How long does it take to build a website with Gatsby JS?

The development of simple websites takes from 1 month up to 3 months.

If the website is more complex, it could take from 6 months up to 18 months or more.

Also, an important factor to consider is if you work with freelance Gatsby developers or a specialised Gatsby agency.

11. To build a Gatsby JS website, should I hire an Agency or a Freelance Developer?

If you have some experience with leading similar projects, you can go with a freelance Gatsby developer to do the job.

If the project is more complex, it’s better to hire a specialised Gatsby agency.

In the latter case, we wrote a blog post about how to choose a Gatsby development agency?

12. What skills are needed for Gatsby JS developers?

As Gatsby is built on React, Gatsby developers need to know React JS library well. Also, they should also know how to use GraphQL.

13. What are Gatsby JS alternatives?

Next.jsJekyllHugoNuxt.js

One of the most popular alternatives for Gatsby.js is Next.js. If you want to see the difference and best use cases for both of them, we explain them in the section and the video below.

14. What is the difference between Gatsby JS and Next.js?

The main difference between these two frameworks is that Gatsby is static site generator (SSG) while Next supports server-side rendering but also static site generation (since version 9.3).

We recommend you to read our blog post titled Gatsby JS vs Next – Which One to Choose?

After reading this article, you will have a better understanding of the differences and similarities.

Or… you can watch our short video about differences between Gatsby and Next.js.

15. Which CMSes you recommend to use with Gatsby JS?

Contentful
Sanity
Strapi
WordPress

Still have some questions?

Leave a Reply