Seçici Hydration ve Akışla HTML
HTML parçalarını akışla göndermek ve etkileşimli adaları önce hydrate etmek için Suspense sınırlarını kullanın.
Seçici Hydration ve Akışla HTML, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. 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.
Tam Sayfa Hidrasyonunun Sorunu
Geleneksel SSR, sayfanın tamamını aynı anda hidrate eder. Sayfanın bir bölümünde yoğun JavaScript (harita veya grafik gibi) varsa, basit etkileşimli düğmeler de dahil olmak üzere geri kalan kısmın hidrasyonunu engeller.
renderToPipeableStream ile HTML Akışı
React 18'in akış API'si HTML'yi parçalar halinde gönderir. Sayfa kabuğu hemen gelir; Suspense sınırları, veriler hazır oldukça içeriği doldurur ve kullanıcılar tüm veriler hazır olmadan önce kullanıcı arayüzünü görür.
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res);
},
onError(error) {
console.error(error);
},
});Akış Uygulamada Nasıl Çalışır?
React, hemen askıya alınmayan bileşenleri oluşturur (kabuk). Bir Suspense sınırının verileri hazır olduğunda React, bu sınırı doldurmak için bir HTML parçası ve tarayıcıya bunu nereye yerleştireceğini bildiren bir betik etiketi gönderir.
Seçmeli Hidrasyon
Akış ile React 18, bileşenleri bağımsız olarak hidrate edebilir. Kullanıcı henüz hidrate edilmemiş bir öğeye tıklarsa React, önce o bileşenin hidrasyonuna öncelik verir; ardından geri kalanıyla devam eder.
Akış Birimleri Olarak Suspense Sınırları
Her <Suspense> sınırı bir akış birimidir. Yedek içerik hemen gönderilir; gerçek içerik daha sonra akışla gönderilir. Akışı doğru ayrıntı düzeyinde gerçekleştirmek için Suspense sınırlarını iç içe yerleştirin.
function App() {
return (
<Layout>
{/* Streams first — no data needed */}
<Header />
<Suspense fallback={<ArticleSkeleton />}>
{/* Streams when article data resolves */}
<Article />
</Suspense>
<Suspense fallback={<CommentsSkeleton />}>
{/* Streams independently from Article */}
<Comments />
</Suspense>
</Layout>
);
}loading.tsx ile Next.js Akışı
Next.js App Router'da loading.tsx, Suspense yedek içeriğidir. Sayfa kabuğu (düzen) önce akışla gönderilir; sayfa içeriği, eş zamansız işlevi çözümlendiğinde akışla gönderilir.
// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
return <ArticleSkeleton />;
}
// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
const posts = await fetchPosts(); // data fetch happens server-side
return <PostList posts={posts} />;
}Suspense İçindeki İstemci Bileşenleri
Sunucu Bileşenleri veri akışı için Suspense kullanır. İstemci Bileşenleri tembel yükleme için Suspense kullanır. Her ikisi de seçmeli hidratasyondan yararlanır.
// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));
function Dashboard() {
return (
<Suspense fallback={<ChartSkeleton />}>
<HeavyChart />
</Suspense>
);
}Öncelik Tabanlı Hidratasyon
Kullanıcı henüz hidratasyonu gerçekleştirilmemiş bir bileşenle etkileşime girerse (örneğin bir tıklamayla), React 18 sayfanın diğer bölümlerinin hidratasyonunu tamamlamadan önce bu bileşenin hidratasyonunu eşzamanlı olarak gerçekleştirir.
onShellReady ve onAllReady Karşılaştırması
onShellReady, kabuk (askıya alınmamış bölümler) akışla gönderilmeye hazır olduğunda tetiklenir. onAllReady, her şey işlendiğinde tetiklenir — statik oluşturma için veya tüm HTML'yi tek seferde göndermeniz gerektiğinde kullanışlıdır.
// For streaming (progressive rendering):
onShellReady() { pipe(res); }
// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }İptal Denetleyicisi
Yavaş işlemeler için SSR'ı iptal etmek üzere (örneğin zaman aşımı aşıldığında) bir AbortController sinyali aktarın.
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
const { pipe } = renderToPipeableStream(<App />, {
signal: controller.signal,
onShellReady() { pipe(res); },
});
clearTimeout(timeoutId);Akış Etkisinin Ölçülmesi
İyileşmeyi nicel olarak ölçmek için akışı etkinleştirmeden önce ve etkinleştirdikten sonra İlk Bayta Kadar Geçen Süreyi (TTFB) ve En Büyük İçerik Boyamasını (LCP) ölçmek üzere Lighthouse veya WebPageTest kullanın.
Kısa Kontrol
Kullanıcı henüz hidratasyonu gerçekleştirilmemiş bir öğeye tıkladığında React 18'in seçmeli hidratasyonunda ne olur?
Özet
Akışlı SSR, HTML'yi aşamalı olarak göndermek için renderToPipeableStream ve Suspense sınırlarını kullanır. Her Suspense sınırı bağımsız olarak akışla gönderilir. Seçmeli hidratasyon, kullanıcının etkileşime girdiği öğelere öncelik verir. Next.js'te loading.tsx, sayfa düzeyindeki akış için otomatik Suspense yedek içeriğidir.
Sıkça Sorulan Sorular
“Seçici Hydration ve Akışla HTML” dersi ücretsiz mi?
Evet — “Seçici Hydration ve Akışla HTML” 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.
“Seçici Hydration ve Akışla HTML” dersinde ne öğreneceğim?
HTML parçalarını akışla göndermek ve etkileşimli adaları önce hydrate etmek için Suspense sınırlarını kullanın. 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 3. dersidir.
“Seçici Hydration ve Akışla HTML” 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