Astro vs. X

We often get asked the question, “How does Astro compare to my favorite project, ____?” This guide was written to help answer that question for several popular site builders and Astro alternatives.

Interested in a more general overview of Astro’s benefits? Check out Why Astro?.

Two key features make Astro different from most alternatives:

• Partial hydration
• Use your favorite framework(s)

For more details, you can see our in-depth comparisons on this page.

If you don’t see your favorite site builder listed here, ask us in Discord.

Docusaurus is a popular documentation website builder. Docusaurus uses React to generate your website UI while Astro supports React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit and raw HTML templating.

Docusaurus was designed to build documentation websites and has some built-in, documentation-specific website features that Astro does not. Instead, Astro offers documentation-specific features through an official docs theme that you can use for your site. This website was built using that template!

In most cases, Astro websites will load significantly faster than Docusaurus websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration.

Docusaurus doesn’t support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. There is no way to disable this behavior in Docusaurus.

docusaurus.io/docs is the official Docusaurus documentation website, built with Docusaurus. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders.

• Docusaurus performance score: 53 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

Elder.js is an opinionated static site builder built for Svelte.

Elder.js uses Svelte to render your website. Astro is more flexible: you are free to build UI with any popular component library (React, Preact, Vue, Svelte, Solid and others) or Astro’s HTML-like component syntax which is similar to HTML + JSX.

Elder.js is unique on this list as the only other site builder to support partial hydration. Both Astro and Elder.js automatically strip unnecessary JavaScript from the page, hydrating only the individual components that need it. Elder’s API for partial hydration is a bit different and Astro supports a few features that Elder.js doesn’t (like client:media). However performance-wise, both projects will build very similar sites.

Elder.js uses a custom routing solution that may feel unfamiliar to new developers. Astro uses file-based routing which should feel familiar to anyone coming from Next.js, SvelteKit, and even other static site builders like Eleventy.

Elder.js was designed to run on large websites, and claims to build one website of ~20k pages in less than 10 minutes (on a modest VM). At the time of writing, Astro builds ~1k pages in 66 seconds but has not yet been tested on 20k+ page projects.

Elder.js supports both Static Site Generation (SSG) and Server-Side Rendering (SSR). Astro can build statically via SSG, or deploy to SSR environments via adapters: Deno, Vercel serverless, Netlify serverless and Node.js, with more to come.

Eleventy is a popular static site builder, powered by Node.js.

Eleventy uses several older HTML templating languages to render your website: Nunjucks, Liquid, Pug, EJS, and others. Astro lets you create pages using your favorite UI component libraries (React, Preact, Vue, Svelte, and others) or a built-in component syntax which is similar to HTML + JSX. Eleventy does not support using modern UI components for HTML templating.

Conceptually, Eleventy is aligned with Astro’s “minimal client-side JavaScript” approach to web development. Eleventy and Astro both offer similar, zero-JavaScript-by-default performance baselines.

Eleventy achieves this by pushing you to avoid JavaScript entirely. Eleventy sites are often written with little to no JavaScript at all. This becomes an issue when you do need client-side JavaScript. It is up to you to create your own asset build pipeline for Eleventy. This can be time consuming and forces you to set up bundling, minification, and other complex optimizations yourself.

By contrast, Astro automatically builds your client-side JavaScript & CSS for you. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration. While it is possible to achieve this yourself in Eleventy, Astro offers it built-in by default.

11ty.dev/docs is the official 11ty documentation website, built with 11ty. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders.

• 11ty performance score: 86 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

Gatsby is a popular website & application framework for React.

Gatsby uses React to render your website. Astro is more flexible: you are free to build UI with any popular component library (React, Preact, Vue, Svelte, Solid and others) or Astro’s HTML-like component syntax which is similar to HTML + JSX.

Gatsby v4 supports both Static Site Generation (SSG) with incremental rebuilds, Deferred Static Generation (DSG), and Server-Side Rendering (SSR). Astro can build statically via SSG, or deploy to SSR environments via adapters: Deno, Vercel serverless, Netlify serverless and Node.js, with more to come.

Gatsby requires a custom GraphQL API for working with all of your site content. While some developers enjoy this model, a common criticism of Gatsby is that this model becomes too complex and difficult to maintain over time, especially as sites grow. Astro has no GraphQL requirement, providing familiar APIs (like fetch() and top-level await) for data loading close to where the data is needed. However, you are free choose to use any server-side or client-side GraphQL libraries with Astro.

In most cases, Astro websites will load significantly faster than Gatsby websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration.

Gatsby doesn’t support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. Gatsby has a community plugin for removing all JavaScript from the page, but this would break many websites. This leaves you with an all-or-nothing decision for interactivity on each page.

Gatsby has a great plugin ecosystem, while Astro’s collections of integrations is smaller, but growing. Gatsby provides gatsby-plugin-image for advanced image optimizations. While Astro does not have a comparable first-party solution, astro-imagetools is a popular community integration for optimizing images, background images, and generating responsive images.

gatsbyjs.com/docs is the official Gatsby documentation website, built with Gatsby. The website offers a similar enough design and feature-set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders for this common use-case.

• Gatsby performance score: 46 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

Hugo is a popular static site generator, powered by Go.

Hugo uses a custom templating language to render your website. Astro lets you create pages using your favorite UI component libraries (React, Preact, Vue, Svelte, and others) or a built-in component syntax which is similar to HTML + JSX. Hugo does not support using modern UI components for HTML templating.

Conceptually, Hugo is aligned with Astro’s “minimal client-side JavaScript” approach to web development. Hugo and Astro both offer similar, zero-JavaScript-by-default performance baselines.

Both Hugo and Astro provide built-in support for building, bundling and minifying JavaScript. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration. While it is possible to achieve this yourself in Hugo, Astro offers it built-in by default.

gohugo.io/documentation/ is the official Hugo documentation website, built with Hugo. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders.

• Hugo performance score: 98 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

Jekyll is a popular static site generator, powered by Ruby.

Jekyll uses an older templating language to render your website called Liquid. Astro lets you create pages using your favorite UI component libraries (React, Preact, Vue, Svelte, and others) or a built-in component syntax which is similar to HTML + JSX. Jekyll does not support using modern UI components for HTML templating.

Conceptually, Jekyll is aligned with Astro’s “minimal client-side JavaScript” approach to web development. Jekyll and Astro both offer similar, zero-JavaScript-by-default performance baselines.

Jekyll achieves this by pushing you to avoid JavaScript entirely. Jekyll sites are often written with little to no JavaScript at all, and instead promote server-side HTML rendering. This becomes an issue when you do need client-side JavaScript. It is up to you to create your own build pipeline for Jekyll. This can be time-consuming and forces you to set up bundling, minification, and other optimizations yourself.

By contrast, Astro automatically builds your client-side JavaScript for you. Astro only sends the bare minimum amount of JavaScript to the browser, minified, bundled and optimized for production. While it is possible to achieve this yourself in Jekyll, with Astro this is built in by default.

jekyllrb.com/docs is the official Jekyll documentation website, built with Jekyll. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders.

• Jekyll performance score: 96 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

SvelteKit is a popular website & application framework for Svelte.

SvelteKit uses Svelte to render your website. Astro is more flexible: you are free to build UI with any popular component library (React, Preact, Vue, Svelte, Solid and others) or Astro’s HTML-like component syntax which is similar to HTML + JSX.

Both SvelteKit and Astro are frameworks for building websites. SvelteKit does best with highly dynamic websites (like dashboards and inboxes) while Astro does best with highly static websites (like content and eCommerce websites).

SvelteKit supports both Static Site Generation (SSG) and Server-Side Rendering (SSR). Astro can build statically via SSG, or deploy to SSR environments via adapters: Deno, Vercel serverless, Netlify serverless and Node.js, with more to come.

In most cases, Astro websites will load faster than SvelteKit websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration.

SvelteKit doesn’t support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. SvelteKit does offer support for page-level static, zero-JavaScript pages. However, there is no planned support for hydrating individual components on the page. This leaves you with an all-or-nothing decision for interactivity on each page.

kit.svelte.dev is the official SvelteKit documentation website, built with SvelteKit. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders for this common use case.

One notable difference between the two sites being tested: SvelteKit’s documentation is served as a single page while Astro’s is broken up into multiple pages. This larger content payload should have a slight negative impact on performance that is not related to the tool itself.

• SvelteKit performance score: 91 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

SvelteKit performed comparably to Astro in this test.

Next.js is a popular website & application framework for React.

Next.js uses React to render your website. Astro is more flexible: you are free to build UI with any popular component library (React, Preact, Vue, Svelte, Solid and others) or Astro’s HTML-like component syntax which is similar to HTML + JSX.

Both Next.js and Astro are frameworks for building websites. Next.js does best with highly dynamic websites (like dashboards and inboxes) while Astro does best with highly static websites (like content and eCommerce websites).

Next.js supports both Static Site Generation (SSG) and Server-Side Rendering (SSR). Astro can build statically via SSG, or deploy to SSR environments via adapters: Deno, Vercel serverless, Netlify serverless and Node.js, with more to come.

In most cases, Astro websites will load significantly faster than Next.js websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration.

Next.js doesn’t support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. Next.js has experimental support for fully-static, zero-JavaScript pages. However, there is no planned support for hydrating individual components on the page. This leaves you with an all-or-nothing decision for interactivity on each page.

Next.js has great built-in image optimizations. While Astro does not have a comparable first-party solution, astro-imagetools is a popular community integration for optimizing images, background images, and generating responsive images.

nextjs.org/docs is the official Next.js documentation website, built with Next.js. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders for this common use case.

• Next.js performance score: 71 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

Nuxt is a popular website & application framework for Vue. It is similar to Next.js.

Nuxt uses Vue to render your website. Astro is more flexible: you are free to build UI with any popular component library (React, Preact, Vue, Svelte, Solid and others) or Astro’s HTML-like component syntax which is similar to HTML + JSX.

Both Nuxt and Astro are frameworks for building websites. Nuxt does best with highly dynamic websites (like dashboards and inboxes) while Astro does best with highly static websites (like content and eCommerce websites).

Nuxt supports both Static Site Generation (SSG) and Server-Side Rendering (SSR). Astro can build statically via SSG, or deploy to SSR environments via adapters: Deno, Vercel serverless, Netlify serverless and Node.js, with more to come.

In most cases, Astro websites will load significantly faster than Nuxt websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration.

Nuxt doesn’t support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. There is no way to disable this behavior in Nuxt.

Nuxt has great built-in image optimizations. While Astro does not have a comparable first-party solution, astro-imagetools is a popular community integration for optimizing images, background images, and generating responsive images.

nuxtjs.org/docs is the official Nuxt documentation website, built with Nuxt. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders for this common use-case.

• Nuxt performance score: 50 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

Remix is a React framework based on React Router.

Remix uses React to render your website. Astro is more flexible: you are free to build UI with any popular component library (React, Preact, Vue, Svelte, Solid and others) or Astro’s HTML-like component syntax which is similar to HTML + JSX.

Remix supports only server-side rendering (SSR). Astro can build statically via SSG, or deploy to SSR environments via adapters: Deno, Vercel serverless, Netlify serverless and Node.js, with more to come.

remix.run/docs is the official Remix documentation website, built with Remix. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders for this common use case.

• Remix performance score: 89 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

VuePress is a popular documentation website builder from the creators of Vue.js. VuePress uses Vue.js to generate your website UI while Astro supports React, Vue.js, Svelte, and raw HTML templating.

VuePress was designed for documentation websites and has some built-in, documentation-specific website features that Astro does not support out of the box. Instead, Astro offers documentation-specific features through an official docs theme that you can use for your site. This website was built using that template!

Evan You (creator of Vue.js) is currently working on a new version of Vuepress called VitePress. If you want a modern alternative to VuePress, check out Evan’s post on why VitePress may be a better option.

In most cases, Astro websites will load significantly faster than VuePress websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration.

VuePress doesn’t support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. There is no way to disable this behavior in VuePress.

vuepress.vuejs.org is the official VuePress documentation website, built with VuePress. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders for this common use case.

• Vuepress performance score: 67 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

Zola is a popular and fast static site generator, powered by Rust.

Zola uses Tera to render your website. Astro lets you create pages using your favorite UI component libraries (React, Preact, Vue, Svelte, and others) or a built-in component syntax which is similar to HTML + JSX. Zola does not support using modern UI components for HTML templating.

Conceptually, Zola is aligned with Astro’s “minimal client-side JavaScript” approach to web development. Zola and Astro both offer similar, zero-JavaScript-by-default performance baselines.

Astro offers built-in support for building, bundling and minifying JavaScript. Zola requires using another build tool like Webpack to bundle and process JavaScript. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called partial hydration. While it is possible to achieve this yourself in Zola, Astro offers it built-in by default.

getzola.org/documentation is the official Zola documentation website, built with Zola. The website offers a similar enough design and feature set to compare against the official Astro documentation website. This gives us a rough, real-world comparison between the two site builders.

• Zola performance score: 91 out of 100 (full audit)
• Astro performance score: 92 out of 100 (full audit)

Astro component syntax is a superset of HTML. It was designed to feel familiar to anyone with HTML or JSX experience.

If you know HTML, you already know enough to write your first Astro component.