Vue Academy · Ders

Ertelenmiş Hydration Stratejileri

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — Nuxt'ta tembel hydration.

4. ders / 413 adım

Ertelenmiş Hydration Stratejileri, CoddyKit'te ücretsiz bir Vue 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Hidratasyon Maliyeti Sorunu

SSR görüntülenmeye hazır HTML gönderir, ancak istemcinin her bileşeni etkileşimli hâle getirmek için yine de hidratasyon yapması gerekir. Her şeyi baştan hidrate etmek ana iş parçacığını engeller ve etkileşimi (TTI) geciktirir.

Ertelenmiş (gecikmeli) hidratasyon, bileşenlerin hidratasyonunu gerçekten gerekene kadar geciktirir.

Nuxt Otomatik Geç Yükleme Ön Eki

Nuxt'ta bir bileşenin önüne Lazy eklemek, bileşenin gecikmeli olarak içe aktarılmasını sağlar. Bu, hidratasyon stratejileriyle birlikte kullanıldığında hem JS indirmesini hem de hidratasyon işini erteler.

<template>
  <!-- Nuxt resolves LazyMyComponent automatically -->
  <LazyMyComponent />
</template>

hydrateOnVisible

hydrateOnVisible, bir bileşeni yalnızca görünüm alanına kaydırılarak girdiğinde, arka planda bir IntersectionObserver kullanarak hidrate eder. Ekranın altındaki bölümler için idealdir.

<template>
  <!-- Nuxt syntax: hydrate when visible -->
  <LazyProductReviews hydrate-on-visible />
</template>

<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->

hydrateOnVisible ile Kenar Boşluğu

Hidratasyonun öğe görünür olmadan hemen önce başlaması ve deneyimin daha akıcı olması için IntersectionObserver seçeneklerini geçebilirsiniz.

<template>
  <!-- start hydrating 100px before entering viewport -->
  <LazyComments
    :hydrate-on-visible="{ rootMargin: '100px' }"
  />
</template>

hydrateOnIdle

hydrateOnIdle, hidratasyon yapmadan önce tarayıcının boşta kalmasını (requestIdleCallback aracılığıyla) bekler. İlk etkileşimle rekabet etmemesi gereken kritik olmayan küçük araçlar için kullanın.

<template>
  <!-- hydrate during idle time -->
  <LazyNewsletterSignup hydrate-on-idle />

  <!-- optional max timeout in ms -->
  <LazyChatBubble :hydrate-on-idle="3000" />
</template>

hydrateOnInteraction

hydrateOnInteraction, öğede belirtilen bir DOM olayı tetiklenene kadar hidratasyonu erteler (tıklama, odaklanma, fare üzerine gelme). Kullanıcı etkileşime girene kadar bileşen sabit HTML olarak kalır.

<template>
  <!-- hydrate only on click -->
  <LazyDropdownMenu hydrate-on-interaction="click" />

  <!-- multiple events -->
  <LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>

hydrateOnMediaQuery

hydrateOnMediaQuery, yalnızca bir medya sorgusu eşleştiğinde hidratasyon yapar — örneğin, mobilde gizlenen yalnızca masaüstüne özgü bir kenar çubuğunu hidrate ederek küçük ekranlarda gereksiz işi önler.

<template>
  <!-- only hydrate on wide screens -->
  <LazyDesktopSidebar
    hydrate-on-media-query="(min-width: 1024px)"
  />
</template>

Temel Vue API'si: Hidratasyon Yardımcıları

Nuxt dışında aynı stratejiler, defineAsyncComponent'in hydrate seçeneğine geçirilen hidratasyon yardımcıları olarak bulunur. Nuxt ön ekleri, bunların basitleştirilmiş kullanım biçimidir.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const LazyChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  hydrate: hydrateOnVisible()
})

Doğru Stratejiyi Seçme

Stratejiyi amacınıza uygun seçin:

Görünür — ekranın altındaki içerik (incelemeler, alt bilgiler)
Boşta — arka plan araçları (analiz, bülten)
Etkileşim — kullanıcı eylemiyle açılan arayüz (menüler, iletişim pencereleri)
Medya sorgusu — cihaza özgü arayüz

Dikkat Edilmesi Gereken Dengeler

Ertelenmiş hidratasyon TTI'yi iyileştirir, ancak tetikleyicisi çalışana kadar bileşen etkileşimli değildir. Etkileşime dayalı stratejilerde ilk tıklama, hidratasyonu başlatmak için kullanılır ve biraz gecikmeli hissedilebilir. Birincil eylem arayüzü için erken hidratasyonu tercih edin.

Adalarla Birleştirme

Ertelenmiş hidrasyon, adalar mimarisiyle birlikte kullanılır: sayfanın çoğu statik olarak sunucu tarafından oluşturulan HTML'dir ve yalnızca etkileşimli adalar stratejiye göre, tembel bir şekilde hidrate edilir. Sonuç olarak istemci JS'si en aza iner ve önemli olan yerlerde etkileşim hızlanır.

<template>
  <StaticArticle />            <!-- never hydrates -->
  <LazyCommentBox hydrate-on-visible />
  <LazyLikeButton hydrate-on-interaction="click" />
</template>

Hızlı Kontrol

Hidrasyon stratejilerini ne kadar anladığınızı sınayın.

İnteraktif derste cevapla

Özet

Ertelenmiş hidrasyonu öğrendiniz:

Nuxt'un Lazy ön eki, bileşenleri tembel bir şekilde içe aktarır
hydrateOnVisible — IntersectionObserver aracılığıyla ekranın alt kısmındaki içerik için
hydrateOnIdle — kritik olmayan içerik için, boşta kalma sırasında
hydrateOnInteraction — olayla tetiklenir (tıklama/focus)
Temel Vue, bunları defineAsyncComponent üzerinde hydrate yardımcıları olarak sunar

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Ertelenmiş Hydration Stratejileri” dersi ücretsiz mi?

Evet — “Ertelenmiş Hydration Stratejileri” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Ertelenmiş Hydration Stratejileri” dersinde ne öğreneceğim?

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — Nuxt'ta tembel hydration. Vue 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.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue 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.

“Ertelenmiş Hydration Stratejileri” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

Vue Suspense Bileşeni
defineAsyncComponent ile Asenkron Bileşenler
renderToWebStream ile Akış SSR'si
Ertelenmiş Hydration Stratejileri

← Vue Academy Sayfasına Dön