Advanced Code Examples

Island Architecture with React

Here’s how to create an interactive component that only loads JavaScript when needed:

---
// InteractiveCounter.astro
---

<div id="counter-container">
  <h3>Interactive Counter</h3>
  <Counter client:load />
</div>

<script>
  import Counter from './Counter.jsx';
</script>

Content Collections

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

const blogCollection = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
    featured: z.boolean().default(false),
  }),
});

export const collections = {
  blog: blogCollection,
};

API Routes

// src/pages/api/posts.json.ts
import type { APIRoute } from "astro";
import { getCollection } from "astro:content";

export const GET: APIRoute = async () => {
  const posts = await getCollection("blog");

  return new Response(
    JSON.stringify(
      posts.map((post) => ({
        slug: post.slug,
        title: post.data.title,
        description: post.data.description,
      }))
    ),
    {
      status: 200,
      headers: {
        "Content-Type": "application/json",
      },
    }
  );
};

Best Practices & Tips

Do’s

• Use client directives sparingly
• Leverage content collections for data
• Optimize images with Astro’s built-in tools
• Use TypeScript for better DX
• Take advantage of zero-JS by default

Don’ts

• Don’t add unnecessary interactivity
• Avoid large JavaScript bundles
• Don’t ignore SEO optimization
• Don’t skip performance testing
• Avoid complex state management

Pro Tip: Client Directives

Use client:load for immediately needed interactivity, client:idle for lower priority components, and client:visible for components below the fold.

Conclusion

Astro represents a paradigm shift in web development, prioritizing performance and developer experience. By shipping zero JavaScript by default and using islands for interactivity, it delivers incredibly fast websites without sacrificing modern development practices.

The combination of excellent performance, developer experience, and flexibility makes Astro an excellent choice for content-heavy websites, blogs, documentation sites, and marketing pages. Whether you’re building a simple blog or a complex multi-page application, Astro provides the tools and performance you need to succeed.

Chart Examples

Here are some additional chart examples to demonstrate the system’s capabilities:

Bar Chart Example