What is Gatsby JS? - Current state in 2024

What is Gatsby JS?

Gatsby JS is an open-source framework based on React that allows you to create static websites with dynamic content.

A static website consists of HTML, CSS, and JavaScript files generated at compile time and served from a server or content delivery network (CDN). In contrast, a dynamic website is generated at the time of the request and can change based on data or user interaction.

Gatsby JS transforms data and components into static files that load quickly in the browser, providing an excellent user and SEO experience.

How Does Gatsby JS Work?

Gatsby's architecture focuses on creating advanced static websites with superior performance and optimal user experience. Let's explore how this framework operates:

1. GraphQL Data Model:

Gatsby uses GraphQL to handle application data. Instead of fetching data at runtime, developers can define data models through GraphQL queries. This allows you to specify exactly what data you need for each page, and Gatsby retrieves it in advance during the build process.

2. Build Process:

The magic of Gatsby lies in its build process. When you initiate your site's development, Gatsby scans your files and uses the defined GraphQL queries to fetch necessary data. This data is used to generate static pages during the build process.

3. React and Reusable Components:

Gatsby relies on React for creating reusable components. You can use React to build pages and layouts in a modular way. Gatsby leverages these capabilities to create both static and dynamic pages as needed.

4. Automatic Routing:

Gatsby automatically generates routes for your pages based on the folder structure in your project or through the gatsby-node file settings. This simplifies creating sites with multiple pages and enhances code organization.

5. Image and Resource Optimization:

Gatsby includes automatic optimizations for images and other resources. Images are loaded lazily and compressed to ensure optimal site performance.

6. Simple Deployment:

As Gatsby generates static sites, it is easy to deploy on various hosting services like Netlify, Vercel, Cloudflare Pages, or even on static servers like GitHub Pages. This facilitates site deployment and distribution.

7. PWA Approach (Progressive Web App):

Gatsby encourages the development of progressive web apps by default. This means your site is fast, reliable, and can be enjoyed even in adverse network conditions.

Is Gatsby JS Better than React?

Gatsby JS is neither better nor worse than React; it is a framework based on React. Gatsby JS uses React as a library to create components for your site but adds other layers and functionalities to simplify development, optimization, and deployment.

So, it's not a choice between Gatsby JS and React but rather between Gatsby JS and other React frameworks, such as Next.js or Remix, depending on your needs and preferences.

What Advantages Does Gatsby JS Have Over Plain React?

Gatsby JS has several advantages over plain React that may lead you to choose it for your next project. Some of these advantages include:

1. Performance:

Gatsby JS offers exceptional performance by generating fast-loading static websites that score high on tools like Lighthouse or PageSpeed Insights. It employs techniques like code splitting, prefetching, inlining, caching, and more.

2. SEO:

Gatsby JS helps improve your site's SEO by generating pages with semantic HTML, meta tags, sitemaps, etc., facilitating indexing and crawling by search engines. A fast site enhances user experience, reduces bounce rate, positively influencing SEO. Additionally, Gatsby JS allows using plugins to add functionalities like AMP support, structured data markup, etc.

3. Development:

Gatsby JS provides a comfortable and productive development environment, allowing you to use React and GraphQL efficiently. With a large community, extensive documentation, plugins, and starters, Gatsby JS makes problem-solving and customization easy.

4. Integration:

Gatsby JS enables integration with various data sources and services through its GraphQL-based data layer. You can use plugins to connect your site to CMS like WordPress, Contentful, Strapi, APIs like Shopify, Stripe, Airtable, databases like MongoDB, Firebase, and services like Google Analytics, Disqus, Algolia, etc. This allows creating websites with dynamic content and advanced features without sacrificing the benefits of static sites.

How to Develop a Site with Gatsby JS in 2024?

If you want to create amazing websites with Gatsby JS in 2024, follow these steps:

1. Learn the Basics:

Before using Gatsby JS, it's advisable to have a basic understanding of React and GraphQL, as these are the technologies Gatsby uses to create components and fetch data for your site. You can learn React with our series of articles and GraphQL with our guide.

2. Install Gatsby JS:

To install Gatsby JS, you need to have Node.js and npm installed on your computer. Follow the steps in our article or the section of our article. Then, install Gatsby JS globally with the following command:

3. Create your project

To initiate your project with Gatsby JS, you can use the command gatsby new, followed by the name of your project and the URL of the template you want to use. For instance, to create a project named my-site with the default Gatsby JS template, you can use the following command:

This will create a project with a folder and file structure like the following

4. Develop Your Site:

To develop your site with Gatsby JS, you can use the gatsby develop command, which starts a local development server on port 8000, allowing you to see real-time changes to your code. You can access your site at http://localhost:8000 and GraphiQL at http://localhost:8000/___graphql.

To create components and pages for your site, you can use React and JSX. For data retrieval, you can use GraphQL and the necessary plugins. Refer to the Gatsby JS documentation for examples and explanations of each step.

5. Optimize and Deploy Your Site:

To optimize and deploy your site with Gatsby JS, use the gatsby build command, which generates static files for your site in the "public" folder. These files are optimized for optimal performance, incorporating features like code splitting, prefetching, inlining, caching, etc.

You can then deploy your site on any hosting service that supports static sites, such as Netlify, Vercel, GitHub Pages, etc.

Should I Use Gatsby JS in 2024?

The answer to this question depends on your goals, preferences, and knowledge. If you want to create static websites with dynamic content that are fast, modern, SEO-optimized, and can integrate with different data sources and services, then Gatsby JS is a good choice for you.

Moreover, if you enjoy using React and GraphQL and find comfort in the development environment and documentation of Gatsby JS, then working with this framework will likely be easy and enjoyable for you.

However, if you need to create websites with a more complex backend or server-side rendering, or if you prefer using other technologies or frameworks, then Gatsby JS may not be the best fit for you. In any case, it is recommended to try Gatsby JS and explore what it can offer for yourself.

Is Gatsby JS Better than Next.js for SEO?

Gatsby JS and Next.js are two React frameworks that offer good SEO optimization, but they have some differences that make them more or less suitable for certain scenarios. Gatsby JS generates fast-loading static websites that score high on tools like Lighthouse or PageSpeed Insights.

Furthermore, Gatsby JS generates pages with semantic HTML, meta tags, sitemaps, etc., facilitating indexing and crawling by search engines. On the other hand, Next.js generates websites with server-side rendering, static, or incremental, depending on your needs.

This allows you to create pages with content that changes frequently or depends on sensitive data or user sessions, potentially improving your site's SEO.

Additionally, Next.js also generates pages with semantic HTML, meta tags, sitemaps, etc., facilitating indexing and crawling by search engines.

Therefore, the answer to this question depends on your particular case. If you want to create fast, modern, and SEO-optimized websites that do not require a more complex backend or server-side rendering, then Gatsby JS might be a better option for you.

If you want to create websites that require a more complex backend or server-side rendering or have content that changes frequently or depends on sensitive data or user sessions, then Next.js might be a better option for you.

Is It Worth Learning Gatsby JS in 2024?

Before answering this question, I must tell you that I am a big fan of Gatsby from its early days. I remember using it to create blogs since version 2, and I have seen how it improved step by step, adding new features and integrations.

However, around the beginning of 2023, its popularity has dramatically decreased, favoring options with a better development experience like Next.js or Astro.

When Next.js was the default React framework for creating SEO-optimized applications, Gatsby emerged as an option that significantly improved performance by proposing a static approach reminiscent of the early days of the web. Being one of the main precursors of the JAMSTACK movement to build a web as static as possible to avoid excessive server usage.

Despite being a tool that I love, I must say that nowadays, it doesn't make much sense to learn Gatsby as its usage is decreasing, it receives practically no updates, and there are other alternatives that seem more adapted to current market demands.

I hope this article has helped you understand what Gatsby JS is. If you enjoyed it, feel free to share it with your friends and contacts.

You can also reach out to me if you need a freelance gatsby.js developer to migrate or create a website with Gatsby JS. I'll be delighted to assist you.