Ulaşım
- Adres:2342 Sk, İpekyol, İpek Ap 49A, 63250 Haliliye/Şanlıurfa
- Telefon:
0542 315 45 37 - eMail: info@alestaweb.com
Modern web geliştirme dünyası giderek daha hızlı sayfalara, daha az JavaScript yüküne ve daha akıcı geçiş animasyonlarına yöneliyor (faster pages, less JavaScript, smoother transitions). Astro 5, bu üç hedefi birden yakalayan ve özellikle içerik odaklı siteler için en güçlü seçenek olmaya devam ediyor. Alesta Web ekibi olarak bu rehberde Astro 5'in en dikkat çeken iki yeniliğini — View Transitions ve Server Islands — adım adım öğreteceğiz.
Astro, içerik odaklı (content-driven) web siteleri için tasarlanmış modern bir web framework'üdür. En büyük farkı: varsayılan olarak sıfır JavaScript üretir (zero JavaScript by default). Yani sayfanız sadece statik HTML olarak yayınlanır, sadece interaktif olması gereken kısımlar JavaScript ile zenginleştirilir. Bu yaklaşıma "Islands Architecture" (adacık mimarisi) deniyor.
Astro 5 sürümü, framework'ün en büyük yenilik dalgasını getirdi: Content Layer API, Server Islands, asset bundling iyileştirmeleri ve tip güvenli routing (type-safe routing) gibi özellikler dahili olarak geldi. Alesta Web uzmanları, blog ve dökümantasyon sitelerinde bu sürümün geçiş yapılmaya değer olduğunu düşünüyor.
Astro'nun rakipleri arasında React tabanlı Next.js, Vue tabanlı Nuxt ve SvelteKit var. Astro'nun avantajı? UI framework agnostic olması — yani React, Vue, Svelte ve Solid bileşenlerini aynı projede yan yana kullanabilirsiniz (use side by side).
Astro 5 kurulumu son derece basit. Tek bir komutla interaktif bir kurulum sihirbazı başlatabilirsiniz. Alesta Web olarak Node.js 20+ kurulu olduğunu varsayıyoruz.
# İnteraktif kurulum sihirbazını başlat
npm create astro@latest
# Veya doğrudan parametrelerle
npm create astro@latest -- --template minimal --typescript strict
Sihirbaz size proje adı, şablon (blog, dökümantasyon, portfolyo), TypeScript modu ve git başlangıç tercihlerini soracaktır. Yeni başlıyorsanız minimal şablonu öneriyoruz.
cd my-astro-site
# Bağımlılıkları kur (eğer otomatik kurulmadıysa)
npm install
# Dev server'ı başlat
npm run dev
Tarayıcınızda http://localhost:4321 adresine gidin. Astro karşılama sayfasını gördüyseniz, kurulum tamamlanmıştır.
View Transitions API tarayıcılar için W3C standardıdır ve Astro 5 bunu first-class olarak destekliyor. Eskiden sadece SPA'larda (Single Page Application) bulabileceğiniz akıcı sayfa geçişlerini, artık geleneksel multi-page site'larda da yaşayabilirsiniz (smooth transitions in MPAs).
Tek satır kod ile tüm site genelinde aktif:
---
// src/layouts/Layout.astro
import { ClientRouter } from 'astro:transitions';
---
<html>
<head>
<ClientRouter />
</head>
<body>
<slot />
</body>
</html>
Bu basit ekleme ile sayfalar arası geçişler artık tam sayfa yenilemesi yerine yumuşak geçişlerle gerçekleşir. Kullanıcı deneyimi açısından devasa fark yaratır (huge UX improvement). alestaweb.com üzerindeki blog ve dökümantasyon sayfalarımızda da benzer bir yaklaşım kullanıyoruz.
---
// Bir blog yazısı kartı
const post = { id: 'post-1', title: 'Astro 5 Rehberi', image: '/img/astro.png' };
---
<a href={`/blog/${post.id}`}>
<img
src={post.image}
transition:name={`hero-${post.id}`}
transition:animate="slide"
/>
<h2 transition:name={`title-${post.id}`}>{post.title}</h2>
</a>
Bu örnekte tıklanan kartın görseli ve başlığı, açılan detay sayfasındaki karşılığına yumuşak şekilde "morphing" yapacaktır (smoothly morphs into the detail page).
View Transitions, Chrome 111+, Safari 18+ ve Firefox 134+ sürümlerinde destekleniyor. Desteklemeyen tarayıcılarda otomatik olarak normal sayfa geçişine düşer (graceful fallback). Yani kullanıcı kaybetmezsiniz — sadece animasyon olmaz.
Astro 5'in en heyecan verici yeniliği Server Islands. Şöyle düşünün: sayfanızın çoğu bölümü statik (HTML olarak önceden üretilmiş ve CDN'de saklanır). Ama bazı bölümler — örneğin "şu an çevrimiçi olan kullanıcı sayısı", "kişiselleştirilmiş ürün önerileri" veya "anlık fiyat" gibi — sunucudan dinamik olarak gelmeli (must come from the server dynamically).
Server Islands tam olarak bunu yapmanızı sağlar: statik bir sayfanın içine sunucu tarafı render edilen küçük bir adacık yerleştirebilirsiniz. Alesta Web ekibi olarak bu özelliği özellikle e-ticaret ve haber sitelerinde değerli buluyoruz.
---
// src/components/UserGreeting.astro
const user = await getUserFromCookie(Astro.cookies);
---
<div class="greeting">
{user
? <p>Hoş geldin, {user.name}!</p>
: <p>Misafir kullanıcı</p>}
</div>
---
// src/pages/index.astro
import UserGreeting from '../components/UserGreeting.astro';
---
<html>
<body>
<h1>Hoş Geldiniz</h1>
<!-- Bu kısım statik (CDN'den hızlı yüklenir) -->
<p>Sitemize hoş geldiniz...</p>
<!-- Bu adacık sunucudan dinamik gelir -->
<UserGreeting server:defer>
<div slot="fallback">Yükleniyor...</div>
</UserGreeting>
</body>
</html>
server:defer direktifi, bu bileşenin sayfanın geri kalanı CDN'den hızlıca gelirken arka planda sunucudan getirilmesini sağlar. Sayfanın ilk içerik gösterimi (LCP, Largest Contentful Paint) hızlı kalır, dinamik içerik ise hemen ardından gelir.
Server Islands için projenizde bir SSR adapter (Node.js, Vercel, Netlify, Cloudflare vb.) yapılandırılmış olmalı. Tamamen statik bir sitede bu özellik çalışmaz (won't work in pure static site).
---
// src/pages/blog/[slug].astro
const { post } = Astro.props;
---
<article>
<img
src={post.coverImage}
transition:name={`cover-${post.slug}`}
/>
<h1 transition:name={`title-${post.slug}`}>
{post.title}
</h1>
<div class="content">
{post.content}
</div>
</article>
---
// src/components/Recommendations.astro
const userId = Astro.cookies.get('userId')?.value;
const recommendations = await fetchRecommendations(userId);
---
<section class="recs">
<h2>Size Özel Öneriler</h2>
<ul>
{recommendations.map(item => (
<li>{item.title}</li>
))}
</ul>
</section>
Sayfa içinde:
<Recommendations server:defer>
<div slot="fallback">
<p>Öneriler hazırlanıyor...</p>
</div>
</Recommendations>
Astro 5'in performans iddiası abartı değil. Alesta Web laboratuvarında orta büyüklükte bir blog sitesini React tabanlı bir framework'ten Astro 5'e taşıdığımızda gördüğümüz farklar:
| Metrik | React SPA | Astro 5 |
|---|---|---|
| JavaScript bundle boyutu | ~250 KB | ~10 KB |
| First Contentful Paint (FCP) | ~1.8s | ~0.6s |
| Largest Contentful Paint (LCP) | ~2.4s | ~1.0s |
| Time to Interactive (TTI) | ~3.2s | ~1.1s |
| Lighthouse Performance | 68 | 98 |
Sonuç: hem kullanıcı deneyimi hem SEO açısından devasa kazanım. Google'ın Core Web Vitals değerlendirmesinde "Good" skorlarına ulaşmak çok kolaylaşıyor (much easier to hit Good scores).
View Transitions için bazı durumlarda SSR adapter gerekir.
# Node adapter ekle
npx astro add node
# Veya Vercel/Netlify/Cloudflare için
npx astro add vercel
Aynı sayfada birden fazla elemana aynı transition name verirseniz tarayıcı hata verir. Genelde liste içinde olur.
<!-- ❌ Yanlış: tüm öğeler aynı isim alır -->
{posts.map(p => <img transition:name="hero" />)}
<!-- ✅ Doğru: her öğe benzersiz isim -->
{posts.map(p => <img transition:name={`hero-${p.id}`} />)}
Server Island bileşeniniz async ise mutlaka top-level await kullanın ve veri kontrolü yapın.
---
const data = await fetchData();
if (!data) return Astro.redirect('/error');
---
Bu rehberde kullanılan bilgiler aşağıdaki güvenilir kaynaklardan derlenmiştir (information from reliable sources):
Alesta Web olarak tüm kod örneklerini Astro 5.0+ sürümünde test ettik (verified on Astro 5.0+).
Astro 5, içerik odaklı modern web siteleri için bugünün en güçlü seçeneklerinden biri. View Transitions ile SPA hissini multi-page sitelerde yaşayabilir, Server Islands ile statik ve dinamik içeriği bir arada sunabilirsiniz. Sıfır JavaScript ile başlayıp sadece ihtiyaç olan yerlerde interaktivite ekleme yaklaşımı, performans skorlarını uçuruyor.
Hızlı Özet / Quick Summary:
Faydalı Linkler / Useful Links:
© 2026 Alesta Web — Tüm hakları saklıdır. Modern web framework'leri ve yüksek performanslı site geliştirme konularında profesyonel destek için alestaweb.com üzerinden iletişime geçebilirsiniz.