Frameworks /

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.
  • Image optimization. Astro’s <Image /> component, backed by Netlify Image CDN, automatically displays optimized versions of your images.
  • 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 (experimental). Server-side rendering (SSR) with Astro enables you to do things like track login states and render data without shipping client-side JavaScript. Astro’s SSR is currently experimental and is likely to change.

# 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

With its experimental SSR feature, Astro enables you to add useful functionality to your app like implementing login sessions and rendering data from an API called dynamically. It does this by automatically creating Netlify Functions to handle your project’s SSR code.

# 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 details in the astro/netlify documentation or this tutorial blog post.

# Edge Functions

For details on how to use Edge Functions with Astro, check out Astro‘s blog post.

Edge Functions connect the Netlify platform and workflow with an open runtime standard at the network edge. This enables you to build fast, personalized web experiences with an ecosystem of development tools.

You can browse a full library of reference examples for different ways to use Edge Functions. For more details, check out the Edge Functions documentation.

# More resources