---
title: "Build wicked fast sites with Astro: An Introduction"
description: "From the creators of Snowpack comes Astro: A framework for building faster websites with less client-side JavaScript. Learn how to use it and get started!"
source: "https://www.netlify.com/blog/2021/07/08/build-wicked-fast-sites-with-astro-an-introduction/"
last_updated: "2026-07-15T16:37:45.000Z"
---
One of the hot new frameworks on the scene is [Astro](https://astro.build/), and it’s all about shipping less client-side JavaScript. I decided to give in a whirl and was pretty pleased with being able to write React, and see the immediate performance benefits when loading scripts only when I _want_ to.
Astro is still early in its life (version 0.17.3 at the time of writing), but already has a great community going of folks playing with it. Let’s join them and try it out!
## What comes out of the box
Astro comes with quite a bit without you having to install anything!
### `.astro` files
`.astro` files are _mostly_ HTML, but with some extra JavaScript goodies. If you’re comfortable with HTML and JS, you’ll be comfy in `.astro`.
These `.astro` files borrow concepts from JSX and Frontmatter to make some pretty powerful templates. For example:
```
---
// Area A
import MyComponent from './MyComponent.astro'
let name = 'Cassidy'let food = ['apple', 'banana', 'cake']
---
Document
{name} was here {food.map((item) => ( - {item}
))}
```
“Area A” in the above code snippet is the “Frontmatter” script. It’s fully compatible with both JavaScript and TypeScript, and you can import other components, or write whatever scripts you’d like there. This will be run at page build time. This area is totally optional, as well, so you can remove it entirely if you don’t need it.
“Area B” is where Astro really shines, in my opinion. It’s just HTML… until it’s not. You can add in components that you import (in _any_ framework you choose, as in you could have React and Vue living _side by side_), render expressions, include fragments, use the native HTML ``, and a lot more.
These `.astro` files can also take in `props`, so you can use them as components within each other, and import given values in the Frontmatter!
There’s even more power to `.astro` components than I’ve mentioned here, [here’s the docs](https://docs.astro.build/core-concepts/astro-components) if you’d like to read more.
### Renderers for your favorite frameworks and libraries
Astro is automatically configured with renderers for React, Vue, Svelte, and Preact! You don’t actually need to install these frameworks for them to work. [You can override this](https://docs.astro.build/reference/renderer-reference), if you want to add or remove any renderers you’d like.
It also supports Markdown out of the box (so any `.md` files you might make), and you can use a `` component in your `.astro` files, too!
You might be wondering, “hey, I thought Astro doesn’t like client-side JavaScript?” You’re right. When you make a React/Vue/whatever component in Astro, it will render the HTML for that component by default, but _not_ the client-side interactions! If you’d like to use your components though, never fear, there’s some [built-in hydration](https://docs.astro.build/core-concepts/component-hydration) options for you:
- `` will render `MyComponent` on page load
- `` will render `MyComponent` as soon as the main thread is free
- `` will render `MyComponent` when the element enters the viewport (so when a user scrolls to it)
### Page-based routing
Just like many other frameworks these days, Astro has a `pages/` directory already built, and any `.astro` or `.md` files inside of it automatically become routes in your application.
This is fully configurable, as well, so if you want to point your routes at a different directory, you can!
You can also make what are called **Collections** to generate pages from data! So, for example, if you have a CMS of blog posts, you could pull in and generate routes and pages from that API. You can even group content, and pagination is built in, as well. The Collections API comes from an Astro prop, and [is documented here](https://docs.astro.build/core-concepts/collections).
### Styling and state management
Styling and state management are still in early implementation in Astro, but there’s quite a bit supported already.
Out of the box, global CSS is supported, and there are some limits around scoped CSS and CSS Modules. You can see the [styling quickstart](https://docs.astro.build/guides/styling) for more information, but chances are, your favorite way to style is possible.
In terms of state management, the support you want will depend on the framework/library you use. For React, the Context API, Recoil, and Jotai are currently fully supported, and Redux is partially supported. Vue has partial Vuex support, and Svelte has full Svelte Stores support. [Their team is open to PRs and issues](https://github.com/snowpackjs/astro/issues) if something you like is not built in.
### And mooooore
There’s even more in Astro that’s supported, including sitemaps and custom configurations. Check out their [docs](https://docs.astro.build/getting-started) if you’d like to read up on everything.
Until then though, let’s build!
## Getting started
First of all, you’re going to need Node.js on your machine, in particular a minimum version of 14.15.1. This is because it’s built with ES Modules (or ESM), so you can use `import` statements to your heart’s content. Adios, `require`!
Make a new directory, and then call:
```
npm init astro
```
This will pull up an app template selector, where you can choose from their starter kit and a few other options. I went with the starter kit, because I am snooty and like to build things my myself. Then you can go ahead and `npm install` and initialize your git repo if you’d like, and run it with `npm start`.
And with that, you’re off to the races! The default page that you’re given shows you the project structure, and you can stick with the defaults or configure them in `astro.config.js`.
## Help me!
Don’t worry my little developer lamb, I’ve got you.
[](https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/astro-netlify-starter)
If you click this button above, it’ll deploy [an Astro starter project](https://github.com/cassidoo/astro-netlify-starter) for you on Netlify, and clone it to your GitHub. It’ll include all of the Astro defaults you’ve learned about, plus a sample React component to get going!
Or, if you’d prefer to use the CLI, you can run:
```
npm init astro my-new-project --template cassidoo/astro-netlify-starter
```
Until next time!
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=Build wicked fast sites with Astro: An Introduction&url=https://www.netlify.com/blog/2021/07/08/build-wicked-fast-sites-with-astro-an-introduction//)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F07%2F08%2Fbuild-wicked-fast-sites-with-astro-an-introduction%2F%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/07/08/build-wicked-fast-sites-with-astro-an-introduction//)
- [Bluesky](https://bsky.app/intent/compose?text=Build wicked fast sites with Astro: An Introduction+https://www.netlify.com/blog/2021/07/08/build-wicked-fast-sites-with-astro-an-introduction//)
* * *
### Tags
- [astro](/blog/tags/astro/)
- [Javascript](/blog/tags/javascript/)
- [SSG](/blog/tags/ssg/)
## Keep reading
Guides & Tutorials June 2, 2021
[
### 10 static site generators to watch in 2021
](/blog/2021/06/02/10-static-site-generators-to-watch-in-2021)
- 
Phil Hawksworth
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
## Recent posts
News & Announcements July 14, 2026
[
### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers
](/blog/new-pro-plan-tiers)
- 
Gehrig Kunz
News & Announcements July 13, 2026
[
### Netlify inside of Claude Design
](/blog/netlify-inside-of-claude-design)
- 
Sean Roberts
News & Announcements June 25, 2026
[
### Netlify Functions, designed for Agent Experience
](/blog/netlify-functions-designed-for-agent-experience)
- 
Eduardo Bouças
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)