Vue Academy · Pelajaran

Strategi Hydration Tertunda

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — hydration malas Nuxt.

Pelajaran 4 dari 413 langkah

Strategi Hydration Tertunda adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Masalah Biaya Hidrasi

SSR mengirim HTML yang siap dilihat, tetapi klien tetap harus menghidrasi setiap komponen agar menjadi interaktif. Menghidrasi semuanya sejak awal memblokir utas utama dan menunda interaktivitas (TTI).

Hidrasi tertunda menunda hidrasi komponen hingga komponen tersebut benar-benar diperlukan.

Prefiks Lazy Otomatis Nuxt

Di Nuxt, menambahkan prefiks Lazy pada komponen membuatnya diimpor secara tertunda. Jika dipadukan dengan strategi hidrasi, cara ini menunda unduhan JS dan pekerjaan hidrasi.

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

hydrateOnVisible

hydrateOnVisible menghidrasi komponen hanya saat komponen tersebut masuk ke area pandang, dengan menggunakan IntersectionObserver secara internal. Sangat cocok untuk bagian di bawah lipatan layar.

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

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

hydrateOnVisible dengan Margin

Anda dapat meneruskan opsi IntersectionObserver agar hidrasi dimulai sedikit sebelum elemen terlihat, sehingga pengalaman terasa lebih mulus.

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

hydrateOnIdle

hydrateOnIdle menunggu hingga peramban menganggur (melalui requestIdleCallback) sebelum melakukan hidrasi. Gunakan ini untuk widget nonkritis yang tidak boleh bersaing dengan interaktivitas awal.

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

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

hydrateOnInteraction

hydrateOnInteraction menunda hidrasi hingga peristiwa DOM tertentu dipicu pada elemen tersebut (klik, fokus, gerakan mouse). Komponen tetap berupa HTML statis hingga pengguna berinteraksi.

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

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

hydrateOnMediaQuery

hydrateOnMediaQuery hanya menghidrasi saat kueri media cocok — misalnya, menghidrasi bilah sisi khusus desktop yang tersembunyi di perangkat seluler, sehingga pekerjaan yang sia-sia pada layar kecil dapat dihindari.

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

API Inti Vue: Pembantu Hidrasi

Di luar Nuxt, strategi yang sama tersedia sebagai pembantu hidrasi yang diteruskan ke opsi hydrate milik defineAsyncComponent. Prefiks Nuxt merupakan bentuk ringkas dari pembantu ini.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

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

Memilih Strategi yang Tepat

Sesuaikan strategi dengan tujuannya:

Terlihat — konten di bawah lipatan layar (ulasan, kaki halaman)
Menganggur — widget latar belakang (analitik, buletin)
Interaksi — antarmuka yang ditampilkan melalui tindakan pengguna (menu, dialog)
Kueri media — antarmuka khusus perangkat

Kompromi yang Perlu Diperhatikan

Hidrasi tertunda meningkatkan TTI, tetapi komponen menjadi tidak interaktif hingga pemicunya aktif. Untuk strategi berbasis interaksi, klik pertama digunakan untuk memicu hidrasi dan mungkin terasa sedikit lambat. Gunakan hidrasi segera untuk antarmuka ajakan bertindak utama.

Menggabungkan dengan Arsitektur Islands

Hidrasi tertunda berpadu dengan arsitektur islands: sebagian besar halaman berupa HTML yang dirender secara statis di server, dan hanya islands interaktif yang menjalani hidrasi — secara malas, berdasarkan strategi. Hasilnya adalah JS klien yang minimal dan interaktivitas yang cepat di bagian yang membutuhkannya.

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

Pemeriksaan Cepat

Uji pemahaman Anda tentang strategi hidrasi.

Jawab di pelajaran interaktif

Rangkuman

Anda telah mempelajari hidrasi tertunda:

Prefiks Lazy milik Nuxt mengimpor komponen secara malas
hydrateOnVisible — bagian di bawah tampilan awal melalui IntersectionObserver
hydrateOnIdle — bagian yang tidak kritis, selama waktu menganggur
hydrateOnInteraction — dipicu oleh peristiwa (klik/fokus)
Vue inti menyediakan semua ini sebagai helper hydrate pada defineAsyncComponent

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Strategi Hydration Tertunda” gratis?

Ya — teks lengkap “Strategi Hydration Tertunda” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Strategi Hydration Tertunda”?

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — hydration malas Nuxt. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Strategi Hydration Tertunda” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Komponen Suspense Vue
Komponen Asinkron dengan defineAsyncComponent
SSR Streaming dengan renderToWebStream
Strategi Hydration Tertunda

← Kembali ke Vue Academy