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.
- 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.
# 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
Did you find this doc useful?
Your feedback helps us improve our docs.