Component Structure in Astro
From the Astro cheat sheet · Components & Syntax · verified Jul 2026
Component Structure
astro
---
// Component Script (server-side only)
import Header from './Header.astro';
const name = "World";
// Fetch data at build time
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---
<!-- Component Template -->
<Header />
<h1>Hello {name}!</h1>
<p>{data.message}</p>
<style>
h1 { color: blue; }
</style>✅ Components have two sections: script (---) and template (HTML)
💡 Script runs only on server at build time or on-demand
🔍 Use {expression} for JavaScript in template
⚡ Styles are scoped to component automatically
componentsyntaxstructure
Continue with Astro
Save the full cheat sheet or work through every related task.