Menyederhanakan Astro Development dengan Claude Code: Panduan Content Site

Mempercepat Astro Development dengan Claude Code

Astro adalah framework yang menarik perhatian dengan performa tinggi berkat “Island Architecture” dan desain content-first. Dengan Claude Code, sintaks unik Astro dan desain content collection bisa dikerjakan dengan lancar.

Setup Project

> Buat project Astro.
> Persyaratan:
> - TypeScript strict
> - Tailwind CSS
> - Dukungan MDX
> - Generate sitemap otomatis

Claude Code menyajikan pengaturan astro.config.mjs beserta perintah untuk menambahkan integrasi yang diperlukan.

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [tailwind(), mdx(), sitemap()],
  markdown: {
    shikiConfig: {
      theme: 'github-dark',
    },
  },
});

Desain Content Collection

Definisi Schema

> Buat schema Content Collection untuk artikel blog.
> Sertakan title, description, pubDate, tags, draft, coverImage.

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string().max(100),
    description: z.string().max(200),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
    coverImage: z.string().optional(),
  }),
});

export const collections = { blog };

Memanfaatkan Island Architecture

Fitur terbesar Astro, island architecture, hanya memuat JavaScript untuk component yang interaktif saja.

---
// Bagian statis di-render di server
import Header from '../components/Header.astro';
import SearchBar from '../components/SearchBar.tsx';
import Footer from '../components/Footer.astro';
---

<Header />
<!-- client:visible hanya melakukan hydration saat masuk viewport -->
<SearchBar client:visible />
<Footer />

Ketika bertanya pada Claude Code “apakah client:load atau client:visible yang tepat untuk component ini?”, ia akan menyarankan directive optimal sesuai use case.

Dynamic Routing dan Pembuatan Halaman

> Generate halaman daftar artikel per tag secara dinamis.
> Dengan pagination.

---
// src/pages/tag/[tag]/[...page].astro
import { getCollection } from 'astro:content';
export async function getStaticPaths({ paginate }) {
  const posts = await getCollection('blog', ({ data }) => !data.draft);
  const tags = [...new Set(posts.flatMap(post => post.data.tags))];

  return tags.flatMap(tag => {
    const filtered = posts.filter(post => post.data.tags.includes(tag));
    return paginate(filtered, { params: { tag }, pageSize: 10 });
  });
}
const { page } = Astro.props;
---

Optimasi Performa

Astro sudah cepat secara default, tetapi bisa ditingkatkan lebih lanjut dengan pengaturan optimasi gambar dan prefetch. Ketika menyampaikan “ingin skor Lighthouse 100” ke Claude Code, ia akan menyarankan poin optimasi spesifik.

Summary

Dengan memanfaatkan Claude Code, kamu bisa dengan cepat mempelajari sintaks unik Astro dan desain content collection, serta membangun situs berperforma tinggi. Lihat juga Panduan Perbandingan SSR/SSG dan Optimasi SEO.

Untuk detail Astro, lihat Dokumentasi Resmi Astro.