Gatsby

What is Gatsby?

Gatsby is an open-source framework built on React for building websites. It pulls content from files, a CMS or APIs into a GraphQL data layer, then renders pages to static HTML at build time and adds React on the client. Gatsby 5 is the current major version (5.16 at the time of writing), and Netlify, which acquired Gatsby in 2023, now runs the project.

How Gatsby works

1. Source: plugins read content from Markdown files, a headless CMS or an API and turn it into nodes in Gatsby's data layer.
2. Query: pages and components ask for exactly the data they need with GraphQL, using page queries or the useStaticQuery hook. Gatsby infers a schema from the data, and you can override it with schema customization.
3. Build: Gatsby renders every page to HTML and bundles the JavaScript, a form of static site generation.
4. Serve and hydrate: the HTML files go to a CDN or any static host, and in the browser React takes over the page through hydration, so it behaves like a normal React app.

Gatsby also supports server-side rendering, deferred static generation (DSG) and serverless functions for pages that cannot be fully built ahead of time, according to gatsbyjs.com.

Where Gatsby stands today

Be realistic when you choose it. Netlify acquired Gatsby in 2023 and ended Gatsby Cloud, the paid hosting product, moving customers to Netlify. Netlify stated that the open-source framework would keep being maintained. Releases continue, but at a slower pace than in Gatsby's early years, and the community has raised questions about the roadmap. For a new project, compare it with Next.js, Astro, Hugo or Eleventy, and for an existing Gatsby site check that your plugins still work before upgrading, especially from Gatsby 4 to 5.

Example

A documentation site stores guides as Markdown. A source plugin turns each file into a node, a page template queries the title and body with GraphQL, and at build time Gatsby writes one HTML file per guide. Visitors get ready-made HTML from a CDN, which keeps Largest Contentful Paint low when images and scripts are kept in check.

Common mistakes

• Slow builds ignored. Thousands of pages and heavy image processing can make builds long. Cache, limit what is rebuilt and watch build time.
• Too many plugins. Each plugin adds JavaScript, build time and upgrade risk. Keep only what you use.
• Large client bundles. Static HTML does not help if the JavaScript that hydrates it is heavy. Set a performance budget for bundle size.
• Assuming "static" means "no backend". Search, forms, logins and previews call APIs and functions, and these need their own capacity and testing.
• Not planning for the project's pace. Pin versions and keep a tested upgrade path.

How it relates to performance testing and monitoring

A static Gatsby site is cheap to serve, so most of the risk sits in the dynamic parts: APIs, serverless functions and third-party scripts. Use LoadFocus load testing on those endpoints, which runs from 25 cloud regions. Use the free Core Web Vitals checker to see how real Chrome users experience the site, and page speed monitoring to catch regressions after each deploy. For frontend fixes that apply to any framework, see the 10-step guide to improving website speed.

FAQ: Gatsby

Is Gatsby still maintained?

Yes, the open-source project still publishes releases, with Gatsby 5 as the current major version. Pace and roadmap are slower than before, so evaluate it against your long-term needs.

Does Gatsby need GraphQL?

Gatsby's data layer is GraphQL, and components usually query it at build time. You can also fetch data in the browser like any React app.

What happened to Gatsby Cloud?

Netlify ended Gatsby Cloud after acquiring Gatsby and offered customers migration paths to Netlify. The open-source framework is separate and still works on any host.

Is Gatsby good for SEO?

Pages are pre-rendered HTML, which search engines read easily. Rankings still depend on content, speed and structure, not on the framework alone.

Do I need to load test a Gatsby site?

Test the dynamic parts it depends on, such as APIs, functions and checkout. The static pages themselves are served by a CDN.