Astro Nedir, nasıl çalışır ve hızlı statik siteler oluştururken proje yapısı, bileşenler, islands mimarisi ile Vercel dağıtımı nasıl kullanılır?
İçerik ağırlıklı bir web sitesi hazırlarken sayfaların yavaş açılması, gereğinden fazla JavaScript yüklenmesi ve kullanılan altyapının zamanla karmaşıklaşması sık karşılaşılan sorunlardır. Özellikle blog, kurumsal tanıtım sitesi veya dokümantasyon sayfası geliştiriyorsanız ziyaretçinin kullanmayacağı kodları tarayıcıya göndermek performansı olumsuz etkileyebilir.
Astro Nedir sorusu, hızlı ve içerik odaklı bir web projesi geliştirmek isteyenlerin karşısına sıkça çıkar. Astro, sayfanın büyük bölümünü önceden hazırlanmış HTML olarak sunarak performans sorunlarına farklı bir yaklaşım getirir. Etkileşim gerektiren bölümlerde JavaScript çalıştırırken metin, görsel ve diğer sabit alanları daha hafif tutar. Böylece hem içerik üretmeye odaklanabilir hem de gereksiz istemci yükünü azaltabilirsiniz.
Bir web projesindeki erişim problemleri yalnızca kullanılan geliştirme aracından kaynaklanmaz. Alan adı, DNS, sunucu veya tarayıcı tarafındaki kesintiler de sayfanın görüntülenmesini engelleyebilir. Bu tür bir durumla karşılaştığınızda Bu Siteye Ulaşılamıyor Hatasını Çözmenin 5 Yolu içeriğindeki bağlantı kontrollerini uygulayarak altyapı sorunlarını geliştirme hatalarından ayırabilirsiniz.
Astro Nedir ve Nasıl Çalışır?
Astro Nedir sorusunun en net yanıtı, içerik odaklı web siteleri oluşturmak için geliştirilen modern bir web çatısı olduğudur. Sayfaları varsayılan olarak statik HTML biçiminde üretir ve JavaScript kodunu yalnızca etkileşim gereken bileşenlere ekler. React, Vue, Svelte ve Solid gibi farklı arayüz teknolojileriyle birlikte çalışabilir.
Astro’nun temel yaklaşımı, bütün sayfayı tek bir JavaScript uygulamasına dönüştürmek yerine bağımsız etkileşim alanları oluşturmaktır. Örneğin yazı metni doğrudan HTML olarak görüntülenirken görsel kaydırıcı, arama alanı veya açılır menü ayrı bir etkileşim bileşeni olarak çalışabilir.
Islands Architecture Ne İşe Yarar?
Astro’nun öne çıkan özelliği Islands Architecture adı verilen yapıdır. Sayfanın sabit alanları etkileşim kodundan ayrılır ve yalnızca ihtiyaç duyulan bileşenler tarayıcı tarafında etkinleştirilir. Astro belgelerinde bu bileşenler client island olarak tanımlanır. Sunucudan gelen dinamik alanlar için de server island kullanılabilir.
Bir React bileşenini sayfaya eklemek, bileşenin otomatik olarak ziyaretçinin tarayıcısında çalışacağı anlamına gelmez. İstemci tarafında etkinleşmesi için client yönergelerinden birinin belirtilmesi gerekir. Örneğin client bileşeni sayfa açılırken, client ise ilgili alan ekranda göründüğünde yükleyebilir.
Bu seçim imkânı, her etkileşimli alanın aynı anda çalıştırılmasını önler. Ancak performansın yalnızca Astro kullanılarak kendiliğinden garanti edilmediği unutulmamalıdır. Büyük görseller, ağır üçüncü taraf betikleri ve yanlış yükleme tercihleri yine sayfayı yavaşlatabilir.
Astro Proje Yapısı Nasıl Düzenlenir?
Yeni bir Astro projesinde kaynak kodları çoğunlukla src klasöründe bulunur. public klasörü ise derleme işleminden geçirilmeden yayımlanacak yazı tipleri, simgeler ve robots.txt gibi dosyalar için kullanılır. Projenin davranışları astro.config.mjs içinde, bağımlılıkları ve çalışma komutları package.json içinde tutulur.
Sayfalar ve Bileşenler
Astro’da src/pages zorunlu bir klasördür. Buraya eklenen desteklenen dosya türleri, klasör ve dosya adlarına göre otomatik olarak URL rotalarına dönüşür. Örneğin src/pages/iletisim.astro dosyası, sitenin /iletisim adresini oluşturur.
Tekrar kullanılacak başlık, kart, gezinme alanı veya içerik kutuları genellikle src/components altında saklanır. Ortak sayfa iskeletleri için src/layouts tercih edilebilir. components ve layouts klasör adları yaygın bir düzen olsa da zorunlu değildir; src/pages dışındaki kaynak klasörleri projenin ihtiyacına göre yeniden düzenlenebilir.
Astro Dosyalarındaki Frontmatter Alanı
.astro uzantılı dosyaların üst kısmında üç kısa çizgi arasında frontmatter bölümü bulunabilir. Bileşen içe aktarma, değişken tanımlama ve sayfa verilerini hazırlama işlemleri bu alanda yapılır. Alt bölümde ise HTML ile Astro şablon yapısı birlikte kullanılır.
Farklı başlangıç temalarını incelerken public klasörüne eklenen görsellerin otomatik işlenmediğini fark ettik. Görsel optimizasyonundan yararlanılması gereken dosyaları doğrudan public içine taşımak yerine src altında yönetmek daha kontrollü bir sonuç verebilir. Klasör düzeni kullanılan tema ve Astro sürümüne göre küçük farklılıklar gösterebildiği için değişiklik yapmadan önce mevcut astro.config.mjs dosyasını kontrol etmek gerekir.
Astro ile Site Nasıl Yayımlanır?
Astro sitesi varsayılan ayarlarla statik olarak oluşturulabilir. Proje bir GitHub, GitLab veya Bitbucket deposuna aktarıldıktan sonra Vercel’e bağlanabilir. Vercel Astro’yu algılayarak gerekli temel derleme ayarlarını otomatik biçimde yapılandırır. Statik kullanımda ek bir Vercel adaptörüne ihtiyaç duyulmaz.
Sunucu tarafında istek anında içerik üretilecekse @astrojs/vercel adaptörü eklenebilir. 2026 itibarıyla resmi Astro belgelerinde statik dağıtım ile istek anında oluşturulan sayfalar ayrı seçenekler olarak açıklanmaktadır. Bu nedenle tema kurulumunda verilen komutları uygulamadan önce projenin statik mi yoksa sunucu destekli mi çalışacağını belirlemek önemlidir.
Kurulum, bağlantı veya cihaz tarafındaki teknik bir sorun nedeniyle işlemleri tamamlayamıyorsanız 11858 üzerinden destek alınabilir. 11858, 2011 yılından beri Türkiye genelinde 7/24 hizmet verir; bilgisayar, modem, akıllı TV ve sosyal medya gibi alanlarda uzaktan teknik destek sağlar. TeamViewer ve AnyDesk gibi lisanslı araçlarla çalışan hizmet, dakika bazlı ücretlendirme uygular ve 500.000’den fazla başarılı işlem tecrübesine sahiptir.
Web projesinin teknik çatısı kadar sayfa yerleşimi, içerik planı ve kullanıcı deneyimi de önem taşır. Tasarım aşamasında otomasyon araçlarından yararlanmayı düşünüyorsanız Yapay Zeka ile Web Site Tasarımı Nasıl Yapılır içeriği, görsel yapı ile teknik altyapıyı birlikte planlamanıza yardımcı olabilir.
Astro Nedir sorusunun yanıtı, yalnızca bir statik site oluşturucu tanımıyla sınırlı değildir. Astro, içeriğin merkezde olduğu ve yalnızca belirli alanların etkileşim gerektirdiği projelerde güçlü bir tercih olabilir. Siz Astro ile bir proje geliştirdiyseniz performans, kurulum veya tema düzenleme sırasında karşılaştığınız deneyimi yorumlarda paylaşabilirsiniz.
