Feature comparison: Astro.js vs. Gatsby

Published: February 26, 2023

This is a feature comparison of Astro.js and Gatsby. The purpose of this comparison is to give you an idea of the differences between the two, along with their similarities.

Feature comparison in table form

Astro.js vs. Gatsby feature comparison more in-depth

Static site generation (SSG)

Both Astro.js and Gatsby were originally purely SSG tools when they got launched. They both do SSG really well, the static HTML files can contain all the page contents when the developer uses the framework correctly.

SSG means that the website files are served as static HTML, CSS, and JS files, there is no backend server rendering pages for the users. The pages are built on the site's build-time and do not change until a new build is done.

Server-side rendering (SSR)

Both Astro.js and Gatsby now have SSR support. With that enabled, the pages are rendered via Node.js on the server and served to the users who visit the site. This enables the pages to be user-specific, real-time, and potentially behind a user login. You can read more about Gatsby's SSR on Gatsby Server Rendering APIs documentation, and Astro's SSR on Astro Server-side Rendering documentation.

Uses React

By default, Gatsby uses React, Astro does not. However, you can add React to Astro very easily.

As Gatsby comes with React out of the box and Astro doesn't, if you plan on having a lot of interactivity on your site and plan on using React for that, choosing Gatsby does make sense as Gatsby's whole ecosystem has been built around React. Only 25.8% of Astro users use React with Astro, which means that its ecosystem is not as directly tied to React. (Source: Vaihe's Astro statistics)

Can use other frameworks than React

Gatsby sites are locked to using only React, as React is the technology that powers Gatsby. Astro sites on the other hand can use a variety of different frameworks, including React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit.

Has source plugins for CMSs

Gatsby has plenty of source plugins for CMSs, Astro only has one source plugin, and that is for Storyblok, one of their partners. Source plugins are used to get data from headless CMS services to be rendered inside the site.

Gatsby sites tend to use source plugins to get CMS data, Astro.js sites tend to use the native APIs of the CMS services. The difference between the two is that Gatsby source plugins use GraphQL, and Astro uses native CMS APIs, which often are in JSON format.

Can fetch data from an API during build time

Both of the frameworks can fetch data from external APIs during build time using Node.js. Even though Gatsby usually does this via source plugins, it can do it the same way as Astro by using fetch API instead of a source plugin.

Node.js can be utilized during build time

Both Astro.js and Gatsby can utilize node.js during build time in the same way. Technically anything that's possible with Node.js is also possible during the quick build time within Gatsby and Astro.js. This includes Node.js streams, making it possible to create and modify files during build times.

For us, the best Node.js build time generations within Gatsby and Astro have been custom sitemap generations, JSON file generations, and custom headless CMS-based redirect files within Netlify and Vercel.

Image optimization

Astro.js has @astrojs/image package for image optimization, and Gatsby has Gatsby Plugin Image. Both of them provide automatic image breakpoint sizes and AVIF/WebP formats.

Out of the two, Gatsby does it a lot better. Astro's image optimization is still quite a work in progress, for example, it does not add the height and width attributes to the image at all. Also, Gatsby has custom loading styles, for example images fading from zero opacity to full opacity upon loading, Astro doesn't have any. Gatsby also makes it way easier to optimize images from headless CMS services such as Contentful, Strapi, and Directus.

Plugin ecosystem

Both have a plugin ecosystem, but due to the young nature of Astro.js, Gatsby's ecosystem is a lot more widespread. For example, both have plugins for adding MDX support to the site very quickly. Some of the plugins are developed by the official developers at Gatsby and Astro, and some are community-made.

Uses JSX

As Gatsby uses React, it also uses JSX. However, even though Astro does not use React out of the box, it does supports JSX-like syntax out of the box. As React is not being used, it is not really JSX, but it is extremely similar. For example, you can do conditional renders such as <p>{isNight ? 'Good night!' : 'Good morning!'}</p> within your page files and component files. One small difference is that with Astro you can add classes with regular class="example" attribute instead of React's camelCaseclassName="example".

Both support JSX components the same way, for example <Heading text="Hello world!" style="blue"/> within JSX.

Support for MDX

MDX allows developers to use variables, JSX expressions, and components within the Markdown content. Both frameworks have support for MDX via a plugin. For Gatsby users gatsby-plugin-mdx does the job, for Astro users @astrojs/mdx does it.

Has easy access to <head>

Both frameworks give you easy access to <head>. Gatsby does this via its Head API, and Astro does it by using layout files.

Gatsby's way of accessing it is probably more familiar to React developers, and Astro's way is more familiar to developers who use templating engines or templating languages.

Automatic sitemaps

Both Astro and Gatsby give you an easy way to automatically add a sitemap and keep it updated. Astro does this with @astrojs/sitemap and Gatsby does it with gatsby-plugin-sitemap.

Is great for SEO

Both frameworks are great for SEO, as they both generate static sites that are very quick to load and easy for crawlers to go through. To read more about Astro's SEO and Gatsby's SEO, we recommend to check our SEO comparison of Gatsby vs. Next.js vs. Astro.

Great hosting options

Both frameworks can be either self-hosted or hosted on a static site hosting service. The most popular static site hosting services are Netlify, Vercel, GitHub Pages, Cloudflare Pages, and Gatsby Cloud (for Gatsby).

Has support for TypeScript, Tailwind, SCSS, and CSS modules

These are some of the most popular technologies to go along with modern sites, so I decided to list them here. Both Astro and Gatsby give either out of the box support for these or give it via a plugin.

Fun fact: 45% of Astro sites use Tailwind.

Conclusion

Astro tends to have more developer freedom than Gatsby. That's thanks to Astro supporting a large variety of frameworks, while Gatsby requires its developers to use React. Astro also is often used to create sites that have zero JavaScript. Gatsby sites usually ship React to their client side, making Astro sites a lot more lightweight than Gatsby sites. Astro is a great framework for those that want to keep client side JavaScript at minimum, or want to use some other framework than React.

Gatsby is a great static site generator for sites that have heavy use of interactivity thanks to its own large ecosystem on top of React's massive ecosystem. For developers who already use React often, Gatsby can feel very familiar thanks to its similar structure.

Both Astro and Gatsby can create high-performing and SEO friendly sites. Search engine crawlers love static sites thanks to their speed and easy crawling, making them rank good. For a more in-depth SEO comparison of Astro and Gatsby, you should check our SEO comparison of Gatsby vs. Next.js vs. Astro.