Last Updated: November 21, 2025
Astro
Static site builder with islands architecture
Core Concepts
| Item | Description |
|---|---|
Component Islands
|
Interactive UI components |
Zero JS by Default
|
Ship no JavaScript |
Framework Agnostic
|
Use React, Vue, Svelte, etc. |
Content Collections
|
Type-safe markdown/MDX |
Server-First
|
Render on server |
SSR & SSG
|
Static and dynamic rendering |
Common Commands
npm create astro@latest
Create new Astro project
npm run dev
Start dev server
npm run build
Build static site
npm run preview
Preview production build
Component Example
---
// Component script (runs at build time)
const posts = await Astro.glob('../posts/*.md');
const title = "My Blog";
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
{posts.map((post) => (
<article>
<h2>{post.frontmatter.title}</h2>
<p>{post.frontmatter.description}</p>
</article>
))}
</body>
</html>Best Practices
- Use islands for interactive components only
- Keep most content static for performance
- Use content collections for type-safe content
- Leverage partial hydration
💡 Pro Tips
Quick Reference
Astro ships zero JavaScript by default for best performance