Astro Islands mimarisiyle yalnızca ihtiyaç duyulan bileşenlerde JavaScript yükleyerek açılış hızını artıran modern web geliştirme yaklaşımını inceleyin.
Hızlı Özet (TL;DR)
Tek sayfa uygulamaları (Single Page Application - SPA) ve modern JavaScript kütüphaneleri (React, Vue, Angular) karmaşık yönetim panellerinde devrim yaratmış olsa da; bilgi, ürün kataloğu ve kurumsal tanıtım sunan web siteleri için devasa bir performans yükü getirmiştir. Bir web sayfasındaki statik metinleri ve görselleri göstermek için yüzlerce kilobayt JavaScript indirmek ve tarayıcıda “hydration” çalıştırmak cihazın pilini, belleğini ve işlemcisini tüketir. Adalar (Islands) Mimarisi, sayfayı saf statik HTML ve CSS okyanusu olarak kurgulayıp yalnızca etkileşimli bileşenleri izole JavaScript adacıkları olarak yükler.
Geleneksel SPA ve Monolitik Hydration Mimarisi Neden Yavaşlatır?
Son on yılda geliştirilen birçok kurumsal web sitesi, e-ticaret vitrini ve içerik portalı; sanki tarayıcı içinde çalışan bir video düzenleme programıymış gibi tamamen JavaScript tabanlı SPA (Single Page Application) veya SSR (Server-Side Rendering) mimarileriyle inşa edildi. Bu geleneksel yaklaşımda sunucu tarayıcıya ilk HTML görünümünü gönderse bile, sayfanın tıklanabilir hale gelmesi için arka planda çok ağır bir süreç işler:
- Bundle İndirme (Network Overhead): Tarayıcı, sayfadaki tüm bileşenleri (üst menü, statik paragraflar, alt bilgi, iletişim formu) yöneten 300 KB ila 1.5 MB arasındaki sıkıştırılmış JavaScript paketini (bundle) indirmek zorunda kalır.
- Ayrıştırma ve Derleme (Parse & Compile): Mobil cihazın işlemcisi (CPU), indirilen binlerce satırlık JavaScript kodunu satır satır okuyup makine diline derler. Bu sırada ana iş parçacığı (Main Thread) kilitlenir.
- Tam Sayfa Hidrasyonu (Full-Page Hydration): JavaScript motoru, ekranda zaten var olan tüm HTML ağacını (DOM) baştan sona tarar, sanal DOM (Virtual DOM) ile eşleştirir ve olay dinleyicilerini (Event Listeners) bağlar. Sayfanın %95’i hiç değişmeyen kurumsal tanıtım metni veya blog yazısı olsa dahi, bu statik alanlar için de işlemci gücü harcanır.
Bu süreç TBT (Total Blocking Time - Toplam Engelleme Süresi) ve INP (Interaction to Next Paint - Sonraki Boyamaya Etkileşim) metriklerini felç eder. Ziyaretçi ekranda menüyü görür, üzerine tıklar ancak tarayıcı arka planda JavaScript çözümlediği için menü yarım saniye gecikmeli açılır.
Adalar (Islands) Mimarisi ve Kısmi Hidrasyon (Partial Hydration) Nasıl Çalışır?
2019 yılında Etsy’nin ön yüz mimarı Katie Sylor-Miller tarafından kavramsallaştırılan ve Preact’in yaratıcısı Jason Miller tarafından detaylandırılan Islands Architecture (Adalar Mimarisi), Astro gibi modern statik site üreticilerinin (SSG) temel felsefesini oluşturur.
Bu mimaride derleme (build) aşamasında tüm JavaScript varsayılan olarak soyulur (Zero-JS by Default). Sayfanın tamamı saf, semantik HTML5 ve optimize edilmiş CSS olarak üretilir. Sayfa içinde gerçekten istemci tarafı durumu (state) gerektiren bir bileşen varsa —örneğin canlı maliyet hesaplama modülü, interaktif ürün filtresi veya resim galerisi— bu bileşen statik HTML okyanusunun ortasında bağımsız bir “Etkileşim Adası” (Interactive Island) olarak tanımlanır.
Neden Sıfır JavaScript?
- Anında Etkileşim (Sıfır TBT): Ziyaretçi sayfayı açtığı mikrosaniyede metinleri okuyabilir, iç linklere tıklayabilir; JavaScript dosyasının indirilip çözümlenmesini (parse) beklemez. Ana iş parçacığı (Main Thread) tamamen boştur.
- Düşük Donanımlı Cihazlarda ve Zayıf Ağlarda Kusursuzluk: Fabrika sahasındaki eski bir endüstriyel tablet, zayıf 3G/4G bağlantısı veya bütçe dostu akıllı telefonlarda dahi sayfa 60 FPS akıcılıkta çalışır.
- Kusursuz SEO ve Arama Motoru Tarama Bütçesi (Crawl Budget): Googlebot ve yapay zeka arama botları, JavaScript render kuyruğunda (Web Rendering Service) günlerce beklemeden sayfa içeriğini, başlık hiyerarşisini ve yapısal şema (JSON-LD) verilerini ilk geçişte eksiksiz dizine ekler.
- Siber Güvenlik ve Saldırı Yüzeyinin Daraltılması: İstemci tarafında çalışan üçüncü parti NPM paketlerinin ve karmaşık JavaScript kütüphanelerinin sıfırlanması, XSS (Cross-Site Scripting) ve tedarik zinciri (Supply Chain) saldırı yüzeyini ortadan kaldırır. Bu yaklaşım, kurumsal sızma testi (Pentest) denetimlerinde web uygulamalarının tam puan almasını kolaylaştırır.
Mimari Karşılaştırma: Geleneksel SPA, Monolitik SSR ve Astro Adalar Mimarisi
Farklı web geliştirme yaklaşımlarının kurumsal performans, SEO ve sunucu güvenliği üzerindeki etkileri aşağıdaki tabloda özetlenmiştir:
| Karşılaştırma Kriteri | Geleneksel SPA (React / Vue CSR) | Monolitik SSR (Next.js / Nuxt) | Adalar Mimarisi (Astro SSG / Islands) |
|---|---|---|---|
| İlk HTML İçeriği | Boş <div id="root"></div> kabuğu | Sunucuda dolu HTML üretilir | Derleme anında %100 hazır statik HTML |
| İndirilen JS Yükü | Çok Yüksek (400 KB – 2 MB+) | Yüksek (Tüm sayfa hidrasyonu için 150–400 KB) | Sıfır (0 KB) veya yalnızca aktif ada kadar (5–15 KB) |
| Core Web Vitals (LCP / INP) | Zayıf (JS inene kadar ekran beyaz kalır) | Orta / İyi (Hidrasyon sırasında TBT yükselebilir) | Mükemmel (100/100 Lighthouse Performans Puanı) |
| Sunucu ve Güvenlik Riski | API uç noktaları dış dünyaya açıktır | Node.js çalışma zamanı (Runtime) sürekli aktiftir | Saf statik dosyalar; veritabanı veya çalışma zamanı açığı yoktur |
| İdeal Kullanım Senaryosu | Karmaşık SaaS panelleri, web tabanlı tasarım araçları | Dakikalık değişen büyük e-ticaret ve sosyal ağlar | Kurumsal web siteleri, B2B portallar, dokümantasyon ve bloglar |
İstemci Yönergeleri (Client Directives) ile Akıllı Yükleme
Astro Adalar mimarisinde bir bileşene hiçbir yönerge vermezseniz, o bileşen derleme sırasında saf HTML’e dönüştürülür ve tarayıcıya 0 bayt JavaScript gönderilir. Etkileşim gereken bileşenlerde ise her adanın ne zaman ve hangi koşulda yükleneceğini milisaniye hassasiyetinde yönetebilirsiniz:
| Yönerge | Çalışma Mantığı | Kullanılan Tarayıcı API’si | İdeal Kullanım Alanı |
|---|---|---|---|
| client:load | Sayfa açıldığı anda yüksek öncelikle hemen yüklenir | Doğrudan asenkron <script> | Ekranın en üstündeki (Above the fold) interaktif fiyat hesaplayıcı |
| client:idle | Tarayıcı ana sayfa çizimini bitirip boşta kalınca yüklenir | requestIdleCallback | İkincil arama çubuğu, canlı destek veya bildirim bileşeni |
| client:visible | Kullanıcı sayfayı aşağı kaydırıp öğeyi görene kadar yüklenmez | IntersectionObserver | Sayfa altındaki iletişim formu, interaktif harita, resim karuseli |
| client:media | Yalnızca belirli ekran genişliğinde (örn. mobil) yüklenir | window.matchMedia | Yalnızca küçük ekranlarda gereken mobil çekmece menü |
Örneğin sayfanın en altında bulunan bir SSS akordeonu veya sekme yapısını modern HTML’in yerleşik <details> ve <summary> etiketleriyle veya saf CSS ile çözmek varken JavaScript kütüphanesi yüklemek mühendislik israfıdır. Gerçekten JavaScript gerektiren bir form doğrulama adası ise client:visible ile işaretlendiğinde, ziyaretçi sayfayı aşağı kaydırmadığı sürece o bileşenin kodu ağ üzerinden hiç indirilmez.
Kurumsal B2B ve Savunma Sanayii Web Sitelerinde Performansın Ticari Etkisi
Sanayi, imalat ve teknoloji firmalarının web sitelerini ziyaret eden satın alma müdürleri veya yurt dışı tedarik zinciri denetçileri, saniyeler içinde açılan, teknik belgelere ve sertifikalara anında ulaşabildikleri akıcı bir deneyim bekler. Yavaş açılan, düzen kayması (CLS) yaşayan ve hantal scriptlerle dolu bir site, kurumun mühendislik disiplini hakkında olumsuz ilk izlenim yaratır. Üstelik statik olarak derlenen Adalar mimarisi, güvenlik duvarı (Firewall) ve WAF arkasında barındırıldığında SQL Injection veya uzaktan kod çalıştırma (RCE) gibi sunucu taraflı zafiyetlere karşı doğuştan bağışıktır.
Gereksiz kod yükünden arındırılmış, Google Core Web Vitals testlerinden tam puan alan, güvenli ve ışık hızında web siteleri için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızı inceleyin.
Sıkça Sorulan Sorular
Sıfır JavaScript yaklaşımı web sitemde animasyon, slider veya etkileşimli formlar olamayacağı anlamına mı gelir?
Hayır, tam aksine kullanıcı deneyimi çok daha akıcı hale gelir. “Sıfır JavaScript” felsefesi, etkileşimden vazgeçmek değil; gereksiz çerçeve (framework) yükünü atıp modern tarayıcıların yerleşik yeteneklerini kullanmaktır. Akordeonlar, geçiş animasyonları, sabit menüler ve görsel efektler GPU hızlandırmalı saf CSS ve HTML5 ile sıfır işlemci yüküyle çalıştırılır. Karmaşık hesaplama veya dinamik filtreleme gerektiren alanlar ise yalnızca o bileşene özel birkaç kilobaytlık mikro script veya Astro adası olarak yüklenir.
Mevcut React veya Vue bileşenlerimizi Astro Adalar mimarisinde kullanabilir miyiz?
Evet. Astro’nun en güçlü mühendislik özelliklerinden biri UI-Agnostik (Çerçeveden Bağımsız) yapısıdır. Aynı proje, hatta aynı sayfa içinde bir adayı React ile, diğer adayı Vue veya Svelte ile çalıştırabilir, sayfanın geri kalan %90’lık kısmını ise saf Astro/HTML olarak bırakabilirsiniz. Böylece mevcut bileşen yatırımlarınızı çöpe atmadan sitenizi modern Adalar mimarisine taşıyabilirsiniz.
Adalar mimarisi Google SEO sıralamalarını ve reklam maliyetlerini (Google Ads) nasıl etkiler?
Google’ın sıralama algoritmasında Sayfa Deneyimi (Page Experience) ve Core Web Vitals (LCP, INP, CLS) metrikleri doğrudan sıralama faktörüdür. Adalar mimarisiyle inşa edilen siteler milisaniyeler içinde açıldığı için hemen çıkma oranı (Bounce Rate) düşer, organik görünürlük yükselir. Ayrıca Google Ads kampanyalarında açılış sayfası hızı ve deneyimi Kalite Puanını (Quality Score) doğrudan artırdığı için, tıklama başına ödenen reklam maliyetlerinde (CPC) %20 ila %40 arasında tasarruf sağlanır.