“GatsbyJS is intended to be very flexible. So people use it in remarkably different ways. Still, I guess some constants are React and GraphQL, and the source plugins, the connection to anything with an API, created something like 350 different source plugins. Any sort of data you can imagine you can pull into a Gatsby.”
Would you agree with this statement? According to Kyle Mathews, the co-founder of Gatsby, this is one of the main reasons Gatsby is so popular nowadays. Gatsby, alongside Next.js, is becoming a universal React solution for new tech challenges. Developers are constantly looking for new ways to magnify their tech stack and be even more practical and powerful. So, if you are reading this text, you are probably eager to find out more about Gatsby or even ready to use it. That inspired me to make a list of “influencers” on social media that can help you stay up to date, but before that, let me introduce you to the basics of Gatsby.
What is GatsbyJS?
It’s another static site generator. Gatsby enables developers to build blazing fast, secure, and powerful websites using a React-based framework and innovative data layer that makes integrating different content, APIs, and services into one web experience effortless.
What makes GatsbyJS so unique?
As a React framework, GatsbyJS is full of excellent features that comprehend it from other static site generators.
Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when a user requests it, it pre-builds pages and lifts them into a global CDN — ready to be delivered instantly to your users wherever they are.
Gatsby’s data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system, directly into your pages using GraphQL or a simple REST API.
Gatsby also provides a wealth of APIs that make the development of static websites much more straightforward .
Gatsby sites are SEO friendly, which leads to higher organic traffic that increases over time. This results in your website being ranked higher on search engines.
When to use GatsbyJS?
The two most important things you should have in your mind before using Gatsby are knowing what you want to build and your goal.
When it comes to building your website, you can use Gatsby for whatever you want. From Progressive Web Apps (PWA), landing pages, eCommerce platforms, etc. Gatsby should be your choice when you need a static site because it’s optimized for generating static websites. Gatsby is a potent tool for building and creating PWA static websites, hybrid eCommerce platforms, and many more. Regarding goals, it can be helpful for those aspects which are narrowly tied to its rapid speed nature and, therefore, can contribute to better conversion rates and sales, overtaking competition online, more effortless business scalability, and better user experience. As a content writer, I aim to have SEO-friendly, high-quality content. Strictly, for this reason, I found GatsbyJS suitable for getting noticed by our users and by Google itself. The even better thing is the integration of Gatsby with BCMS headless CMS, which leads to a more accessible editing experience.
When to avoid GatsbyJS?
Even though Gatsby is the popular framework suitable for various use cases, you need to know that it is not the ultimate solution for everything that bothers you.
More content - slower builds
Slower content development is a general problem for static generating websites, so Gatsby needed to improve that part to stay competitive. Before adding Incremental builds functionality, Gatsby struggled to build a large amount of content. Before Incremental building functionality, Gatsby had to build all pages, regardless of whether they were changed or not. So, when I forgot to type a dot at the end of a sentence on a blog, all 1000+ pages had to be re-built. After Gatsby came out with Incremental builds functionality, this is has been solved, and now only the pages that contain some content changes are being re-built. That led to amazingly 1000x faster builds! Yes, one-zero-zero-zero times faster!! Still, you need to keep in mind that Gatsby can get quite chaotic if you edit website content directly inside code. The best way to avoid chaotically editing is to integrate Gatsby with headless CMS. By doing that, you are neglecting editing directly from the code, which is way more straightforward, efficient, and faster.
The dynamic environment makes GatsbyJS look like an underdog
If you have a fully dynamic website, you should consider frameworks like Next.js (React) or Nuxt.js (Vue). Gatsby is suitable for static, pre-generated websites. For example, if you build a company website, Gatsby is a perfect choice. Still, suppose you need an e-commerce website with a paginated product listing page or many pages with dynamic content (content that changes every few minutes). In that case, you should consider server-side-rendering frameworks instead.
If you are not a fan of ReactJS, you are not of GatsbyJS either
This blog was first published back in 2021. Over time we update the information related to Gatsby or our influencers on the list. Considering that web development is constantly developing and changing, Gatsby is no exception. If Gatsby changes, so must this blog post. So let's see what's new:
Server-side rendering (SSR)
SSR capabilities were added to Gatsby to expand its capabilities beyond static site generation. Consequently, Gatsby sites can benefit from static and dynamic generation, improving their interactivity.
Gatsby offers a vast ecosystem of plugins that extend the framework's functionality and allow developers to add various features and integrations to their Gatsby projects. Here are some popular Gatsby plugin categories:
Source plugins: Source plugins enable Gatsby to pull data from various sources and generate pages. These plugins allow you to source data from CMSs, headless CMSs, APIs, databases, Markdown files, JSON, and more.
Transformer plugins: Transformer plugins process and transform Gatsby data. They can convert data formats like Markdown, YAML, or CSV into Gatsby formats. They can also manipulate images, optimize them, or extract metadata.
SEO plugins: SEO plugins help optimize Gatsby's websites for search engines. They provide features like automatic SEO-friendly metadata generation, XML sitemaps, canonical URLs, Open Graph tags, and Twitter card integration.
Image processing plugins: Image processing plugins enhance Gatsby's website performance and visual experience by optimizing images. They can automatically resize, compress, and apply responsive image techniques like lazy loading, blur-up, and placeholder generation.
UI Component plugins: UI component plugins provide pre-built, customizable UI components that can be easily incorporated into Gatsby projects. These plugins offer design systems, UI kits, and reusable components that help developers streamline UI development.
Gatsby Cloud is a cloud-based platform that provides optimized build and deployment services for Gatsby sites. It offers incremental builds, preview environments, and intelligent caching to enhance developer productivity and streamline deployment.
Gatsby introduced the concept of themes, which are pre-configured sets of functionality, styles, and components. Themes allow developers to reuse and share project starters, accelerating development and promoting best practices.
Gatsby focused on improving the developer experience
Gatsby focuses on enhancing the developer experience by providing intuitive APIs, extensive documentation, and an active community. Tooling improvements, such as a fast development server and hot module replacement, contribute to a smoother development workflow.
With all those changes and upgrades, Gatsby evolved as a react-based framework that adapted to developers' needs but also reduced the once huge differences between Gatsby and Next.js.
Gatsby and Next.js
Convergence of static site generation and server-side rendering
Server-side rendering (SSR) and static site generation (SSG) are the two most common ways to create websites with modern front-ends, but they differ in several ways as well. With all the updates and additions of new features, frameworks like Gatsby and Next.js have brought SSG and SSR closer together.
Gatsby is a static site generator, focusing on pre-rendering content at build time. However, Gatsby has also introduced server-side rendering capabilities, allowing developers to combine server-side generation with server-side rendering for more dynamic content.
Similarly, Next.js, which initially gained popularity as a server-side rendering framework, has also embraced static site generation. This convergence allows both frameworks to offer hybrid solutions that cater to various use cases.
Optimized to be blazing fast
Both Gatsby and Next.js emphasize performance and optimizing website loading times. They provide features like code splitting, automatic image optimization, and built-in caching to deliver fast and optimized user experiences.
Rich plugin ecosystems
Gatsby and Next.js have robust plugin ecosystems that extend their functionality and enable developers to add additional features or integrations. These ecosystems contribute to both frameworks' flexibility and extensibility.
Gatsby VS Next.js: When to use
With all the changes mentioned above in both frameworks, the question cannot be avoided: which one to use for what?
Use Gatsby for:
Use Next.js for:
Large, multi-user websites
We asked influencers from our list what their take on the matter was and got some interesting answers:
GatsbyJS “influencers” list
Now that I have covered all the basic stuff about Gatsby, it’s time to introduce you to the people who contribute to Gatsby, who use it daily and know how to answer any questions or doubts you may have
Let this list be your "who to follow" inspiration when getting started with the Gatsby framework.
First, there are founders and employees at Gatsby. They are active on their social media accounts, and some of them are creating various content that’ll help you stay up to date with the latest Gatsby news.
Speaking of founders, Sam is the other one brain, thanks to whom Gatsby was born in May 2015 as a simple way to build a website with React. Sam is the co-founder & Chief Strategy Officer at Gatsby. Sam is the author of Journey to the Content Mesh - an approach to moving away from monolithic structures and adopting best-of-breed microservices to build resilient projects.
Co-founder & Chief Strategy Officer at Gatsby.
The biggest reason people use Gatsby is they have complex structured content and want its data layer, which makes things simple. Gatsby sites also have faster runtime performance: Comparing website performance: Gatsby vs. Next vs Nuxt
Paul started as a designer, then built React Component Libraries and developed Design Systems. Even though Paul is one of the ex-Gatsby employees, he likes to share info and experiences about everything he does, or in this case, what he did.
Ex-Gatsby employee. Now working as a Senior Developer Evidence Engineer @CockroachDB.
I probably can't give an opinion on this. Gatsby and Next.js have evolved in different ways. Both are suited to different things. The only real opinion I have is a lot of people are easily influenced.
Another front-end Gatsby developer who used to work on Theme UI, Styled System, Rebass, and MDX Deck. Besides open-source projects, Brent is dedicated to User interface (UI) and its design and maintenance. That means that his work is focused on creating interfaces that users find easy to use and pleasurable. You can find Brent on Twitter, LinkedIn, GitHub, Blog.
Lennart is a Senior Software Engineer working on open source projects and building communities around them, often sharing educational content and videos on his Twitter and blog. Lennart is creating high-quality and customizable Gatsby themes for one-pages, portfolios, and photography websites. You can find Lennart on Twitter, Blog.
Here I want to present to you one person from the marketing department. J.D. is the chief marketing officer (CMO) at Gatsby. He is a brand new member of the Gatsby family, but J.D. had several leadership positions in high-growth companies before. You can find J.D. Peterson on Twitter, Linkedin
A Canadian web developer and teacher who has been making websites for more than twenty years. Wes is constantly changing focus and tools for creating sites; the good thing is that Wes is trying to document every step on a blog and via podcast, full of tutorials and explanations. You can find great info about Gatsby and React, Node, Express, Lambda, and Next.js on a blog. You can find Wes on Twitter, LinkedIn, Blog, Podcast.
Jason is a software architect who got principal developer experience as an engineer at Netlify. Jason is also the host of Learn with Jason, a live-streamed video show where he pairs with people in the community to learn something new in 90 minutes. In those 90 minutes sessions, you are learning along with Jason about innovations in programming. Guests at this show are developers from different niches eager to share their knowledge and experiences with the web community. You can find Jason on Twitter, LinkedIn, Blog, Streaming show, YouTube.
A Norwegian web developer who likes to work in Gatsby. Benedicte started using Gatsby in 2018. She created a gatsby-remark-embed, one of the most popular and essential open-source Gatsby plugins. Benedicte also records webinars where she talks a lot about Gatsby, JAMstack, and serverless. You can find Benedicte on Twitter, LinkedIn, GitHub, YouTube, Web Page.
Jesus Manuel Olivas
Creator of Drupal Console & co-founder of Octahedroid
We still use Gatsby for some CMS customers. For more dynamic data projects, we suggest Remix instead of Gatsby.
Educators and Youtoubers are excellent sources of information. They share amazing content that helps you keep up with innovations about Gatsby and other popular frameworks.
Mohammed Zakari (Zak)
Front-end Software Engineer who is designing and crafting cutting-edge user experiences for software applications. Zak has experience mainly in the startup space, collaborating with designers and other engineers to build scalable software solutions. Zak is also an instructor making online courses wanting to break down complex ideas into more straightforward ways that a variety of audiences can easily understand. Besides the lessons, Zak has an online video Gatsby tutorial on a youtube channel that can help you learn Gatsby from scratch.
Front-end Software Engineer & educator
I think right now, both Next.js and Gatsby are a lot closer than they used to be, and this makes them harder to choose between them. So, in the end, it comes down to your project needs and personal preference.
Here are some things I consider:
when I need to template a site quickly, I use Gatsby because of its huge plugin ecosystem.
when I prefer stability and consistency of my data and don’t care too much about having the latest data in my app or control of the code that manipulates my data, I use Gatsby.
A Senior Staff Instructor at LinkedIn on web standards, interaction design, and WordPress. Morten has a passion for clean design, standards-based code, and open-source software. He also has a course on using WordPress as a Headless CMS with Gatsby. It’s worth checking! You can find Morten on Twitter, LinkedIn, GitHub, Youtube, Blog.
A software engineer is also a successful author of books: “React + D3v4 - 2017”, “Data Visualization with d3.js - 2013, “ and the latest “Serverless Handbook.” Swizec is also an educator who teaches about serverless React and other popular frameworks. His Youtube channel is full of videos where you can find great advice on combining different frameworks to have a better developer experience. You can find Swizec on Twitter, LinkedIn, GitHub, YouTube, Blog.
One of the reasons why Gatsby is so popular is its limitless plugin library that makes it almost as easy as copy-paste to add new functionality to your app. By using a source of plugins, Gatsby has support for dozens of headless CMS options, such as live reloading of content as it gets saved, drop-in SEO, and integration with Gatsby's GraphQL API.
CEO x Co-Founder @ BCMS
For me, the choice between Next.js and Gatsby is less about technology and ease of development and more about whether the project calls for server-side rendering or server-side generation. I prefer using Gatsby for static websites, and overall, I favor static websites.
By following BCMS on social media and blogs, you will be able to find examples of Gatsby’s integration with headless CMS and how that can make developing more straightforward and rapid. You can find The BCMS on Twitter, LinkedIn, YouTube, Blog.
Is Gatsby the same as React?
React is a library designed to provide developers with a specific set of core functionality. It is meant to be lightweight and widely applicable. Gatsby, on the other hand, is a static progressive web app (PWA) generator with built-in code and data splitting.
Who is using Gatsby JS?
A lot of world-leading companies and brands are building Gatsby websites. The most famous examples you can find here:
What can I build with Gatsby JS?
Gatsby is most suitable for:
Extremely rapid websites
Static and headless eCommerce
What are Gatsby JS alternatives?
The most popular alternatives and competitors to Gatsby are:
Create React App
Which CMSes do you recommend using with Gatsby JS?
You will not make a mistake.
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 site, the development cost may be around 4k – 8k. If you need UI/UX work, be prepared to spend about 6k – 30k. Developing a big, complex website may cost around 20k – 80k.