Why Tailwind Doesn't Suck
19 Nov 2024
“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.
Gatsby is used to building static websites following the JAMstack approach. JAMstack is a modern methodology for using JavaScript, APIs, and Markup to build websites. The main focus is on using these technologies to create websites that don't depend on managing servers but decouple the front-end and the backend, supported by the CDN (Content Delivery Network). I like to define Gatsby as the "second leg" of the JAMstack's world tour, which results in better performance, increased security, cheap and easy scaling, better developer experience.
As a React framework, GatsbyJS is full of excellent features that comprehend it from other static site generators.
Gatsby pairs well with platforms like Netlify and Vercel, and you can easily configure your site to build and deploy every time you push to GitHub.
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.
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.
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.
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.
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.
Since Gatsby is nothing but a React framework, you can use the existing techniques and components of React app there. This is a massive advantage because you will build in Gatsby with your prior knowledge from React. But, if you never worked with React or didn’t like it that much, then Gatsby is probably not for you. In that case, some other Javascript frameworks, such as Nuxt or Gridsome (Vue.js), will be more adequate for you. Or even Hugo (Go) or Jekyll (Ruby) if you are a fan of old school approach.
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:
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 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 are both popular frameworks in the JavaScript ecosystem. While they used to have significant differences, with constant evolution, frameworks often learn from each other and adopt similar features or concepts. This is based on industry trends and developer needs. Here are some reasons why Gatsby and Next.js may have similarities:
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.
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.
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.
With all the changes mentioned above in both frameworks, the question cannot be avoided: which one to use for what?
Static websites
Content-Driven Websites
GraphQL websites
Large, multi-user websites
Dynamic websites
Full-stack applications
We asked influencers from our list what their take on the matter was and got some interesting answers:
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.
Kyle is one of the co-founders and CEO of the Gatsby. First steps into programming Kyle made by working at Drupal, BackboneJS, and obviously at React. These experiences helped Kyle to have a new vision and create the new Javascript framework, a.k.a Gatsby. So if you want to keep up with all upcoming things and new features or versions of Gatsby, Kyle is a pretty adequate person to follow. Besides his social media accounts, I would suggest following his blog too. Sometimes he does live streaming Q&A on Gatbsy’s official Youtube channel to teach users about the Gatsby Roadmap, incremental builds, Gatsby Cloud, and more GatsbyJs themes. You can find Kyle on Twitter, LinkedIn, Blog.
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.
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
Co-founder & Chief Strategy Officer at Gatsby.
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.
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.
Ex-Gatsby employee. Now working as a Senior Developer Evidence Engineer @CockroachDB.
Dustin is a front-end developer specializing in JavaScript. Besides development, Dustin is using JavaScript to do design and to build tools. Also, Dustin is a remarkable speaker, talking about building digital tools, framework comparisons, Angular, React, etc. You can find Dustin on Twitter, LinkedIn, GitHub, Blog.
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
Another group of people worth following are developers who work with various Javascript frameworks. This can help you understand which framework works best for different challenges you can face on your projects.
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, Blog, Podcast.
Scott is Wes’s colleague, and they are both working on a podcast. Besides the podcast, Scott created Level Up Tutorials, a website full of premium video tutorials and explanations to help take your web development skills to the next level. Learn React, Svelte, Node, JavaScript, and more. You can find Scott on Twitter, LinkedIn, Web Page, YouTube.
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.
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, Web Page.
Creator of Drupal Console and developer skilled in Full Stack JavaScript, PHP, and DevOps. Jesus is a co-founder of Octahedroid, consulting agency specializing in modern front-end tools, cloud-native architectures, automation, and CMS integrations. Jesus is a very active Twitter member, and he likes to share his thoughts about JAMstack, GatsbyJS, NextJS, GraphQL, etc.
We still use Gatsby for some CMS customers. For more dynamic data projects, we suggest Remix instead of Gatsby.
Creator of Drupal Console & co-founder of Octahedroid
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.
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.
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.
Front-end Software Engineer & educator
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.
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.
CEO x Co-Founder @ BCMS
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, and Blog.
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.
A lot of world-leading companies and brands are building Gatsby websites. The most famous examples you can find here:
Snapchat.
Tinder.
Stack.
Figma.
Digital Ocean.
Braun.
Ahrefs.
Gatsby is most suitable for:
Extremely rapid websites
Static and headless eCommerce
Landing pages
JAMstack websites
PWA
The most popular alternatives and competitors to Gatsby are:
Hugo,
Next. js,
React,
Jekyll,
Create React App
With:
Contentful
BCMS
Sanity
Strapi
WordPress
You will not make a mistake.
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.
Get all the latest BCMS updates, news and events.
By submitting this form you consent to us emailing you occasionally about our products and services. You can unsubscribe from emails at any time, and we will never pass your email to third parties.
There are many actionable insights in this blog post. Learn more: