## Astro: Website Cepat secara Default Bayangin kamu lagi pesen makanan. Framework biasa tuh kayak beli nasi uduk komplit - dapet semuanya, tapi berat dan bikin kekenyangan (kebanyakan JavaScript). Astro? Kayak beli nasi uduk ala carte - ambil yang kamu butuhin aja. Lebih ringan, lebih cepat, lebih hemat. Astro adalah web framework yang fokus ke satu hal: **kecepatan**. Philosophy-nya simpel - ship less JavaScript ke browser, hasilnya website yang jauh lebih cepat. Default behavior Astro: **zero JavaScript** di browser. Semua di-render di server, HTML statis dikirim ke client. JavaScript cuma di-load kalau emang butuh interactivity. ## Kenapa Pakai Astro? ### Benefits yang Bikin Berbeda: 1. **Zero JS by Default** - Website cepat karena nggak kirim JavaScript yang nggak perlu 2. **Framework Agnostic** - Bisa pake React, Vue, Svelte bareng-bareng dalam satu project 3. **Islands Architecture** - Load JS cuma buat component yang interactive 4. **SEO Perfect** - Static HTML bikin Google seneng, ranking naik 5. **Developer Experience** - Simple syntax, familiar, gampang dipelajarin 6. **Content Collections** - Built-in content management buat blog/docs 7. **Build Time Optimization** - Otomatis optimize images, fonts, CSS ## Kenapa Astro Beda? ### Traditional Framework React, Vue, Svelte: Render semuanya di client = banyak JS = website berat ### Astro Approach Render di server, kirim HTML. JavaScript cuma buat yang perlu interactivity. Hasilnya: Website ringan dan ngebut. ## Islands Architecture Ini konsep unik dari Astro. Bayangin halaman web kamu itu kayak pulau-pulau: - Kebanyakan area: Static HTML (laut) - Beberapa titik: Interactive components (pulau) ```astro --- // page.astro import Header from './Header.astro' // Static import Counter from './Counter.jsx' // Interactive ---

``` ## Install Astro ```bash npm create astro@latest ``` Astro bakal nanya beberapa setup options: - Template: Blog, portfolio, atau empty - TypeScript: Yes/No - Git: Initialize atau nggak ```bash cd my-astro-site npm run dev ``` Boom! Dev server running di `http://localhost:4321` ## File Structure ``` my-astro-site/ ├── src/ │ ├── pages/ # Routes (auto-routing) │ ├── layouts/ # Layout components │ ├── components/ # Reusable components │ └── content/ # Content collections ├── public/ # Static assets └── astro.config.mjs # Config ``` ## Astro Component Syntax File `.astro` punya 2 bagian: ```astro --- // Component script (runs on server) const greeting = 'Hello from Astro!' const currentYear = new Date().getFullYear() ---

{greeting}

Year: {currentYear}

``` Frontmatter (area `---`) itu JavaScript yang jalan di server. Template di bawahnya itu HTML dengan syntax kayak JSX. ## Routing Super simple. File di `src/pages/` otomatis jadi route: ``` src/pages/ ├── index.astro → / ├── about.astro → /about ├── blog/ │ ├── index.astro → /blog │ └── [slug].astro → /blog/any-slug └── api/ └── users.json.ts → /api/users.json ``` ### Dynamic Routes ```astro --- // src/pages/blog/[slug].astro export async function getStaticPaths() { const posts = await fetch('https://api.example.com/posts') const data = await posts.json() return data.map(post => ({ params: { slug: post.slug }, props: { post } })) } const { post } = Astro.props ---

{post.title}

{post.content}

``` ## Layouts Buat struktur yang konsisten di semua halaman: ```astro --- // src/layouts/Layout.astro const { title } = Astro.props --- {title}

``` Pake di page: ```astro --- // src/pages/about.astro import Layout from '../layouts/Layout.astro' ---

About Us

This is the about page

``` ## Mix & Match UI Frameworks Inilah yang bikin Astro powerful. Bisa pake React, Vue, Svelte, Solid dalam satu project: ```bash # Install React npx astro add react # Install Vue npx astro add vue # Install Svelte npx astro add svelte ``` Pake bareng-bareng: ```astro --- import ReactCounter from './Counter.jsx' import VueButton from './Button.vue' import SvelteCard from './Card.svelte' --- ``` ## Client Directives Kontrol kapan component load JavaScript-nya: - `client:load` - Load langsung - `client:idle` - Load setelah page idle - `client:visible` - Load kalau component masuk viewport - `client:media` - Load berdasarkan media query - `client:only` - Skip server rendering ```astro ``` ## Content Collections Buat manage content kayak blog posts: ```typescript // src/content/config.ts import { defineCollection, z } from 'astro:content' const blog = defineCollection({ schema: z.object({ title: z.string(), description: z.string(), date: z.date(), tags: z.array(z.string()) }) }) export const collections = { blog } ``` Fetch di page: ```astro --- import { getCollection } from 'astro:content' const posts = await getCollection('blog') --- {posts.map(post => (

{post.data.title}

{post.data.description}

))} ``` ## Styling Multiple options, pilih sesuai selera: ### Scoped Styles ```astro ``` ### CSS Modules ```astro --- import styles from './Button.module.css' --- ``` ### Tailwind CSS ```bash npx astro add tailwind ``` ```astro ``` ## API Routes Bikin API endpoints: ```typescript // src/pages/api/hello.json.ts export async function GET({ params, request }) { return new Response( JSON.stringify({ message: 'Hello from Astro API!' }), { status: 200, headers: { 'Content-Type': 'application/json' } } ) } ``` ## Build untuk Production ```bash npm run build ``` Astro bakal generate static HTML files di `dist/`: - Pre-rendered pages - Optimized assets - Minimal JavaScript ## Deploy Bisa pake static host apapun: ```bash # Vercel npm run build vercel deploy # Netlify npm run build netlify deploy # Cloudflare Pages npm run build # Push to GitHub, connect to CF Pages ``` ## Astro vs Others | Feature | Astro | Next.js | Gatsby | |---------|-------|---------|--------| | Default Output | Static | Hybrid | Static | | JavaScript Shipped | Minimal | Full | Full | | Framework Agnostic | | (React) | (React) | | Learning Curve | Easy | Medium | Medium | | Best For | Content sites | Web apps | Blogs | ## Kapan Pakai Astro? ### Pakai Astro kalau: - Bikin blog, documentation site, atau portfolio - Fokus ke content-heavy websites - Butuh SEO dan performa terbaik - Mau website yang super cepat tanpa banyak JavaScript - Pengen mix berbagai framework (React + Vue + Svelte) ### Pakai Next.js kalau: - Butuh banyak client-side interactivity (dashboard, SaaS) - Mau full-stack dengan API routes yang kompleks - Real-time features penting - Lebih suka React ecosystem ### Pakai Gatsby kalau: - Udah familiar dengan GraphQL - Butuh plugin ecosystem yang kaya - Fokus ke pure static site generation ### Astro vs Framework Lain **Kecepatan Loading:** - Astro: Paling cepat (zero JS default) - Next.js: Cepat (dengan optimisasi) - React SPA: Lebih lambat (banyak JS) **Flexibility:** - Astro: Bisa pake semua framework - Next.js: React only - Gatsby: React only **Use Case:** - Astro: Content sites, blogs, marketing - Next.js: Web apps, e-commerce, full-stack - Gatsby: Static sites, blogs Pilih Astro kalau prioritas utama adalah speed dan SEO untuk content site. ## Real-World Example: Blog dengan Newsletter ```astro --- // src/pages/blog/[slug].astro import Layout from '../../layouts/Layout.astro' import { getCollection } from 'astro:content' import NewsletterForm from '../../components/NewsletterForm.jsx' import ShareButtons from '../../components/ShareButtons.vue' import CommentSection from '../../components/CommentSection.svelte' export async function getStaticPaths() { const posts = await getCollection('blog') return posts.map(post => ({ params: { slug: post.slug }, props: { post } })) } const { post } = Astro.props const { Content } = await post.render() // Related posts const allPosts = await getCollection('blog') const related = allPosts .filter(p => p.data.tags.some(tag => post.data.tags.includes(tag))) .slice(0, 3) ---

{post.data.title}

{post.data.date.toLocaleDateString('id')}

{post.data.tags.map(tag => ( #{tag} ))}

``` ```jsx // src/components/NewsletterForm.jsx import { useState } from 'react' export default function NewsletterForm() { const [email, setEmail] = useState('') const [status, setStatus] = useState('idle') async function handleSubmit(e) { e.preventDefault() setStatus('loading') try { await fetch('/api/newsletter', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }) }) setStatus('success') setEmail('') } catch (error) { setStatus('error') } } return (

Subscribe to Newsletter

Get latest posts directly to your inbox!

{status === 'success' && (

Thanks for subscribing!

)} {status === 'error' && (

Failed to subscribe. Try again!

)}

) } ``` Ini contoh showcase-nya: - Static content (header, artikel, related posts) - instant load - React island (newsletter form) - load saat visible - Vue island (share buttons) - load saat idle - Svelte island (comments) - load saat visible - Mix 3 framework dalam satu page - Performa optimal karena selective hydration ## Tips buat Pemula 1. **Start static** - Kebanyakan website nggak butuh JavaScript 2. **Add interactivity strategically** - Pake client directives dengan bijak 3. **Use Content Collections** - Buat manage blog/docs dengan type-safety 4. **Leverage integrations** - Astro punya banyak official integrations (Tailwind, MDX, Sitemap, dll) 5. **Optimize images** - Pake `` component buat auto-optimization 6. **Think in islands** - Identifikasi mana yang butuh JS, mana yang static ## Kesimpulan Astro nawarin approach baru yang refreshing: build fast by default. Nggak perlu optimize manual, kecepatan udah bawaan dari sananya. Cocok banget buat content-focused sites yang mau performa terbaik tanpa ngorbanin developer experience. ### Checklist buat Mulai - [ ] Install Astro: `npm create astro@latest` - [ ] Pahami file-based routing di `src/pages/` - [ ] Coba bikin static page dengan `.astro` file - [ ] Setup Content Collections untuk blog - [ ] Eksperimen dengan client directives (`client:load`, `client:visible`, dll) - [ ] Integrate framework favorit (React/Vue/Svelte) - [ ] Tambahin Tailwind CSS: `npx astro add tailwind` - [ ] Optimize images dengan `` component - [ ] Deploy ke Netlify atau Vercel - [ ] Cek Lighthouse score (harusnya 100/100!) Coba sekarang, dan rasain bedanya!