Ulaşım
- Adres:Batıkent Mh. 8910 Sk. 6. Etap 1H No: 18 Yeni Toki Eyyübiye / Şanlıurfa (Yeni Alım Satım Karşısı)
- Telefon:0 (545) 528 88 93
- eMail: info@alestaweb.com
Web siteniz hem hızlı hem de dinamik olsun mu? Astro 5'in Server Islands özelliği tam da bu ihtiyaç için tasarlandı. Alesta Web olarak Astro 5'i production projelerimizde test ettik: statik sayfalarınızın belirli bölümlerini sunucu taraflı dinamik içerikle besleyebiliyorsunuz. React, Vue veya Svelte bileşenlerinizi değiştirmeden. İşte kapsamlı Astro 5 rehberi.
Astro, "islands architecture" (adacık mimarisi) kavramını öncü olarak kullanan modern bir web framework'tür. 2024 sonunda çıkan Astro 5, Server Islands ve yeniden tasarlanan Content Layer API ile büyük bir sıçrama yaptı.
"Ship less JavaScript" ❌ React/Next.js: Her şey JavaScript (hydration overhead büyük) ❌ Geleneksel SSR: Her istek için tam sayfa render ✅ Astro 5: Statik HTML + gerektiğinde dinamik "islands"
Google, The Guardian, Porsche, Nordcom ve yüzlerce büyük site Astro kullanıyor. Özellikle blog, dokümantasyon ve içerik ağırlıklı siteler için mükemmel.
İşte Astro 5'in süpergücü. Şöyle düşünün: ana sayfanız statik HTML olarak cache'de duruyor (ultra hızlı). Ama kullanıcıya özel içerik (sepet, kullanıcı profili, canlı fiyat) var mı? Sadece o kısım sunucudan dinamik geliyor — sayfanın geri kalanı etkilenmiyor.
Geleneksel Next.js SSR: İstek → Sunucu tüm sayfayı render eder → Kullanıcıya gönder Problem: Bir kullanıcıya özel alan için tüm sayfa gecikiyor! Astro 5 Server Islands: İstek → Statik HTML anında gelir (CDN'den) → Dinamik "island" paralel yüklenir → Sadece değişen kısım güncellenir ✅
Astro 5'in diğer büyük yeniliği: Content Layer API. Artık sadece yerel Markdown dosyaları değil, herhangi bir veri kaynağını içerik olarak kullanabilirsiniz.
✅ Yerel Markdown/MDX dosyaları (local files) ✅ CMS: Contentful, Sanity, Storyblok ✅ REST API uç noktaları (REST API endpoints) ✅ GraphQL sorguları (GraphQL queries) ✅ Veritabanı (Database): MySQL, PostgreSQL ✅ RSS/Atom feed'leri ✅ Google Sheets, Airtable
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
// Yerel dosyalardan koleksiyon
const blog = defineCollection({
loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
schema: z.object({
title: z.string(),
date: z.date(),
tags: z.array(z.string()),
}),
});
// Harici API'dan koleksiyon
const urunler = defineCollection({
loader: async () => {
const res = await fetch('https://api.alestaweb.com/products');
return res.json();
},
schema: z.object({
id: z.string(),
name: z.string(),
price: z.number(),
}),
});
export const collections = { blog, urunler };# Astro 5 projesi oluştur
npm create astro@latest benim-projem
# Şablonlar arasından seç:
# ● Empty (sıfırdan başla)
# ● Blog (blog şablonu)
# ● Portfolio (portfolio şablonu)
# Proje dizinine gir
cd benim-projem
# Bağımlılıkları kur
npm install
# Geliştirme sunucusunu başlat
npm run dev
# → http://localhost:4321# React ekle
npx astro add react
# Vue ekle
npx astro add vue
# Tailwind CSS ekle
npx astro add tailwind
# SSR için Node.js adapter ekle
npx astro add nodeimport { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import node from '@astrojs/node';
export default defineConfig({
output: 'hybrid', // Statik + SSR karma mod
adapter: node({ mode: 'standalone' }),
integrations: [react()],
});---
// src/components/KullaniciSepeti.astro
// Bu bileşen server-side render olacak
const { userId } = Astro.props;
// Sunucuda çalışır - API'dan veri çek
const sepet = await fetch(`/api/cart/${userId}`).then(r => r.json());
---
<div class="sepet">
<h3>Sepetiniz ({sepet.items.length} ürün)</h3>
{sepet.items.map(urun => (
<div class="urun">
<span>{urun.name}</span>
<span>₺{urun.price}</span>
</div>
))}
</div>---
// src/pages/index.astro
import KullaniciSepeti from '../components/KullaniciSepeti.astro';
---
<html>
<body>
<!-- Statik içerik - CDN'den anında gelir -->
<h1>Alesta Web'e Hoş Geldiniz</h1>
<nav>...</nav>
<!-- Server Island - server:defer ile işaretle -->
<KullaniciSepeti server:defer userId={userId}>
<!-- Yüklenirken gösterilecek fallback -->
<div slot="fallback">Sepet yükleniyor...</div>
</KullaniciSepeti>
<!-- Geri kalan statik içerik -->
<footer>...</footer>
</body>
</html>Astro 5 ile sayfalar arası geçişler artık SPA (Single Page Application) gibi hissettiriyor — tam sayfa yenileme olmadan.
---
// src/layouts/Layout.astro
import { ViewTransitions } from 'astro:transitions';
---
<html>
<head>
<ViewTransitions /> <!-- Bu kadar! -->
</head>
<body>
<slot />
</body>
</html>View Transitions eklendikten sonra sayfalar arası geçişler otomatik olarak animasyonlu hale gelir. Hiç JavaScript yazmadan native browser API kullanılır.
Lighthouse Skorları (Astro 5): Performance: 98/100 ✅ Accessibility: 97/100 ✅ Best Practices: 100/100 ✅ SEO: 100/100 ✅ Core Web Vitals: LCP (Largest Contentful Paint): 0.8s ✅ (2.5s altı = iyi) FID (First Input Delay): 8ms ✅ (100ms altı = iyi) CLS (Cumulative Layout Shift): 0.02 ✅ (0.1 altı = iyi)
# Vercel (en kolay)
npm install @astrojs/vercel
npx astro add vercel
# Netlify
npx astro add netlify
# Cloudflare Pages (Edge)
npx astro add cloudflare
# Kendi sunucunuz (Node.js)
npx astro add node
npm run build
node ./dist/server/entry.mjs# Build al
npm run build
# dist/ klasörü oluşur
# İstediğiniz herhangi bir hosting'e yükleyebilirsiniz
# Apache, Nginx, GitHub Pages, Cloudflare Pages...
ls dist/
# → index.html, assets/, _astro/Astro 5 Server Islands ile web geliştirme gerçek anlamda evrim geçirdi. Alesta Web olarak özellikle içerik ağırlıklı siteler, e-ticaret ve kurumsal web siteleri için Astro'yu güvenle önerebiliriz. Ship less JavaScript felsefesi Core Web Vitals skorlarınızı uçuruyor.
Hızlı Özet / Quick Summary:
Faydalı Linkler / Useful Links:
© 2026 AlestaWeb - Tüm hakları saklıdır.