Astro Framework ile İçerik Odaklı Web Sitesi Geliştirme

Modern web geliştirme dünyasında performans ve içerik odaklılık her zamankinden daha önemli hale geldi. Kullanıcılar hızlı yüklenen, erişilebilir ve SEO dostu web siteleri bekliyor. İşte tam bu noktada Astro Framework sahneye çıkıyor. Astro, "içerik odaklı web siteleri" için tasarlanmış modern bir framework olarak, varsayılan olarak sıfır JavaScript göndererek rakiplerinden ayrılıyor.

Astro Nedir ve Neden Tercih Edilmeli?

Astro, 2021 yılında ilk sürümüyle tanıtılan ve özellikle bloglar, dokümantasyon siteleri, portföy sayfaları ve pazarlama siteleri gibi içerik ağırlıklı projeler için optimize edilmiş bir web framework'üdür. Astro'nun temel felsefesi şudur: tarayıcıya mümkün olduğunca az JavaScript göndermek. Bu yaklaşım "Islands Architecture" (Ada Mimarisi) olarak adlandırılır.

Astro'yu öne çıkaran başlıca özellikler şunlardır:

• Sıfır JavaScript varsayılanı: Astro, sayfalarınızı varsayılan olarak statik HTML'e derler. JavaScript yalnızca ihtiyaç duyulduğunda ve yalnızca gerekli bileşenler için gönderilir.
• Framework agnostik yapı: React, Vue, Svelte, Solid, Preact gibi farklı UI framework'lerini aynı projede birlikte kullanabilirsiniz.
• Yerleşik içerik koleksiyonları: Markdown ve MDX dosyalarını tip güvenli bir şekilde yönetmenizi sağlayan güçlü bir içerik API'si sunar.
• Dosya tabanlı yönlendirme: Next.js'e benzer şekilde, dosya sistemi üzerinden otomatik rota oluşturma desteği vardır.
• Mükemmel performans: Lighthouse skorlarında neredeyse her zaman 100/100 almak Astro ile oldukça kolaydır.

Astro Projesine Başlangıç

Bir Astro projesi oluşturmak son derece basittir. Terminal üzerinden aşağıdaki komutu çalıştırmanız yeterlidir:

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

Bu komut size interaktif bir kurulum sihirbazı sunar. Şablon seçimi, TypeScript tercihi ve bağımlılık kurulumu gibi adımları tamamladıktan sonra projeniz hazır olacaktır. Varsayılan olarak geliştirme sunucusu http://localhost:4321 adresinde çalışır.

Proje Dizin Yapısı

Bir Astro projesinin tipik dizin yapısı şu şekildedir:

my-astro-site/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Header.astro
│   ├── content/
│   │   ├── blog/
│   │   │   ├── ilk-yazi.md
│   │   │   └── ikinci-yazi.md
│   │   └── config.ts
│   ├── layouts/
│   │   └── BaseLayout.astro
│   └── pages/
│       ├── index.astro
│       └── blog/
│           ├── index.astro
│           └── [...slug].astro
├── astro.config.mjs
├── package.json
└── tsconfig.json

src/pages/ dizini dosya tabanlı yönlendirmenin temelini oluşturur. Bu dizine eklenen her .astro veya .md dosyası otomatik olarak bir rota haline gelir.

Astro Bileşen Yapısı

Astro bileşenleri .astro uzantısına sahiptir ve iki ana bölümden oluşur: üstteki frontmatter (bileşen script'i) ve alttaki şablon (HTML çıktısı). Frontmatter bölümü üç tire (---) ile ayrılır ve sunucu tarafında çalışır.

---
// src/components/BlogCard.astro
interface Props {
  title: string;
  description: string;
  date: Date;
  slug: string;
}

const { title, description, date, slug } = Astro.props;

const formattedDate = date.toLocaleDateString('tr-TR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
---

<article class="blog-card">
  <h3>
    <a href={`/blog/${slug}`}>{title}</a>
  </h3>
  <time datetime={date.toISOString()}>{formattedDate}</time>
  <p>{description}</p>
</article>

<style>
  .blog-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    transition: box-shadow 0.2s ease;
  }
  .blog-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
</style>

Dikkat edilmesi gereken önemli bir nokta: <style> etiketindeki CSS varsayılan olarak bileşene özeldir (scoped). Yani yazdığınız stiller yalnızca o bileşeni etkiler, global kirlilik oluşturmaz.

İçerik Koleksiyonları ile Çalışmak

Astro'nun en güçlü özelliklerinden biri içerik koleksiyonlarıdır. Bu sistem, Markdown ve MDX dosyalarınızı tip güvenli bir şekilde tanımlamanızı, doğrulamanızı ve sorgulamanızı sağlar. Konfigürasyon src/content/config.ts dosyasında yapılır:

// 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(),
    author: z.string().default('Anonim'),
    tags: z.array(z.string()).optional(),
    draft: z.boolean().default(false),
    image: z.string().optional(),
  }),
});

export const collections = {
  blog: blogCollection,
};

Şema tanımı sayesinde her blog yazınızın frontmatter'ı derleme zamanında doğrulanır. Eksik veya yanlış tipte bir alan varsa Astro sizi hemen uyarır. Bu, büyük içerik sitelerinde tutarlılığı korumak için paha biçilmez bir özelliktir.

Blog Yazısı Oluşturma

Bir blog yazısı Markdown dosyası şu şekilde görünür:

---
title: "Astro ile Performanslı Siteler"
description: "Astro framework kullanarak nasıl hızlı web siteleri geliştirebilirsiniz?"
date: 2026-03-15
author: "Fatih"
tags: ["astro", "web", "performans"]
draft: false
---

## Giriş

Astro framework ile performanslı web siteleri geliştirmek
artık çok daha kolay...

İçerikleri Listeleme ve Gösterme

Koleksiyondaki içerikleri listelemek için Astro'nun sunduğu API'yi kullanabilirsiniz:

---
// src/pages/blog/index.astro
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogCard from '../../components/BlogCard.astro';

const allPosts = await getCollection('blog', ({ data }) => {
  return data.draft !== true;
});

const sortedPosts = allPosts.sort(
  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
);
---

<BaseLayout title="Blog">
  <h1>Blog Yazıları</h1>
  <div class="post-grid">
    {sortedPosts.map((post) => (
      <BlogCard
        title={post.data.title}
        description={post.data.description}
        date={post.data.date}
        slug={post.slug}
      />
    ))}
  </div>
</BaseLayout>

Dinamik blog detay sayfası için ise [...slug].astro dosyasını kullanırız:

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

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();
---

<BaseLayout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <time>{post.data.date.toLocaleDateString('tr-TR')}</time>
    <Content />
  </article>
</BaseLayout>

Islands Architecture: Kısmi Hidrasyon

Astro'nun en devrimci özelliği Islands Architecture (Ada Mimarisi) yaklaşımıdır. Bu mimaride sayfa büyük oranda statik HTML olarak sunulur. Yalnızca etkileşimli olması gereken bölümler ("adalar") JavaScript ile hidrasyona uğrar. Bu sayede sayfanın büyük kısmı anında yüklenir.

Örneğin, bir React bileşenini Astro içinde şu şekilde kullanabilirsiniz:

---
// src/pages/index.astro
import StaticHeader from '../components/Header.astro';
import InteractiveSearch from '../components/Search.jsx';
import NewsletterForm from '../components/Newsletter.svelte';
---

<StaticHeader />

<!-- Bu bileşen sayfa görünür olduğunda hidrasyon yapılır -->
<InteractiveSearch client:visible />

<!-- Bu bileşen sayfa yüklendikten hemen sonra hidrasyon yapılır -->
<NewsletterForm client:load />

<!-- Bu bileşen yalnızca belirli medya sorgusu eşleştiğinde yüklenir -->
<MobilMenu client:media="(max-width: 768px)" />

Astro'nun sunduğu client:* direktifleri şunlardır:

• client:load — Sayfa yüklendiğinde hemen hidrasyon yapar. Kritik etkileşimli bileşenler için uygundur.
• client:idle — Tarayıcı boşta kaldığında hidrasyon yapar. Acil olmayan bileşenler için idealdir.
• client:visible — Bileşen ekranda göründüğünde hidrasyon yapar. Sayfa altındaki bileşenler için mükemmeldir.
• client:media — Belirtilen medya sorgusu eşleştiğinde hidrasyon yapar. Yalnızca mobilde görünen menüler gibi durumlar için kullanılır.
• client:only — Sunucu tarafı render'ı atlar, yalnızca istemcide render eder.

Layout Sistemi

Astro'da layout'lar tekrar eden sayfa yapılarını merkezi bir yerde yönetmenizi sağlar:

---
// src/layouts/BaseLayout.astro
interface Props {
  title: string;
  description?: string;
}

const {
  title,
  description = 'Astro ile geliştirilmiş içerik odaklı web sitesi'
} = Astro.props;
---

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <title>{title}</title>
    <link rel="sitemap" href="/sitemap-index.xml" />
  </head>
  <body>
    <header>
      <nav>
        <a href="/">Ana Sayfa</a>
        <a href="/blog">Blog</a>
        <a href="/hakkinda">Hakkında</a>
      </nav>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>&copy; 2026 Tüm hakları saklıdır.</p>
    </footer>
  </body>
</html>

<slot /> etiketi, layout'u kullanan sayfanın içeriğinin yerleştirileceği noktayı belirtir. Bu yapı, tüm sayfalarda tutarlı bir üst yapı sağlar.

Entegrasyonlar ve Eklentiler

Astro'nun zengin bir entegrasyon ekosistemi vardır. En sık kullanılan entegrasyonları şu komutla kolayca ekleyebilirsiniz:

# Tailwind CSS desteği
npx astro add tailwind

# Sitemap oluşturma
npx astro add sitemap

# MDX desteği
npx astro add mdx

# React bileşen desteği
npx astro add react

# SSR için Node.js adaptörü
npx astro add node

astro.config.mjs dosyasında entegrasyonları yapılandırabilirsiniz:

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

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

Dağıtım (Deployment)

Astro varsayılan olarak statik site üretir, bu da onu herhangi bir statik hosting platformunda barındırmayı mümkün kılar. Projenizi derlemek için:

npm run build

Bu komut dist/ dizininde statik dosyaları oluşturur. Bu dosyaları Vercel, Netlify, Cloudflare Pages, GitHub Pages veya herhangi bir statik sunucuya doğrudan yükleyebilirsiniz. Vercel ve Netlify gibi platformlar için sıfır konfigürasyonla otomatik dağıtım mümkündür.

Eğer SSR (sunucu tarafı render) ihtiyacınız varsa, uygun bir adaptör ekleyerek Astro'yu dinamik bir sunucu uygulamasına da dönüştürebilirsiniz.

Performans Karşılaştırması

Astro'nun performans avantajını somut olarak görmek için tipik bir içerik sitesinde diğer framework'lerle karşılaştıralım:

• Astro: ~0 KB JavaScript (etkileşimli ada yoksa), Lighthouse skoru 100/100
• Next.js: ~80-200 KB JavaScript (React runtime dahil), Lighthouse skoru 85-95
• Gatsby: ~70-150 KB JavaScript, Lighthouse skoru 80-95
• Nuxt: ~100-180 KB JavaScript (Vue runtime dahil), Lighthouse skoru 85-95

Bu fark özellikle mobil cihazlarda ve yavaş ağ bağlantılarında dramatik bir kullanıcı deneyimi iyileştirmesi sağlar. Daha az JavaScript demek, daha hızlı ayrıştırma, daha az bellek tüketimi ve daha düşük enerji kullanımı demektir.

Ne Zaman Astro Tercih Edilmeli?

Astro her proje için doğru seçim olmayabilir. İşte Astro'nun en iyi sonuç vereceği senaryolar:

• Bloglar ve kişisel siteler: Markdown tabanlı içerik yönetimi ile mükemmel uyum sağlar.
• Dokümantasyon siteleri: Starlight teması ile kurumsal düzeyde dokümantasyon siteleri oluşturabilirsiniz.
• Pazarlama ve tanıtım sayfaları: Yüksek performans, SEO avantajı ve hızlı yükleme süreleri kritik önemdedir.
• Portföy siteleri: Görsel ağırlıklı, ama etkileşimi sınırlı siteler için idealdir.
• E-ticaret vitrinleri: Ürün katalogları ve bilgilendirme sayfaları için uygundur.

Buna karşılık, yoğun etkileşim gerektiren uygulamalar (örneğin gerçek zamanlı sohbet uygulamaları, karmaşık dashboardlar veya tam kapsamlı SPA'lar) için Next.js, Nuxt veya SvelteKit gibi framework'ler daha uygun olabilir.

Sonuç

Astro, içerik odaklı web geliştirme alanında paradigma değiştiren bir framework olarak konumlanıyor. Sıfır JavaScript varsayılanı, Islands Architecture, framework agnostik yapısı ve güçlü içerik koleksiyonları ile geliştiricilere hem üretkenlik hem de performans sunuyor. Eğer bir blog, dokümantasyon sitesi veya içerik ağırlıklı bir proje geliştirmeyi planlıyorsanız, Astro kesinlikle değerlendirmeniz gereken bir teknoloji. Performans artık bir lüks değil, bir gereklilik — ve Astro bu gerekliliği varsayılan olarak karşılıyor.