Technical reference

Astro Cheatsheet

Content-focused web framework with server-first islands

Must Know

bash

Create a Project

npm create astro@latest
cd my-astro-site
npm run dev

html

Astro Component

The component script runs on the server; the template produces HTML.

---
const { title } = Astro.props;
---

<article>
  <h1>{title}</h1>
  <slot />
</article>

Routing & Content

File-Based Route

Files inside src/pages become routes.

src/pages/index.astro       -> /
src/pages/about.astro       -> /about
src/pages/posts/[slug].astro -> /posts/:slug

javascript

Dynamic Static Paths

---
export function getStaticPaths() {
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}
const { post } = Astro.props;
---

Islands & Rendering

html

Client Island

Hydrate only interactive components and choose when their JavaScript loads.

<Counter client:visible />
<Search client:idle />
<ThemeToggle client:load />

html

Server Island

Render personalized or dynamic content separately without delaying the main page.

<Avatar server:defer>
  <AvatarSkeleton slot="fallback" />
</Avatar>

Production Notes

javascript

Environment Variables

Only variables prefixed with PUBLIC_ are available to client code.

const publicValue = import.meta.env.PUBLIC_API_URL;
const secret = import.meta.env.API_SECRET;

Choose Rendering Intentionally

Do not hydrate a component just because it was written with a UI framework.

static output  -> content known at build time
server output  -> request-time rendering
client island  -> browser interactivity
server island  -> deferred personalization