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
Astro Server Islands ile statik sitelerinize dinamik içerik eklemek mi istiyorsunuz? Performanstan ödün vermeden personalize içerik sunmak mı? Alesta Web olarak Astro'nun en yenilikçi özelliği olan Server Islands'ı (sunucu adaları) detaylı anlatacağız. Progressive rendering teknolojisi ile web sitenizi nasıl hızlandıracağınızı öğrenin (learn progressive rendering with server islands).
Server Islands, Astro'nun CDN'de önbelleğe alınmış hızlı statik sayfalar içinde dinamik içerik render etmek için sunduğu yeni bir mimari desenidir (new architectural pattern for rendering dynamic content). Basitçe söylemek gerekirse:
Server Islands, Astro 4.12 sürümü (Temmuz 2024) ile deneysel olarak geldi. Şu anda production'da güvenle kullanabilirsiniz (safe for production use now).
Alesta Web olarak birçok müşterimizin sitelerinde Server Islands kullanıyoruz. Sonuçlar etkileyici: %20 daha hızlı Largest Contentful Paint (LCP) skoru!
Geleneksel yöntemde (traditional method):
Server Islands ile:
1. Build Time (Yapım Zamanı): - Statik HTML oluşturulur - server:defer ile işaretli componentler özel route'a ayrılır - Placeholder script eklenir 2. Request Time (İstek Zamanı): - Kullanıcı sayfayı açar - Statik HTML anında yüklenir (cached from CDN) - Browser placeholder'ları görür 3. Runtime (Çalışma Zamanı): - Browser özel endpoint'e istek atar - Server component'i render eder - HTML olarak döner ve placeholder'a enjekte edilir
Bu yaklaşım Google'ın Core Web Vitals metriklerini önemli ölçüde iyileştirir (significantly improves Core Web Vitals). alestaweb.com'da bu tekniği kullanarak LCP skorumuzu 2.1s'den 1.7s'ye düşürdük.
| Özellik / Feature | Classic Islands | Server Islands |
|---|---|---|
| Render Yeri | Client (Browser) | Server (Backend) |
| JavaScript Yükü | Orta-Yüksek | Çok Düşük |
| İlk Render Hızı | JS indirilene kadar boş | Statik içerik anında |
| SEO | Orta (hydration gerekli) | Mükemmel (tam HTML) |
| Kullanım Senaryosu | Interaktif UI (dropdown, modal) | Dinamik içerik (login, live data) |
Alesta Web önerisi: İkisini birlikte kullanın! Server Islands dinamik içerik için, Classic Islands interaktif UI için (use both together for best results).
npm list astro
Minimum gereksinim: Astro 4.12+
Eğer eski sürümdeyseniz güncelleyin (if outdated, upgrade):
npm install astro@latest
// astro.config.mjs
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
export default defineConfig({
output: 'server', // ÖNEMLİ: hybrid veya server olmalı
adapter: node({
mode: 'standalone'
}),
experimental: {
serverIslands: true // Server Islands'ı aktifleştir
}
});
Dikkat / Warning: output: 'static' ile Server Islands çalışmaz! Mutlaka server veya hybrid kullanın.
Server Islands sadece .astro component'lerinde çalışır (only works with .astro components). React, Vue, Svelte, Solid component'lerde ÇALIŞMAZ (does not work with React, Vue, Svelte, Solid)!
Server Island oluşturmak için component'e server:defer directive'ini ekleyin (add server:defer to create server island):
--- // src/pages/dashboard.astro --- <html> <head> <title>Dashboard</title> </head> <body> <h1>Hoş Geldiniz!</h1> <!-- Statik içerik: Hızlı yüklenir --> <p>Bu sayfa statik olarak build edildi.</p> <!-- Server Island: Sunucuda render edilir --> <UserProfile server:defer /> <!-- Statik footer --> <footer>© 2026 Alesta Web</footer> </body> </html>
---
// src/components/UserProfile.astro
// Sunucu tarafında çalışır (runs on server)
const response = await fetch('https://api.example.com/user', {
headers: {
'Authorization': Astro.request.headers.get('cookie')
}
});
const user = await response.json();
---
<div class="user-profile">
<h2>Merhaba, {user.name}!</h2>
<p>Son giriş: {user.lastLogin}</p>
<p>Hesap durumu: {user.status}</p>
</div>
Bu component her ziyaretçi için sunucuda render edilir, böylece personalize içerik gösterilir (rendered on server for each visitor for personalized content).
Alesta Web deneyimi: E-ticaret sitelerinde "Sepet Özeti" ve "Önerilen Ürünler" için Server Islands kullanmak LCP'yi %18 iyileştirdi.
---
// src/components/StockWidget.astro
const productId = Astro.props.productId;
// Gerçek zamanlı stok kontrolü (real-time stock check)
const stock = await fetch(`https://api.store.com/stock/${productId}`)
.then(r => r.json());
---
<div class="stock-info">
{stock.available ? (
<span class="in-stock">✅ Stokta var ({stock.count} adet)</span>
) : (
<span class="out-of-stock">❌ Stokta yok</span>
)}
</div>
Kullanım / Usage:
<StockWidget productId="12345" server:defer />
---
// src/components/ABTestBanner.astro
// Kullanıcıya özel A/B test varyantı (user-specific A/B test variant)
const userId = Astro.cookies.get('user_id')?.value;
const variant = getUserVariant(userId); // A veya B
---
{variant === 'A' ? (
<div class="banner-a">
<h2>%50 İndirim!</h2>
</div>
) : (
<div class="banner-b">
<h2>2 Al 1 Öde!</h2>
</div>
)}
Bu örneklerin tümü alestaweb.com müşteri projelerinde test edilmiş ve kanıtlanmış yöntemlerdir (tested and proven in real projects).
Astro'nun resmi testlerine göre Server Islands şu performans iyileştirmelerini sağlar (provides following performance improvements):
Bir e-ticaret müşterimiz için Server Islands uyguladık:
Sonuçlar Google Core Web Vitals ve iş metrikleri açısından çok etkileyici (results very impressive for both technical and business metrics)!
1. Fallback UI Kullanın (Use Fallback):
<UserProfile server:defer>
<div slot="fallback">Yükleniyor...</div>
</UserProfile>
2. Timeout Belirleyin (Set Timeout):
Server island'a max response time ekleyin
3. Cache Stratejisi (Caching Strategy):
Server island'ları da cache'leyebilirsiniz (TTL ile)
4. Error Handling (Hata Yönetimi):
Island yüklenemezse graceful degradation uygulayın
Alesta Web olarak tüm projelerimizde bu best practice'leri uyguluyoruz. Detaylı danışmanlık için alestaweb.com'u ziyaret edin.
Bu makalede kullanılan bilgiler aşağıdaki güvenilir kaynaklardan alınmıştır (information used in this article is from the following reliable sources):
Alesta Web olarak tüm bilgileri doğruladık ve production projelerinde test ettik (we verified and tested all information in production projects).
Artık Astro Server Islands teknolojisi hakkında bilgi sahibisiniz. Statik hız + dinamik içerik kombinasyonu ile web sitenizi bir üst seviyeye taşıyabilirsiniz! Alesta Web olarak Astro projeleri konusunda danışmanlık ve destek sağlıyoruz.
Hızlı Özet / Quick Summary:
Faydalı Linkler / Useful Links:
Server Islands hakkında sorularınız mı var (do you have questions about Server Islands)? Alesta Web ekibi Astro projeleri konusunda uzman! alestaweb.com üzerinden bizimle iletişime geçebilirsiniz.
© 2026 AlestaWeb - Tüm hakları saklıdır. Bu makale Alesta Web tarafından hazırlanmıştır.