AstroJS ve Diğerleri: İçerik Sitelerinde Neden Daha İyi?

Astro her projede diğerlerinden daha iyi değildir. Ancak blog, dokümantasyon, kurumsal site, portföy, yayın platformu ve açılış sayfası gibi içeriğin etkileşimden daha önemli olduğu projelerde çok güçlü bir varsayımla başlar: Tarayıcıya yalnızca gerçekten gereken JavaScript gönderilmelidir. Astro’nun diğer popüler çerçevelere karşı temel avantajı tam olarak budur.

Çerçeve seçerken yanlış soru

“En iyi web çerçevesi hangisi?” sorusunun tek bir doğru cevabı yoktur. Doğru soru şudur: Kullanıcı bu projeye ağırlıklı olarak içerik okumak için mi, yoksa karmaşık bir uygulamayla etkileşime girmek için mi geliyor?

Bir haber sayfasının, ürün tanıtım sitesinin veya teknik dokümantasyonun büyük bölümü başlık, metin, görsel ve bağlantılardan oluşur. Bu içeriklerin çalışması için React, Vue ya da başka bir istemci çalışma zamanının tüm sayfayı devralması gerekmez. Astro, tam bu noktada içeriği önceleyen ve etkileşimi ihtiyaç oldukça ekleyen bir mimari sunar.

Buna karşılık bir proje yoğun istemci durumu, gerçek zamanlı güncellemeler, sürükle-bırak arayüzleri veya ekranlar arasında sürekli paylaşılan state gerektiriyorsa uygulama odaklı bir çerçeve daha doğal olabilir. Bu nedenle Astro’nun üstünlüğü mutlak değil, kullanım senaryosuna bağlıdır.

Astro’nun temel farkı

Astro bileşenleri sunucuda HTML’e dönüştürür. Standart bir Astro bileşeni tarayıcıya kendi çalışma zamanı JavaScript’ini göndermez; sayfa, kullanılabilir HTML ve CSS olarak gelir. Etkileşim gerektiğinde geliştirici yalnızca ilgili bileşeni bir “client island” olarak etkinleştirir.

Bunu yeni başlayanlar için bir gazete sayfasına benzetebiliriz. Makalenin gövdesi, başlığı ve görselleri zaten okunabilir durumdadır. Yalnızca yorum kutusu, arama alanı veya alışveriş sepeti gibi hareketli parçaların elektriğe ihtiyacı vardır. Astro tüm gazeteyi bir uygulamaya çevirmek yerine yalnızca bu küçük parçaları çalıştırır.

Bu yaklaşım üç sonuç üretir:

• Statik içerik için istemci JavaScript’i varsayılan olarak sıfıra kadar indirilebilir.
• Tarayıcı daha az kod indirir, ayrıştırır, derler ve çalıştırır.
• Etkileşimli olmayan içerik, JavaScript yüklenmesini beklemeden kullanılabilir olur.

Tarayıcı ana iş parçacığı HTML ve CSS işlemenin yanında JavaScript’i ayrıştırır, derler, çalıştırır ve kullanıcı olaylarını işler. Gereksiz JavaScript bu iş parçacığını meşgul ederek etkileşimleri geciktirebilir; Google’ın web performansı rehberi de gereksiz JavaScript’ten kaçınmayı temel iyileştirmeler arasında sayar.

Islands mimarisi

Astro’nun en önemli özelliği Islands Architecture, yani adalar mimarisidir. Sayfanın büyük bölümü statik HTML olarak kalırken yalnızca etkileşim gerektiren bileşenler bağımsız biçimde hydrate edilir. “Hydration”, sunucudan gelen HTML’e tarayıcı tarafındaki olayların ve state davranışının bağlanmasıdır.

Aşağıdaki örnekte React ile yazılmış sayaç yalnızca görünür olduğunda etkinleşir:

---
import Counter from '../components/Counter.jsx';
---

<article>
  <h1>Astro ile Daha Az JavaScript</h1>
  <p>Bu makale normal HTML olarak çalışır.</p>

  <Counter client:visible />
</article>

client:visible, sayaç kullanıcının ekranına yaklaşana kadar bileşenin JavaScript’ini erteleyebilir. Astro ayrıca hemen yükleme için client:load, tarayıcı boş kaldığında çalıştırma için client:idle, belirli ekran koşulları için client:media ve yalnızca istemcide çalışacak bileşenler için client:only direktiflerini destekler.

Buradaki önemli ayrım şudur: Astro JavaScript’i yasaklamaz; JavaScript’i varsayılan olmaktan çıkarıp bilinçli bir karara dönüştürür. Bu yaklaşım, performans bütçesinin zamanla fark edilmeden büyümesini zorlaştırır.

Diğerlerinden neden farklı?

Next.js, Nuxt ve SvelteKit kötü veya yavaş çerçeveler değildir. Üçü de sunucuda render, önceden üretim ve farklı ölçülerde karma kullanım sunar. Fark, yetenek listesinden çok varsayılan mimari ve optimizasyon hedefidir.

Konu	Astro	Next.js	Nuxt	SvelteKit
Ana yönelim	İçerik odaklı web siteleri	React tabanlı tam kapsamlı web uygulamaları	Vue tabanlı tam kapsamlı web uygulamaları	Svelte tabanlı esnek web uygulamaları
Varsayılan yaklaşım	Build aşamasında statik HTML; gerektiğinde route bazlı SSR	Sayfa ve layout’larda varsayılan Server Components; gerektiğinde Client Components	Varsayılan universal rendering ve hydration	Sunucuda HTML üretme, ardından varsayılan istemci hydration’ı
İstemci etkileşimi	Bileşen bazında açıkça etkinleştirilir	Client Component sınırlarıyla etkinleştirilir	Vue uygulaması hydrate edilir	CSR açıkken sayfa hydrate edilir
UI bağımlılığı	React, Vue, Svelte, Solid ve diğerleri birlikte kullanılabilir	React	Vue	Svelte
Güçlü olduğu alan	Blog, dokümantasyon, yayın, pazarlama, içerik ağırlıklı e-ticaret	SaaS, dashboard, React uygulaması, karmaşık full-stack ürün	Vue tabanlı uygulama, SSR ve hibrit route’lar	Etkileşimli fakat hafif Svelte uygulamaları
Temel avantaj	Etkileşimi ada bazında sınırlayarak düşük JS maliyeti	Büyük React ekosistemi ve kapsamlı full-stack model	Vue ekosistemi ve route rules ile hibrit render	Derleme yaklaşımı ve route bazlı SSR/CSR kontrolü

Bu tablo “Astro hızlıdır, diğerleri yavaştır” anlamına gelmez. Örneğin Next.js, Server Components ile bazı bileşenlerin kodunu istemciye göndermeden veri çekebilir ve render edebilir. Yine de etkileşim gereken bölümlerde Client Components, RSC payload ve hydration modeli devreye girer.

Nuxt da universal, client-side ve hibrit render seçenekleri sunar; route rules ile her route için önbellek ve render stratejisi belirlenebilir. Varsayılan universal modelde HTML sunucuda üretilir ve Vue aynı sayfayı tarayıcıda hydrate ederek etkileşimli hâle getirir.

SvelteKit ise prerender, ssr ve csr seçeneklerini sayfa veya layout düzeyinde kontrol edebilir. Dolayısıyla pazarlama sayfalarını statik, dinamik sayfaları SSR ve yönetim bölümünü SPA olarak tasarlamak mümkündür.

Astro’nun ayrıştığı yer, bu kontrollerin ötesinde etkileşimi bileşen adası seviyesinde ve farklı UI kütüphaneleriyle yönetmesidir. Aynı Astro sayfasında React, Vue veya Svelte bileşenleri kullanılabilir; her bileşenin ne zaman hydrate edileceği ayrıca belirlenebilir.

Performans avantajı

Astro’nun performans iddiası sihirli bir derleyici sloganından ibaret değildir. Mantık doğrudandır: Gönderilmeyen JavaScript’in indirme, ayrıştırma, derleme ve çalıştırma maliyeti de yoktur. Bu, özellikle orta ve düşük donanımlı mobil cihazlarda önemli bir avantajdır.

Ancak burada dürüst bir sınır çizilmelidir. “Astro her zaman belirli bir yüzde daha hızlıdır” gibi genel bir rakam teknik olarak güvenilir değildir. Sonuç; içerik miktarına, görsellere, fontlara, üçüncü taraf script’lere, cache politikasına, sunucu konumuna ve geliştiricinin yaptığı tercihlere bağlıdır.

Doğru ifade şudur: Astro, içerik sayfalarında düşük JavaScript maliyetine ulaşmayı varsayılan ve kolay hâle getirir. Bağımsız karşılaştırmalar da içerik ağırlıklı rotalarda Astro’nun daha az istemci JavaScript’i gönderme eğilimini doğrularken, uygulama ağırlıklı projelerde Next.js gibi çerçevelerin daha uygun olabileceğini belirtir.

Bir Astro sitesine onlarca analitik etiketi, ağır reklam script’leri, büyük React adaları ve optimize edilmemiş görseller eklenirse sonuç yine yavaş olabilir. Çerçeve iyi varsayımlar sağlar; kötü uygulama kararlarını otomatik olarak ortadan kaldırmaz.

SEO neden güçlenir?

Arama motoru optimizasyonu yalnızca framework seçimi değildir. İçerik kalitesi, semantik HTML, erişilebilirlik, doğru canonical adresleri, yapılandırılmış veri, iç bağlantılar ve teknik altyapı birlikte değerlendirilir.

Astro’nun katkısı, ana içeriği varsayılan olarak hazır HTML şeklinde sunmasıdır. Sayfanın anlamlı metni bir istemci uygulamasının açılmasını beklemez. Aynı zamanda düşük JavaScript maliyeti Core Web Vitals hedeflerine ulaşmayı kolaylaştırabilir; fakat iyi sıralama garantisi vermez.

Astro’da standart SEO etiketleri doğrudan layout içinde yönetilebilir:

---
interface Props {
  title: string;
  description: string;
  canonicalURL: URL;
}

const { title, description, canonicalURL } = Astro.props;
---

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>{title}</title>
  <meta name="description" content={description} />
  } />
</head>

Bu yapı basittir, ancak production ortamında Open Graph, Twitter Card, robots yönergeleri ve uygun yapılandırılmış veri de içerik tipine göre eklenmelidir.

İçerik yönetimi

Astro yalnızca hızlı HTML üretmez; içerik odaklı projeler için Content Collections sistemi sunar. Blog yazıları, ürün açıklamaları veya dokümantasyon kayıtları Markdown, MDX, JSON, YAML ve benzeri kaynaklardan alınabilir; şema kullanılarak içerik yapısı doğrulanabilir ve TypeScript tip güvenliği sağlanabilir.

Örneğin her blog yazısında title, description, publishedAt ve draft alanlarının bulunmasını zorunlu tutabilirsiniz:

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

const blog = defineCollection({
  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
  schema: z.object({
    title: z.string().min(10),
    description: z.string().min(50).max(160),
    publishedAt: z.coerce.date(),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Bu doğrulama, eksik veya hatalı frontmatter bilgisini sayfa yayına çıktıktan sonra değil build sırasında yakalamaya yardımcı olur. İçerik büyüdükçe bu özellik yalnızca geliştirici konforu değil, bakım ve veri kalitesi avantajı hâline gelir.

Statikten dinamiğe geçiş

Astro başlangıçta statik üretimi tercih eder, fakat yalnızca statik site üretebilen bir araç değildir. Varsayılan olarak route’lar build sırasında önceden render edilir; ihtiyaç duyulan route’lar bir adapter eklenerek istek anında sunucuda üretilebilir. Node.js, Netlify, Vercel ve Cloudflare için resmi adapter seçenekleri vardır.

Örneğin herkese aynı görünen hakkımızda sayfası statik kalırken kullanıcı hesabı route’u istek anında render edilebilir:

---
export const prerender = false;

const user = await getCurrentUser(Astro.cookies);
---

<h1>Merhaba, {user.name}</h1>

Uygulamanın büyük bölümü dinamikse output: 'server' ayarlanabilir; yine de uygun route’lar prerender = true ile statik üretilebilir. Bu sayede proje tek bir global render modeline mahkûm olmaz.

Astro ayrıca Server Islands ile statik ve cache edilebilir sayfa kabuğunun içinde yalnızca kişiselleştirilmiş parçaları istek anında sunucuda render edebilir. Kullanıcı avatarı, sepet özeti veya güncel stok bilgisi gibi bölümler bu modele uygundur.

İstediğin UI kütüphanesi

Astro UI-agnostic, yani tek bir kullanıcı arayüzü kütüphanesine bağlı değildir. React, Preact, Vue, Svelte, Solid, HTMX ve Web Components gibi seçenekleri destekler.

Bu esneklik şu senaryolarda değerlidir:

• Mevcut React bileşenlerini yeni içerik sitesinde yeniden kullanmak.
• Yeni bir sayfada daha küçük bir Svelte bileşeni denemek.
• Etkileşim gerektirmeyen alanları .astro bileşenleriyle saf HTML olarak bırakmak.
• Eski bir siteyi tamamen yeniden yazmadan aşamalı olarak modernleştirmek.

Aynı framework’ü kullanan birden fazla hydrate edilmiş bileşende çalışma zamanı bir kez gönderilir. Bununla birlikte aynı sayfada gereksiz yere React, Vue ve Svelte’i birlikte kullanmak bundle maliyetini artırır; teknik olarak mümkün olması, her zaman doğru mimari karar olduğu anlamına gelmez.

Geliştirici deneyimi

Astro’nun .astro dosya biçimi HTML’e yakındır. Üstteki --- alanında sunucu veya build zamanı kodu çalışır, altta ise template bulunur:

---
interface Props {
  name: string;
}

const { name } = Astro.props;
const createdAt = new Date();
---

<section>
  <h2>Merhaba {name}</h2>
  <time datetime={createdAt.toISOString()}>
    {createdAt.toLocaleDateString('tr-TR')}
  </time>
</section>

Bu model, React’e özgü Server Component ve Client Component sınırlarını öğrenmeden sunucuda veri alıp HTML üretmek isteyen yeni geliştiriciler için anlaşılır olabilir. Yine de .astro template sözdizimi, content collection API’leri ve hydration direktifleri öğrenilmesi gereken Astro’ya özgü kavramlardır.

Yeni proje resmi CLI ile oluşturulabilir:

npm create astro@latest
cd proje-adi
npm run dev

Güncel Astro dokümantasyonuna göre geliştirme sunucusu varsayılan olarak http://localhost:4321 adresini kullanır. Güncel kurulum gereksinimleri değişebildiği için Node.js sürümü bloglardan kopyalanmamalı, doğrudan resmi kurulum sayfasından kontrol edilmelidir; Eylül 2026 dokümantasyonu Node.js 22.12.0 veya üzerini belirtmektedir.

Astro ne zaman daha iyi?

Astro aşağıdaki projelerde güçlü bir varsayılan seçimdir:

• Blog ve haber platformları.
• Teknik dokümantasyon siteleri.
• Şirket ve ürün tanıtım siteleri.
• Portföy ve etkinlik sayfaları.
• Landing page ve kampanya sayfaları.
• İçeriği yoğun, etkileşimi sınırlı e-ticaret vitrinleri.
• Headless CMS kullanan yayın projeleri.

Bu projelerde kullanıcıların ana amacı içerik tüketmektir. Astro, içeriğin çalışmasını bir JavaScript uygulamasının başlamasına bağlamadığı için performans, hata toleransı ve progressive enhancement açısından doğal bir avantaj sağlar.

Ne zaman seçilmemeli?

Astro aşağıdaki durumlarda otomatik seçim olmamalıdır:

• Ekranın büyük bölümünün sürekli etkileşimli olduğu dashboard’lar.
• Çok sayıda bileşenin aynı global state’i anlık olarak paylaştığı uygulamalar.
• Tarayıcı tarafında yoğun gerçek zamanlı veri işleyen ürünler.
• Ekibin hazır React veya Vue uygulama ekosistemine güçlü biçimde bağlı olduğu projeler.
• İhtiyaç duyulan kritik kütüphanelerin yalnızca belirli bir framework ile sorunsuz çalıştığı sistemler.

Bu projeler Astro ile yapılabilir; Astro Actions tür güvenli sunucu fonksiyonları, SSR, sessions ve adapter desteği gibi uygulama özelliklerine sahiptir. Fakat teknik olarak mümkün olmak ile en düşük karmaşıklığa sahip çözüm olmak aynı şey değildir. Yoğun etkileşimli bir SaaS arayüzünü çok sayıda bağımsız React adasına bölmek, paylaşılan state ve adalar arası iletişim nedeniyle gereksiz mimari sürtünme yaratabilir.

Eleştirel değerlendirme

Astro’nun avantajlarını anlatırken üç yaygın abartıdan kaçınmak gerekir.

Birincisi, “Astro sitesinde JavaScript yoktur” ifadesi yanlıştır. Doğrusu, Astro’nun varsayılan olarak gereksiz istemci JavaScript’i göndermemesidir. Hydrate edilen bileşenler, analytics araçları ve üçüncü taraf script’ler yine JavaScript maliyeti oluşturur.

İkincisi, “Astro SEO’yu garanti eder” denemez. Hazır HTML ve düşük JS maliyeti teknik zemini güçlendirir; kötü içerik, yanlış canonical kullanımı, zayıf erişilebilirlik veya hatalı bilgi mimarisi framework tarafından çözülemez.

Üçüncüsü, “Next.js ve Nuxt statik sayfa üretemez” iddiası yanlıştır. Next.js sunucu ve istemci bileşenlerini, Nuxt universal ve hibrit rendering’i, SvelteKit ise route bazında prerender/SSR/CSR seçeneklerini destekler. Astro’nun farkı bu özelliklerin varlığından değil, içerik ve düşük istemci JavaScript’i etrafında kurduğu varsayılanlardan gelir.

Karar rehberi

Proje sorusu	Evet ise yaklaşım
Sayfanın büyük bölümü okunacak içerikten mi oluşuyor?	Astro güçlü adaydır.
Etkileşim yalnızca arama, form, sayaç, sepet gibi birkaç bölgede mi?	Astro Islands doğrudan uygundur.
Aynı projede mevcut React/Vue/Svelte bileşenleri mi kullanılacak?	Astro’nun UI-agnostic yapısı avantaj sağlar.
Her ekran yoğun state ve istemci etkileşimi mi içeriyor?	Next.js, Nuxt veya SvelteKit daha doğal olabilir.
Ekip tek bir framework ekosisteminde yüksek deneyime mi sahip?	Geçiş maliyetini performans kazancıyla birlikte değerlendirin.
Proje statik başlayıp bazı route’larda kişiselleşecek mi?	Astro’nun route bazlı on-demand rendering ve Server Islands modeli uygundur.

Çerçeve seçimi popülerliğe göre değil, ürünün baskın davranışına göre yapılmalıdır. Content-first bir projede Astro, JavaScript’i azaltmak için sonradan mücadele etmek yerine düşük JavaScript maliyetiyle başlamanızı sağlar. App-first bir projede ise uygulama odaklı bir meta-framework, state yönetimi ve istemci navigasyonu bakımından daha sade bir bütünlük sunabilir.

Sonuç

Astro’nun diğer çerçevelere karşı en güçlü argümanı daha fazla özelliğe sahip olması değildir. Asıl avantajı, web’in temel yapı taşları olan HTML ve CSS’i merkeze alması; JavaScript’i ise yalnızca etkileşim gereken bölgelere göndermesidir.

Bu nedenle Astro, içerik odaklı projelerde şu faydaları birlikte sunar:

• Varsayılan olarak düşük istemci JavaScript’i.
• Bileşen bazlı ve zamanlanabilir hydration.
• React, Vue ve Svelte gibi farklı UI seçenekleri.
• Statik üretim, route bazlı SSR ve Server Islands desteği.
• Markdown ve MDX için şemalı, tip güvenli içerik yönetimi.
• Yeni başlayanların anlayabileceği HTML’e yakın bir geliştirme modeli.

En doğru hüküm şudur: Astro her framework’ten daha iyi değildir; fakat çoğu sayfası içerikten, küçük bir bölümü etkileşimden oluşan web sitelerinde daha doğru varsayımlarla başlar. Bu mimari uyum, daha az istemci kodu, daha düşük karmaşıklık ve performansı koruması daha kolay bir proje üretir.