ModernBlog

Getting Started with AstroJS

By Alex Developer • • 5 min read
astro javascript web development

Getting Started with AstroJS

AstroJS is a modern web framework that’s designed to build fast, content-focused websites. What makes Astro unique is its island architecture and partial hydration approach, which delivers better performance by shipping less JavaScript to the browser.

What Makes Astro Special?

1. Islands Architecture

Astro pioneered the concept of “islands” - interactive components that are hydrated independently on the client side. This means:

  • Most of your site is static HTML and CSS
  • Only interactive components load JavaScript
  • Each component can use different frameworks (React, Vue, Svelte, etc.)
  • Better performance and faster loading times

2. Zero JavaScript by Default

Unlike traditional frameworks, Astro generates static HTML by default. JavaScript is only added when you explicitly need interactivity.

// Component only loads JS when needed
import Counter from './Counter.jsx';

// Different hydration strategies
<Counter client:load />      // Hydrate immediately
<Counter client:visible />   // Hydrate when visible
<Counter client:idle />      // Hydrate when browser is idle

3. Bring Your Own Framework

Astro supports multiple UI frameworks simultaneously. You can use React, Vue, Svelte, and other frameworks in the same project.

// Mix and match frameworks
import ReactComponent from './ReactComponent.jsx';
import VueComponent from './VueComponent.vue';
import SvelteComponent from './SvelteComponent.svelte';

<ReactComponent client:load />
<VueComponent client:visible />
<SvelteComponent client:idle />

Getting Started

Installation

Create a new Astro project:

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

Project Structure

src/
├── components/    # Reusable components
├── layouts/      # Page layouts
├── pages/        # File-based routing
├── content/      # Content collections (blogs, docs)
└── styles/       # CSS files

public/           # Static assets
astro.config.mjs  # Astro configuration

Creating Your First Page

Pages in Astro are created in the src/pages/ directory. Each .astro file becomes a route in your application.

<!-- src/pages/about.astro -->
---
const title = "About Us";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>Welcome to our amazing website built with Astro!</p>
  </body>
</html>

Client-Side Interactivity

When you need JavaScript on the client, use component directives:

  • client:load - Hydrate immediately
  • client:idle - Hydrate when main thread is free
  • client:visible - Hydrate when component enters viewport
  • client:media - Hydrate when media query matches
---
import Counter from '../components/Counter.jsx';
---

<!-- Component will only load JavaScript when visible -->
<Counter client:visible />

Performance Benefits

Astro’s approach leads to significant performance improvements:

  1. Faster loading - Less JavaScript means faster page loads
  2. Better SEO - Server-rendered HTML is easily crawlable
  3. Improved Core Web Vitals - Smaller bundle sizes improve metrics
  4. Progressive enhancement - Works without JavaScript, enhanced with it

Key Features

  • Zero JavaScript by default - Only ship JS when needed
  • Island architecture - Partial hydration for better performance
  • Framework agnostic - Use React, Vue, Svelte, or vanilla JS
  • Built-in optimizations - Image optimization, CSS bundling, etc.
  • Content Collections - Type-safe content management
  • Developer experience - Hot reloading, TypeScript support, etc.

Content Collections

Astro’s Content Collections provide a powerful way to manage your content:

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = {
  blog: blogCollection,
};

Conclusion

AstroJS offers a fresh approach to web development that prioritizes performance without sacrificing developer experience. By shipping less JavaScript and embracing static generation, Astro enables you to build fast, modern websites that provide excellent user experiences.

Key takeaways:

  • Performance first - Only ship JavaScript when needed
  • Developer friendly - Great DX with familiar concepts
  • Framework flexible - Use any UI framework you prefer
  • Content focused - Perfect for blogs, docs, and marketing sites

Ready to try Astro? Start with the official tutorial and experience the difference for yourself!

Alex Developer

Content Creator