Intro to Astro

WordCount:

495

Reading Time:

3 min read

About Astro

Astro is a modern, lightweight framework for building fast, content‑focused websites. It lets you write components using your favorite UI libraries (React, Vue, Svelte, Solid, etc.) while delivering zero JavaScript to the browser by default. Astro focuses on performance, simplicity, and a great developer experience.

What Sets Astro Apart

Content-Focused: Excels at content-heavy sites (blogs, marketing pages) with built-in Markdown/MDX support and Git-based workflows.
Fast builds – Leveraging Vite under the hood for rapid development and production builds.
Zero‑JS by default – Pages render to static HTML unless you explicitly add interactivity.
Island Architecture – Only the interactive parts of a page (the “islands”) ship JavaScript, keeping the rest of the page static.
Partial hydration – Load only the JavaScript needed for each component.
Framework‑agnostic – Write components in React, Vue, Svelte, Solid, or plain HTML; mix and match as you like.
Server-Side Rendering: Supports SSR for dynamic content, using adapters (like Node, Vercel) to render pages on the server.

Use Cases

Blogs and personal sites
Marketing and landing pages
Documentation sites
E‑commerce product pages
Portfolio sites
Any content‑heavy site where performance matters

Getting Started

Prerequisites – Node.js (>= 18) and npm (or Yarn).
Create a new project
```
npm create astro@latest
```
Follow the prompts to get started. You can choose a starter template for things like a blog, a documentation website, or a minimal setup so you can take development wherever you’d like.
Install dependencies and start the dev server
```
cd my-astro-site
astro dev
```
Open http://localhost:4321 to see your site.
Add a page – Create a new .md or .astro file in src/pages/.
Add interactivity – Use the <Component client:load /> or client:idle directives to hydrate components only where needed.

Cheat Sheet

CLI Commands

Command	Description
`npm create astro@latest`	Scaffold a new Astro project
`astro dev`	Start the development server (hot‑reloading)
`astro build`	Build the site for production (`dist/` folder)
`astro preview`	Preview the production build locally
`astro add <integration>`	Add an integration (e.g., `react`, `mdx`, `node`)
`astro sync`	Sync project dependencies and update Astro to the latest version
`astro check`	Run type checking, linting, and validation on your project
`astro docs`	Open the Astro documentation in the browser

Client Directives

Client Directive	Description
`client:load`	Hydrate component on page load
`client:idle`	Hydrate when the browser is idle
`client:visible`	Hydrate when component scrolls into view
`client:media="(prefers-reduced-motion: no-preference)"`	Conditional hydration based on media query

Template Expressions

Common template expressions used in Astro.

Expression	Description
`---`	Frontmatter delimiter, used to store local variables
`{...}`	Used to pass local variables stored in the frontmatter to components and HTML elements
`<Component />`	Inline component usage

Best Practices

Keep most of your site static, only add JavaScript where interactivity is required.
create a src/components/ folder for reusable UI pieces.
Leverage Markdown for content‑heavy pages and import components directly into .md files.
Optimize images with the built‑in @astrojs/image integration.
Enable prefetch on links for faster navigation.
Use astro.config.mjs to configure build options, integrations, and site metadata.

Gotchas

Dynamic attributes: You cannot assign JavaScript functions or objects to event handlers like onClick in astro because HTML attributes will be converted to strings. Instead, use a client-side script to add the event handler, like you would in vanilla JavaScript.
kebab-case NOT camelCase: Use kebab-case for standard HTML attributes instead of JSX’s camelCase. Astro’s templating follows HTML conventions.
Client directives: Ensure directives like client:load are placed on the component tag, not inside the component’s props.

Enjoy building fast, modern sites with Astro! 🚀