Adacık Mimarisi: Seçici Hidrasyon

Jason Miller tarafından 2020'de ortaya atılan Adalar Mimarisi, bir web sayfasını içine yalıtılmış etkileşim adalarının yerleştirildiği, çoğunlukla statik HTML'den oluşan bir yapı olarak ele alır. HTML'nin statik okyanusu tarayıcıya olduğu gibi gönderilir. Yalnızca etkileşimli adalar JavaScript'i indirip yürütür; böylece JavaScript yükü sayfanın boyutuyla değil gerçek etkileşim düzeyiyle orantılı olur.

Her ada, bağımsız olarak hidrasyon uygulanan bir bileşendir. Sunucu, adanın başlangıç HTML'sini sayfanın geri kalanıyla birlikte oluşturur. Adanın JavaScript'i yüklendiğinde yalnızca o bileşen alt ağacına hidrasyon uygulanır. Adaların çevresindeki HTML'ye JavaScript hiçbir zaman dokunmaz; bu HTML gerçekten statiktir.

Adalar Mimarisi kullanılan bir blog yazısı sayfasında JavaScript yükü, tek bir beğen düğmesi adası için 5 KB olabilir. React SPA olarak oluşturulan aynı sayfa, tamamına hidrasyon uygulamak için 200 KB'tan fazla JavaScript gönderebilir. Adalar yaklaşımı, yükü sayfa boyutuna değil etkileşim düzeyine orantılı hâle getirir.

Adalar Mimarisi'nin önde gelen çerçevesi Astro, aynı sayfada farklı çerçevelerle oluşturulmuş adaları destekler. Yan yana bir React adasına, bir Vue adasına ve bir saf JavaScript adasına sahip olabilirsiniz. Her ada bağımsız olarak paketlendiğinden kullanıcılar yalnızca görünür adalar tarafından kullanılan çerçeve kodunu indirir.

client:load yönergesi, sayfa yüklendiğinde adaya hemen hidrasyon uygular. Bunu gezinme menüsü veya arama alanı içeren öne çıkan bölüm gibi hemen görünür ve etkileşimli olan adalar için kullanın. Bu, en yüksek öncelikli hidrasyon stratejisidir.

client:idle yönergesi, adaya hidrasyon uygulamadan önce tarayıcının ana iş parçacığının boşta kalmasını (kritik içerik yüklendikten sonrasını) bekler. Bu, ilk görünümün aşağısındaki araçlar veya sosyal paylaşım çubuğu gibi hemen gerekmeyen ikincil etkileşimler için idealdir.

client:visible yönergesi, adaya yalnızca kaydırılarak görünüm alanına getirildiğinde hidrasyon uygulamak için bir Intersection Observer kullanır. Bu, yorum bölümü veya ilgili ürünler galerisi gibi sayfanın derinliklerinde bulunan ve çoğu kullanıcının hiçbir zaman ulaşmayabileceği adalar için idealdir. JavaScript, ihtiyaç duyulana kadar hiç yüklenmez.

client:only yönergesi, sunucu tarafında oluşturmayı tamamen atlar ve adayı yalnızca tarayıcıda oluşturur. Bu, tarayıcıya özgü API'leri (window, document) kullanan veya bağlanma sırasında istemci tarafındaki duruma bağlı olan bileşenler için gereklidir. Bunun karşılığında o ada için sunucu tarafından oluşturulmuş HTML bulunmaz.

Adalar Mimarisi, JavaScript'in yalnızca gerçekten etkileşimli bileşenler için yüklenip yürütülmesini sağlayarak tam hidrasyon sorununu çözer. Beğen düğmesi içeren bir blog yazısında yalnızca beğen düğmesi adasına hidrasyon uygulanır; 1200 kelimelik makale metni, başlık ve alt bilgi istemci tarafında hiç JavaScript yürütülmesine neden olmaz.

Her adanın kendi yalıtılmış durumu vardır. Adalar, ayrı React ağaçları olduklarından React durumunu doğrudan paylaşamaz. Bu tasarım gereğidir: iki bileşenin durum paylaşması gerekiyorsa tek bir adada birleştirilmelidir. Adalar arası iletişim URL parametreleri, DOM olayları veya hafif durum kitaplıkları kullanır.

React SPA'den Adalar Mimarisi'ne geçirilen siteler (Astro dokümantasyon sitesi gibi) çarpıcı iyileştirmeler bildiriyor: JavaScript yükleri %70-90 azalıyor, TTI mobil cihazlarda 2-4 saniye iyileşiyor ve Lighthouse performans puanları 60'lardan 90 ve üzerine çıkıyor. Kazanımlar, içerik ağırlıklı sayfalarda en belirgin hâle geliyor.

Bir bileşene yalnızca görünüm alanına kaydırıldığında hidrasyon uygulayan Astro yönergesi hangisidir?

Adalar Mimarisi, sayfanın çoğunu statik HTML olarak tutar ve yalnızca yalıtılmış etkileşimli bileşenlere hidrasyon uygular. Astro şu hidrasyon yönergelerini sağlar: client:load (hemen), client:idle (boşta kaldıktan sonra), client:visible (kaydırıldığında) ve client:only (yalnızca istemci tarafında oluşturma). Her adaya bağımsız olarak hidrasyon uygulanır; böylece gereken JavaScript miktarı sayfa boyutuna değil, etkileşim düzeyine göre belirlenir.