Astro Framework Expert (2026 Edition)

English | Bahasa Indonesia

---

<a name="english"></a>

English

Orchestration & Integration

• seo: Astro's built-in SEO capabilities, sitemaps, and structured data.
• performance-web-vitals: Astro's zero-JS-by-default performance optimization.
• tailwind-expert: Tailwind CSS v4 integration with Astro.
• headless-cms-expert: Content fetching from Sanity/Payload/Strapi in Astro.
• ci-cd-devops-architect: Deploying Astro to Vercel, Cloudflare Pages, or Netlify.

Description

Expert guide for building high-performance, content-first websites with Astro 5+. Covers Content Collections (type-safe content), Islands Architecture (partial hydration), View Transitions, server-side rendering, hybrid rendering, MDX integration, Astro DB, and multi-framework component support (React, Vue, Svelte in one project).

Trigger Conditions

• Building content-heavy websites (blogs, docs, marketing pages, portfolios).
• Choosing between Astro and Next.js for a content-first project.
• Implementing partial hydration or Islands Architecture.
• Creating documentation sites or landing pages optimized for performance.
• Using multiple UI frameworks (React + Vue + Svelte) in one project.

---

Core Concepts

Astro vs Next.js Decision Guide

Criteria	Astro 5	Next.js 15
Primary Focus	Content sites	Full-stack apps
Default JS Shipped	0 KB	React runtime
Rendering	Static-first, opt-in SSR	SSR-first, opt-in static
Multi-framework	✅ React, Vue, Svelte, Solid	React only
Content Collections	✅ Built-in, type-safe	Manual with MDX
Server Islands	✅ Deferred rendering	PPR (similar)
Choose When	Content, SEO, speed critical	Complex interactivity

Recommendation: Choose Astro for content-driven sites where performance and SEO are top priorities. Choose Next.js for interactive web applications with complex state.

1. Project Setup

# Create new Astro project
npm create astro@latest ./my-site -- --template blog --typescript strict

# Add integrations
npx astro add tailwind react mdx sitemap

2. Content Collections (Type-Safe Content)

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

const blog = defineCollection({
  type: 'content', // Markdown/MDX files
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    heroImage: z.string().optional(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

const authors = defineCollection({
  type: 'data', // JSON/YAML files
  schema: z.object({
    name: z.string(),
    avatar: z.string(),
    bio: z.string(),
  }),
});

export const collections = { blog, authors };

---
// src/pages/blog/[...slug].astro
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog', ({ data }) => !data.draft);
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<article>
  <h1>{post.data.title}</h1>
  <time>{post.data.pubDate.toLocaleDateString()}</time>
  <Content />
</article>

3. Islands Architecture (Partial Hydration)

---
// Only hydrate interactive components — rest ships as 0 JS
import Newsletter from '../components/Newsletter.tsx';
import Counter from '../components/Counter.vue';
import Chart from '../components/Chart.svelte';
---

<!-- Static by default — no JS shipped -->
<h1>My Blog Post</h1>
<p>This is static HTML with zero JavaScript.</p>

<!-- Hydrate only when visible (lazy loading) -->
<Newsletter client:visible />

<!-- Hydrate on page load -->
<Counter client:load />

<!-- Hydrate only on interaction (click, hover) -->
<Chart client:idle />

<!-- Hydrate only on specific media query -->
<MobileMenu client:media="(max-width: 768px)" />

4. View Transitions

---
// src/layouts/BaseLayout.astro
import { ViewTransitions } from 'astro:transitions';
---
<html>
  <head>
    <ViewTransitions />
  </head>
  <body>
    <nav transition:persist><!-- Persists across pages --></nav>
    <main transition:animate="slide">
      <slot />
    </main>
  </body>
</html>

5. Server Islands (Deferred Rendering)

---
// Renders on the server, deferred from the initial page load
// Great for personalized content in otherwise static pages
---
<UserGreeting server:defer>
  <p slot="fallback">Loading...</p>
</UserGreeting>

Production Checklist

• Content Collections with strict Zod schemas.
• Sitemap integration enabled (@astrojs/sitemap).
• Image optimization with astro:assets.
• View Transitions for smooth page navigation.
• Hybrid rendering (static + SSR where needed).
• Deploy adapter configured (Vercel, Cloudflare, Node).

---

<a name="bahasa-indonesia"></a>

Bahasa Indonesia

Integrasi Orkestrasi

• seo: Kemampuan SEO bawaan Astro, sitemap, dan data terstruktur.
• performance-web-vitals: Optimasi performa zero-JS-by-default Astro.
• tailwind-expert: Integrasi Tailwind CSS v4 dengan Astro.
• headless-cms-expert: Pengambilan konten dari Sanity/Payload/Strapi di Astro.

Deskripsi

Panduan ahli untuk membangun website berperforma tinggi dan berfokus konten dengan Astro 5+. Mencakup Content Collections, Islands Architecture (partial hydration), View Transitions, rendering hybrid, integrasi MDX, Astro DB, dan dukungan multi-framework (React, Vue, Svelte dalam satu proyek).

Kondisi Pemicu

• Membangun website berat konten (blog, docs, halaman marketing, portfolio).
• Memilih antara Astro dan Next.js untuk proyek konten.
• Mengimplementasikan partial hydration atau Islands Architecture.
• Membuat situs dokumentasi atau landing page yang dioptimalkan untuk performa.