Astro

Okunuşu: estrou

Güncellendi 6 Ekim 20262 dk okuma

Kısaca

Astro, içerik odaklı siteler için bir web framework'üdür; sayfaları HTML'e dönüştürür ve JavaScript'i yalnızca etkileşimli adalara ekler.

Astro nedir?

Astro; bloglar, dokümantasyon, tanıtım sayfaları ve online mağazalar gibi, sayfalarının büyük kısmı okunacak içerikten oluşan web siteleri için açık kaynaklı bir framework'tür. Sayfalar ve bileşenler .astro dosyalarında yazılır: --- çizgileri arasındaki script bölümü build sırasında ya da sunucuda çalışır, altındaki HTML şablonu da onun verisini kullanır. Sonuç düz HTML ve CSS'tir; siz istemedikçe tarayıcıya JavaScript gönderilmez.

Etkileşim ada mimarisinden (islands architecture) gelir. Bir sayfa, arama kutusu ya da resim karuseli gibi JavaScript gerektiren birkaç adanın bulunduğu statik bir HTML denizidir. Bu adaları React, Vue, Svelte, Solid ya da Preact bileşenleri olarak, hatta aynı sayfada karıştırarak yazabilirsiniz; her birinin ne zaman yükleneceğine bir direktif karar verir: client:load hemen, client:idle tarayıcı boşta kaldığında, client:visible ise bileşen ekrana girdiğinde. Astro varsayılan olarak statik sayfalar üretir; barındırma ortamınız için bir adapter ile sayfaları her istekte sunucuda da render edebilir.

Astro 2022'de 1.0 sürümüne ulaştı ve Vite üzerine kuruludur. Ocak 2026'da arkasındaki ekip olan The Astro Technology Company, Cloudflare'e katıldı; framework MIT lisansıyla açık kaynak olarak kalıyor ve hâlâ her barındırma ortamına deploy edilebiliyor.

Astro sık sık Next.js ile karşılaştırılır. Next.js, eksiksiz web uygulamaları için bir React framework'üdür ve arayüzü çalıştırmak için React'i tarayıcıya gönderir. Astro ise içerik önceliklidir, birden çok arayüz framework'üyle çalışır ve her sayfayı, çok sayfalı bir uygulamadaki gibi kendi HTML belgesi olarak ele alır; bu yüzden içerik sitelerinde çok daha az JavaScript gönderir. Buna karşılık, bir tasarım aracı gibi neredeyse her şeyin etkileşimli olduğu, uygulama benzeri ekranlara pek uygun değildir.

Önemli noktalar

Astro, bloglar ve dokümantasyon gibi içerik odaklı web siteleri için bir framework'tür.
Sayfalar HTML'e dönüştürülür ve varsayılan olarak JavaScript gönderilmez.
Etkileşimli parçalar, React, Vue, Svelte ya da başka araçlarla yazılan ve kendi başına yüklenen adalardır.
Varsayılan olarak statik site üretir, sunucuda render da yapabilir.
Şirketi 2026'da Cloudflare'e katıldı; Astro MIT lisansıyla açık kaynak olarak kalıyor.

Örnek

React adası içeren bir Astro sayfasıastro

---
// Runs at build time or on the server, never in the browser
import { getCollection } from "astro:content";
import SearchBox from "../components/SearchBox.jsx";

const posts = await getCollection("blog");
---
<h1>Blog</h1>
<!-- A React island: its JavaScript loads only when it scrolls into view -->
<SearchBox client:visible />
<ul>
  {posts.map((post) => <li><a href={`/blog/${post.id}/`}>{post.data.title}</a></li>)}
</ul>

Sık sorulan sorular

Astro bir statik site üreticisi mi?

Öyle başladı ve hâlâ varsayılan olarak statik sayfalar üretir. Bir adapter ile sayfaları her istekte sunucuda da render edebilir; böylece hem statik hem dinamik siteleri kapsar.

Astro ile React kullanabilir miyim?

Evet. Astro'nun React, Vue, Svelte, Solid ve Preact için resmî entegrasyonları vardır. Bileşenler sunucuda HTML'e dönüştürülür; yalnızca client:* direktifi olanlar JavaScript'lerini tarayıcıda yükler.

Astro ile Next.js arasındaki fark nedir?

Next.js, eksiksiz web uygulamaları için bir React framework'üdür ve arayüzü çalıştırmak için React'i tarayıcıya gönderir. Astro ise içerik siteleri için tasarlanmıştır, birden çok arayüz framework'üyle çalışır ve JavaScript'i yalnızca etkileşimli adalar için gönderir.

İlgili sayfalar

Kaynaklar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin