Netlify Docs
Ask Netlify

Contact

Frameworks /Framework support /

Astro on Netlify

Astro is a framework that focuses on performance — by default, it ships zero client-side JavaScript. When needed, Astro adds partial hydration to make use of the Islands Architecture. You can also use your favorite framework (like Vue, React, or Svelte) inside your Astro projects.

# Key features

These features provide important benefits for Astro projects, including those built by and deployed with Netlify.

  • Partial hydration. Astro is biased towards minimal JavaScript but occasionally projects need to include some interactive components too. With partial hydration, Astro enables you to use JavaScript just for those components and not entire pages.
  • Server islands (experimental). To balance performance and personalization, use a server island to add dynamic content to a page with static HTML components. Learn more about server islands in this working example, this Astro blog, or our developer guide.
  • Image optimization. Astro’s <Image /> component, backed by Netlify Image CDN, automatically displays optimized versions of your images.
  • Page-level custom headers. Astro gives developers full control of caching headers with Astro.response.headers, which allow developers to gain the benefits of Netlify’s durable cache and Incremental Static Regeneration (ISR). Learn more from examples in our Astro guide or from our framework-agnostic Advanced Caching guide.
  • Use one or more frameworks. When you use Astro, you can continue using your favorite frameworks. You can mix and match multiple framework components inside your Astro files — letting you choose what works best for your project.
  • Server-side rendering. Server-side rendering (SSR) with Astro enables you to do things like track login states and render data without shipping client-side JavaScript.

# Netlify integration

When you link a repository for a project, Netlify tries to detect the framework your site is using. If your site is built with Astro, Netlify provides a suggested build command and output directory: astro build and dist.

You can deploy an Astro project to Netlify in several ways: the Netlify UI, the Netlify CLI, or a netlify.toml file in your repo.

For manual configuration, check out the typical build settings for Astro.

# Netlify Image CDN

When deploying your Astro applications to Netlify, the Astro <Image /> component automatically uses Netlify Image CDN to transform images on demand without impacting build times. Netlify Image CDN also handles content negotiation to use the most efficient image format for the requesting client.

To transform a source image hosted on another domain, you must first configure allowed domains in your astro.config.mjs file. Visit the Astro docs to learn more.

# Astro server-side rendering

Astro SSR enables you to add useful functionality to your app like implementing login sessions and rendering data from an API called dynamically. SSR is powered by Netlify Functions.

# Deploy an Astro app with SSR on Netlify

To deploy an Astro app with SSR enabled on Netlify, you need to use the @astro/netlify adapter and make some changes in your Astro configuration file.

Check out the Astro guide for Netlify for step-by-step help on enabling SSR for your Astro app.

Learn more in the @astrojs/netlify adapter repository.

# Edge Functions examples

Use Edge Functions to build fast, personalized web experiences with an open runtime standard at the network edge.

Learn by example with these Edge Functions resources:

For more details on using Edge Functions, check out:

# More resources

←