Astro, webin temellerine geri dönüş

 (websmith.studio)
17 puan yazan GN⁺ 2025-07-10 | 1 yorum | WhatsApp'ta paylaş

"Astro, geliştiriciler için en iyi framework"

  • Astro, içerik odaklı web siteleri için optimize edilmiş yeni nesil bir web framework'ü olup, varsayılan olarak Zero JavaScript politikası, üstün performans ve kolay bir geliştirme deneyimi sunar
  • Island Architecture adlı benzersiz bir yaklaşımla JavaScript'i yalnızca gerekli bölümlere uygular, geri kalanını ise hızlı statik HTML olarak işler
  • Astro siteleri, geleneksel React tabanlı yapılara kıyasla %40'tan daha hızlı yükleme hızı gösterir; bu da SEO, kullanıcı deneyimi ve dönüşüm oranı gibi alanlarda somut faydalar sağlar
  • Diğer framework'lerden farklı olarak veri mantığı ile frontend bileşenleri net biçimde ayrılmıştır ve React·Vue gibi çeşitli framework'lerle birlikte kullanılabilir
  • Ancak SPA, karmaşık durum yönetimi veya büyük ölçekli routing gereken durumlarda Next.js gibi mevcut framework'ler daha uygun olabilir

Astro nedir

  • Astro, 2021'de ortaya çıkan bir web framework'ü olup, karmaşık uygulamalar için tasarlanan mevcut JS framework'lerinden farklı olarak içerik odaklı sitelere odaklanacak şekilde tasarlanmıştır
  • Temel felsefesi "önce içerik, önce sunucu, varsayılan olarak Zero JavaScript" olup, araç setinin sezgisel ve kolay olması da güçlü yönlerinden biridir
Reklam

Island Architecture

  • Astro, "Island Architecture" kavramını benimseyerek sayfanın tamamına değil yalnızca gerekli kısımlara JavaScript uygular
  • Blog yazısı gibi büyük ölçüde metinden oluşan sayfalar yalnızca HTML olarak render edilir; yorumlar veya carousel gibi etkileşim gerektiren bölümlerde ise sadece gerekli JS yüklenir
  • Bu sayede sayfalar son derece hızlı ve hafif olur

Gerçek performans ve etkiler

  • Astro tabanlı siteler, geleneksel React framework'lerinden %40'tan daha hızlı yükleme performansı kaydeder
  • Bu performans artışı arama motoru sıralaması, kullanıcı memnuniyeti ve dönüşüm oranı gibi iş sonuçlarına yansır
  • Yavaş cihazlarda ve düşük hızlı ağ ortamlarında hız farkı çok daha belirgin hissedilir

Geliştirici deneyimi (Developer Experience)

  • Proje kurulumu basittir ve "Houston" adlı kullanıcı dostu kurulum yardımcısı rehberlik eder
  • Astro bileşenleri, yalnızca build time'da çalışan mantığı (ör. veri çekme, API çağrıları vb.) destekler
  • Karmaşık durum yönetimi, lifecycle ve hook'larla uğraşmadan yalnızca gerektiğinde istemci tarafı JS kullanmak mümkündür

Çeşitli framework'lerle uyumluluk

  • React, Vue gibi başlıca framework'ler Astro ile serbestçe birlikte kullanılabilir
  • Örneğin yönetici paneli React, veri görselleştirme Vue, geri kalan kısımlar ise Astro ile oluşturulabilir

Gerçekten işe yarayan kolaylıklar

  • Markdown, tıpkı bir bileşen gibi doğrudan import edilip kullanılabilir
  • TypeScript, Sass, görsel optimizasyonu, hot module replacement gibi modern build pipeline desteği sunar
  • Statik site / SSR / hibrit render seçeneklerinin tümü kullanılabilir; proje yapısına göre esnek biçimde uygulanabilir
Reklam

Astro'nun parladığı alanlar

  • Pazarlama siteleri, bloglar, e-ticaret katalogları, portföyler gibi içerik odaklı sitelerde üstün performans gösterir
  • Karmaşık istemci tarafı durum yönetimi gerektirmeyen ortamlarda idealdir

Trade-off'lar

  • SPA, karmaşık routing veya bileşenler arası durum paylaşımı önemliyse Next.js gibi başka framework'ler daha uygun olabilir
  • Ekosisteminin ölçeği hâlâ küçük ve dosya tabanlı routing büyük projelerde sınırlayıcı hissedilebilir

Hızlı başlama yöntemi

  • npm create astro@latest my-site
  • Gerekirse npx astro add react gibi komutlarla framework ekleyin
  • src/pages/ içine sayfaları, src/components/ içine bileşenleri ekleyip geliştirmeye başlayın

Astro'nun anlamı

  • Son dönemde JS framework'leri giderek daha karmaşık hâle gelirken, Astro webin temellerine (hızlı ve erişilebilir, içerik odaklı deneyime) geri dönüyor ve aynı zamanda geliştirme kolaylığını da koruyor
  • "Hızlı siteler varsayılan olsun, etkileşim yalnızca gerektiği yere eklensin, istenen framework özgürce kullanılabilsin" şeklindeki tasarım felsefesi geliştiricileri memnun ediyor
  • Bloglardan e-ticarete kadar içerik odaklı projeler için Astro'yu güçlü biçimde önermek mümkün

İlgili okumalar

1 yorum

 
GN⁺ 2025-07-10
Hacker News görüşleri

  • Geleneksel web framework'leri her zaman tüm sayfayı JavaScript ile "hydrate" etti; örneğin basit bir blog yazısında yalnızca tek bir interaktif widget olsa bile, her şey JavaScript ile işleniyordu. Astro ise varsayılan olarak statik HTML kullanıyor ve yalnızca gereken bölümleri "JavaScript islands" olarak çalıştırıyor. Eskiden bu yaklaşıma "progressive enhancement" ya da sadece "web sayfası" denirdi ve web sitesi yapmanın standardı buydu. Sonra SPA'ler ortaya çıktı ve progressive enhancement giderek daha az kullanılır oldu. Şimdi buna "JavaScript islands" deniyor ama sonuçta eski yönteme geri dönülmüş durumda. İlgilenen yeni web geliştiricilerine progressive enhancement kavramını tavsiye etmek isterim

    • İnsanlar bazen yeni bir aracın özellik açıklamasını duyunca bunun eskiden yaptığımız şeyle aynı olduğunu sanıyor. Ama Astro'nun asıl değeri, farklı JavaScript framework'leriyle entegre olup HTML'in yalnızca belirli alt ağaçlarını ayrı ayrı işleyebilmesi. Bu sırada başlangıç durumu string olarak render ediliyor ve istemci tarafında önceden alınmış verilerle hydrate ediliyor. React/Svelte/Solid/Vue gibi framework'leri sayfanın yalnızca bir bölümünde kullanmak ve veriyi sunucudan önceden yüklemek istediğinizde değeri ortaya çıkıyor. Ancak bu yaklaşım "progressive enhancement" değil. Hydration öncesi HTML'in düzgün çalışması gerekmiyor; örneğin bir <form> JavaScript olmadan çalışmasa da olur. İşte bu tür ayrıntılar, alaycı olmak yerine merakla yaklaşıldığında fark edilebiliyor

    • Kesinlikle katılıyorum, Astro harika bir araç ama en zorlayıcı yanı, 2010'dan sonra işe giren geliştiricilerin web'in nasıl çalıştığını açıklamak için uydurduğu türlü türlü terimi anlamaktı

    • Yeni bir kavram değil ama bugünkü yaklaşım çok daha rafine hissettiriyor. Eskiden PHP ve jQuery ile interaktif web yapıyorduk; bu, React ve SPA'lerden önceki dönemdi. Şimdi dönüp bakınca mimari olarak eski yöntem daha zarifti ama o zamanlar debugging ve DX gerçekten berbattı. PHP ile frontend debugging yaptığım günlere dönmek istemem. SPA'lerin karmaşık dashboard'larda ve interaktif uygulamalarda hâlâ yeri var. Astro, sunucu ve istemci kodunu tek yerde yönetmeyi sağlıyor ve ayrımı da net yaptığı için veriyi PHP ile parse edip JS'e aktarmaya gerek bırakmadan DX'i ciddi biçimde iyileştiriyor

    • Buna AJAX denilen zamanları hatırlıyorum. Tamamen akıştan kopmuşum gibi hissediyorum

    • İlk dönem web framework'lerinin stateless web siteleri ve server-side rendering konusunda gerçekten doğru yaklaşımı benimsediğini düşünüyorum

  • Ben şahsen Astro'yu güçlü biçimde tavsiye ederim. Başta onu sadece "html ve css'e include özelliği eklenmiş bir araç" sanmıştım ama kişisel web sitemde ve Matrix Conference sitesinin yenilenmesinde kullanınca gerçekten zahmetsiz ve keyifli olduğunu gördüm
    Astro'nun başlıca avantajları:

    • Hâlâ html ve css odaklı olması
    • Build sonrası varsayılan olarak js gerektirmemesi
    • Yalnızca interaktivite gereken yerlere seçmeli olarak js eklenebilmesi
    • Content collections özelliğinin temiz olması
    • Hız optimizasyonunun son derece iyi yapılmış olması ve maintainer'ların ne yaptığını bilmesi
    • Geliştirme için bir Devbar sunması; bu da sitenin daha hızlı olabileceği alanları görsel olarak gösteriyor (ör. ekran altındaki görseller için lazy load)
    • CSS minifier'ın bazı CSS'leri inline ederek ek sorguları azaltması
    • Image component'in content layout shift'i önlemek için width/height niteliklerini otomatik ayarlaması ve responsive image sunması

    • Eğer Astro, html ve css merkezli olup yalnızca gerektiğinde js ekliyorsa, dosya dizininde doğrudan .html, .css, .js dosyaları oluşturup dağıtmak da aynı deneyimi vermez mi? Hatta geliştirme zamanı overhead'i ve gereksiz bloat olmadan daha hızlı olmaz mı diye düşünüyorum. Ayrıca CSS'i inline etmenin performans açısından gerçekten büyük bir sorun olduğu pek görülmedi. Yüzlerce web sitesi deneyimimde CSS'in darboğaz olduğu durum neredeyse hiç olmadı; asıl sorun genelde ağdı

    • Tek ciddi hayal kırıklığım, routing karmaşıklaştıkça soyutlamanın çok hızlı artması ve bunun işleri daha da kafa karıştırıcı hâle getirmesiydi. Karmaşıklık kaçınılmaz olarak friction getiriyor; bu yüzden sonunda başka bir yaklaşım seçtim

    • Eğer ihtiyacınız olan şey "html ve css için include özelliği" ise, nginx gibi sıradan bir web sunucusunda server-side includes'ı etkinleştirip kullanabilirsiniz. 20 yılı aşkın süredir kararlı çalışan ve neredeyse hiç bakım istemeyen bir çözüm. Template engine gibi ek güvenlik riskleri de getirmiyor; gereksiz tekrarları önlerken backend zafiyeti kaygısı olmadan saf include kullanabiliyorsunuz

    • 20 yıl veri/backend tarafında çalıştıktan sonra bir frontend projesi yüzünden geri döndüm; React ile zorlandıktan sonra Astro+Svelte'e geçtim ve sonuç gerçekten çok başarılı oldu. HTML/CSS merkezli olduğu için kod yapısı öngörülebilir ve temiz. Frontend'i React geçmişi olan bir geliştiriciye devrettiğimde o da neredeyse anında uyum sağladı

  • "Geleneksel framework" ifadesinin SPA/Virtual DOM framework'lerini kastedecek şekilde kullanıldığını görünce kuşak farkını hissediyorum. Backbone, jQuery gibi şeyler gerçek anlamda geleneksel web framework'lerdi ve blog yazısındaki açıklamaya benzer şekilde çalışıyorlardı

    • "Geleneksel" sonuçta ne zaman doğduğunuza bağlı bir şey bence. Benim için geleneksel internet; 56k modem, vbulletin forumlar, GTA:VC mod'ları, IRC vb. Daha yaşlı nesil için BBS, daha genç nesil içinse Discord "geleneksel" internet olabilir. Siyasette de benzer bir durum var; herkes gençliğindeki dönemin daha iyi olduğunu düşünmeye eğilimli

    • Backbone'u saf SPA için istemci tarafı MVC'yi hedefleyen bir şey olarak hatırlıyorum

  • Astro, NextJS gibi SSR framework'lerinin neden SvelteKit'teki gibi dinamik rotalara sahip statik sayfaları desteklemediğini merak ediyorum. Örneğin /todos/[todoId] gibi bir sayfa NextJS'te statik bundle'ın içine hiç konulamıyor. SvelteKit ise 404.html kullanarak gerçekte 404 olsa da Cloudflare ya da mobil webview ortamlarında kusursuz çalışıyor. Özellikle mobil webview bundling senaryolarında bu çok kullanışlı

    • Kısmen katılıyorum ama bu tasarımın dezavantajları da var. /todos/123 gibi bir URL'yi SPA'de hard reload yaparsanız, sunucu gerçekten o dosya var mı diye ister ve yoksa 404 döner. Bu yüzden 404 sayfasında istemci routing'iyle verinin yeniden yüklenip işlenmesi gerekir; yani nginx gibi bir HTTP sunucusu yapılandırması şarttır. Başka bir deyişle, saf statik dosyalarla bu mümkün değildir. Ayrıca HTTP spesifikasyonuna göre tarayıcı önbelleği 404 yanıtlarını asla saklamaz. Bu nedenle hard reload veya yer iminden girişte cache'den hiç yararlanamazsınız. Eğer bu kurulum yük geliyorsa, /todo?id=123 gibi query parametreleri kullanmak belki daha iyi olabilir

    • Yanlış anlamış olabilirim ama Next ya da Astro'nun static build'inde de dinamik routing/sayfa uyguladım. CMS olarak contentful veya storyblok kullandığımda editörün serbestçe route ve component oluşturmasına izin verdik ve [...slug] deseniyle tüm rotaları kapsadık. getStaticPaths fonksiyonunu kullanarak tüm sayfaları önceden ürettik. ISR/ISP seçeneğini açınca build anında bilinmeyen sayfalar da dinamik olarak pre-render ediliyor. Next'te buna dynamic routes, Astro'da dynamic pages deniyor
      Referans: Next dynamic routes, Astro dynamic pages

    • Belki yanlış anladım ama Astro'daki getStaticPaths fonksiyonu istediğiniz şeyi destekliyor gibi görünüyor
      Referans

    • Ben de statik dağıtımı seviyorum; bilgi olması açısından söyleyeyim, NextJS de static parameter generation destekliyor

    • Astro'yu ya da çeşitli framework'leri tamamen anlamış değilim ama belki Astro'nun server islands özelliği aradığınız şeye benziyordur, bakmanızı öneririm

  • Frontend tartışmalarının kendisini fazla kafa karıştırıcı buluyorum. Yazıda anlatılan şey de sonuçta "tarayıcıyı bir HMI olarak mı kullanacağız, yoksa bir uygulama çalışma zamanı olarak mı" sorusuna çıkıyor. Ama tartışmaların çoğu "taze hissettiriyor", "hızlı yükleniyor" gibi muğlak iddialara dayanıyor. Framework'lerin bir marka gibi pazarlanma biçimi bana fazlasıyla moda endüstrisini hatırlatıyor

    • Bence frontend framework tartışmalarını açıklamak için en iyi benzetme tam da moda endüstrisi. "content-driven", "server-first" gibi iddialar neredeyse hiç teknik olarak titiz biçimde ele alınmıyor

    • "Hızlı yükleniyor" ifadesinin bir yanılsama olduğunu söylemek bana pek anlamlı gelmiyor; bu gerçekten önemli bir unsur

  • Kısa süre önce bir sağlık kurumu web sitesini Astro ile yaptım; eskiden WordPress ile yapmaktan çok daha kolaydı ve Netlify gibi yerlerde ücretsiz host edilebildiği için hacklenme derdi de olmuyor. Hatta git tabanlı basit bir CMS bile kurdum, böylece müşteri içeriği doğrudan düzenleyebiliyor. Web geliştirmenin gerçekten çok ilerlediğini hissettim

    • Bunu tanıdığınız biri rica ettiği için mi yaptınız, yoksa sağlık kurumu sitesi işi nasıl bulunuyor merak ettim

    • Netlify'ın Vercel'e göre bant genişliği ücretleri daha yüksek, buna dikkat etmekte fayda var

  • Astro'nun en büyük artısı, React ya da Vue gibi başka framework'lere bağımlı olmadan yalnızca HTML veya Web Component ile çalışabilmesi. Ama Astro da Next, Nuxt gibi SSR, ISR, SSG ve middleware destekliyor
    Fark yaratan yanı island architecture; bu sayede micro frontend uygulanabiliyor
    Örneğin aynı şirkette farklı ekipler ödeme, sepet ve ürün sayfasını ayrı ayrı geliştirse bile bunları tek bir sayfada birleştirmek mümkün ve render yöntemini doğrudan kontrol edebiliyorsunuz. Global state de paylaşılabildiği için ekipler bağımsız biçimde uçtan uca sorumluluk alıp kendi bölümlerini geliştirip dağıtabiliyor
    Tabii bu yapı daha çok büyük projelere uygun bir çözüm. Her ekip React'i kendi usulünce kullanırsa farklı sürümler birbirine karışıyor; Astro gibi mimari bir ayrım bunu çözebiliyor
    Şahsen web'i tamamen değiştirip değiştirmeyeceğinden emin değilim. Bana biraz, Next/Nuxt'taki framework bağımlılığının kaldırılıp island architecture eklenmiş hâli gibi geliyor. Yine de denemenizi öneririm
    React/Vue'dan çıkıp web-component'a geçmek ya da Next/Nuxt yerine bir şey kullanmak istiyorsanız, Astro'yu kademeli geçiş için tavsiye ederim

  • Benim için Astro her durumda kusursuz değil. Bazen yalnızca offline rendering gerekiyorsa, illa JavaScript kullanmak için kendinizi zorlamanın anlamı olmuyor
    Island architecture'ın da sınırları var ve build çıktısı çoğu zaman gereğinden fazla inline hâle geliyor
    Dürüst olmak gerekirse Astro hype'ının önemli kısmı bence Vite sayesinde; Vite gerçekten müthiş

    • "Island architecture'ın sınırlarına dayandığı anlar" derken tam olarak neyi kastediyorsunuz diye sormak isterim

  • Next.js'in React için standart framework olarak önerilmemesi gerektiğini düşünüyorum. Frontend tarafında daha eleştirel düşünmeye ihtiyaç var. Remix (React Router v7) ya da TanStack çok daha iyi alternatifler

    • Ben de katılıyorum. Next.js'in potansiyeli vardı ama Vercel işin içine girdikten sonra çok gerilediğini hissediyorum. v10'dan beri kullanıyorum; v13'teki kaos döneminden v15'e kadar yaşadıklarım beni epey hayal kırıklığına uğrattı. React ve Next.js o kadar hızlı değişiyor ki yetişmek imkânsız. Gerçekten ihtiyaç duyulan değişimden çok, değişim uğruna değişim varmış gibi geliyor

    • Hatta React'in kendisini varsayılan framework olarak önermeyi bile bırakmak isterim. Frontend geliştirme için HTML/CSS/JS çok daha iyi bence

    • Remix/React Router v7'nin doğru yönde olduğunu düşünüyorum. Özellikle Remix preact kullanıp web standartlarını merkeze alırsa, daha sağlam web siteleri üretme anlayışına dönüş olabilir diye umut ediyorum. Yine de Remix'ten RR7'ye geçiş çok pürüzsüz değildi; projeyi yeniden yazmak zorunda kaldım

  • Web'in temel ilkelerinin hâlâ geçerli olduğunu düşünüyorum. PHP, Spring, Quarkus, ASP.NET MVC kullanan geliştiriciler için JS framework tabanlı web geliştirmenin ne kadar zorlaştığı çok görünmeyebilir. Sektördeki moda odaklı atmosfer yüzünden temellere geri dönmek kolay değil gibi geliyor bana