Adalar Mimarisi Deseni
En iyi Etkileşime Geçiş Süresi için çoğunlukla statik HTML gönderin ve yalnızca etkileşimli widget'ları hydrate edin.
Adalar Mimarisi Deseni, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
Adalar Mimarisi Nedir?
Adalar Mimarisi, çoğunlukla statik HTML'yi küçük ve bağımsız olarak hidratasyonu gerçekleştirilen etkileşimli bölümlerle (adalarla) birlikte gönderir. Sayfanın büyük bölümü sıfır JS içerir; yalnızca etkileşim gerektiren parçacıklar React adalarına dönüşür.
Çözdüğü Sorun
Geleneksel SSR, içeriğin %90'ı statik olsa bile (başlıklar, metinler ve görseller) sayfanın tamamının hidratasyonunu gerçekleştirir. Adalar yalnızca etkileşimli bölümlerin hidratasyonunu gerçekleştirerek tarayıcıya gönderilen JavaScript miktarını büyük ölçüde azaltır.
Temel Kavram
Sayfayı, içinde etkileşim adalarının yüzdüğü bir statik HTML denizi olarak düşünün. Her ada bağımsız olarak hidratasyonunu gerçekleştirir ve gerekirse farklı bir çerçeve kullanabilir.
Adalar Çerçevesi Olarak Astro
Astro, adalar mimarisini yaygınlaştırdı. Bileşenler varsayılan olarak sıfır JS içerir. Hidratasyonu etkinleştirmek için bir client:* yönergesi ekleyin.
---
import Header from './Header.astro'; // static — 0 JS
import SearchBar from './SearchBar.jsx'; // island — hydrated
import Footer from './Footer.astro'; // static — 0 JS
---
<Header />
<SearchBar client:load /> <!-- hydrate immediately -->
<SearchBar client:idle /> <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />Hidratasyon Yönergeleri
Adalar çerçeveleri ayrıntılı hidratasyon zamanlaması sunar: client:load (hemen), client:idle (requestIdleCallback), client:visible (IntersectionObserver), client:media (CSS medya sorgusu).
Next.js'te Adaları Uygulama
Next.js App Router, Sunucu/İstemci Bileşeni ayrımı aracılığıyla adaları yaklaşık olarak uygular. Sunucu Bileşenleri = statik; İstemci Bileşenleri = adalar.
// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
const product = await getProduct();
return (
<article>
<h1>{product.name}</h1>
<p>{product.description}</p>
{/* Only the interactive button is a Client Component island */}
<AddToCartButton product={product} />
</article>
);
}React lazy ile Elle Adalar Oluşturma
Özel bir çerçeve olmadan, etkileşimli bileşenleri yalnızca sayfa yüklendikten sonra tembel olarak yükleyerek adalar oluşturabilirsiniz.
const HeavyWidget = lazy(() => import('./HeavyWidget'));
function Page() {
const [show, setShow] = useState(false);
const containerRef = useRef(null);
useEffect(() => {
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) setShow(true);
});
obs.observe(containerRef.current);
return () => obs.disconnect();
}, []);
return (
<div ref={containerRef}>
{show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
</div>
);
}Ödünleşimler
Yararları: en aza indirilmiş JS, hızlı TTI, statik içeriğin agresif biçimde önbelleğe alınması. Maliyetleri: adalar durumu kolayca paylaşamaz (ayrı JS bağlamları kullanırlar) ve standart bir SPA'ya göre daha karmaşık bir mimariye sahiptir.
Adalar Arasında Durum Paylaşma
Bağımsız adalar arasında iletişim kurmak için tarayıcıya özgü mekanizmaları (özel olaylar, URL, localStorage) veya küçük bir paylaşılan tekil depo kullanın.
// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);
// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));Adalar Mimarisi Ne Zaman Kullanılmalı?
Şunlar için en uygunudur: içeriğin çoğunun statik olduğu ve yalnızca birkaç bileşenin etkileşime ihtiyaç duyduğu içerik ağırlıklı siteler (bloglar, e-ticaret ve pazarlama siteleri; arama, sepet ve formlar).
Adalar, SSR ve SPA Karşılaştırması
SPA: tüm JS'yi gönderir ve her şeyin hidratasyonunu gerçekleştirir. SSR: sunucu her şeyi işler ve her şeyin hidratasyonunu gerçekleştirir. Adalar: sunucu her şeyi işler, yalnızca etkileşimli parçacıkların hidratasyonunu gerçekleştirir. Adalar, içerik sitelerinde performans açısından daha başarılıdır.
Kısa Kontrol
Adalar Mimarisi örüntüsünün birincil performans yararı nedir?
Özet
Adalar Mimarisi, HTML'nin büyük bölümünü statik tutar (sıfır JS) ve yalnızca etkileşimli parçacıkların hidratasyonunu gerçekleştirir. Amaca özel bir adalar çerçevesi için Astro'yu kullanabilir veya Next.js Sunucu/İstemci Bileşenleriyle buna yaklaşık bir çözüm oluşturabilirsiniz. Kritik olmayan adalar için client:visible/IntersectionObserver kullanarak hidratasyonu tembel olarak gerçekleştirin.
Sıkça Sorulan Sorular
“Adalar Mimarisi Deseni” dersi ücretsiz mi?
Evet — “Adalar Mimarisi Deseni” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“Adalar Mimarisi Deseni” dersinde ne öğreneceğim?
En iyi Etkileşime Geçiş Süresi için çoğunlukla statik HTML gönderin ve yalnızca etkileşimli widget'ları hydrate edin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Adalar Mimarisi Deseni” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- React SSR'nin Perde Arkasında Çalışması
- Hydration Hataları: Nedenler ve Çözümler
- Seçici Hydration ve Akışla HTML
- Adalar Mimarisi Deseni