Vue Academy · Oppitunti

Viivästetyn hydraation strategiat

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — Nuxtin lazy hydration

Oppitunti 4/413 vaihetta

Viivästetyn hydraation strategiat on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Hydratoinnin kustannusongelma

SSR lähettää katseluvalmista HTML:ää, mutta asiakasohjelman on silti hydratoitava jokainen komponentti, jotta siitä tulee vuorovaikutteinen. Kaikkien komponenttien hydratointi heti kuormittaa pääsäiettä ja viivästyttää vuorovaikutteisuutta (TTI).

Viivästetty (lazy) hydratointi siirtää komponenttien hydratointia siihen asti, kun niitä todella tarvitaan.

Nuxtin Auto-Lazy-etuliite

Nuxtissa komponentin nimen eteen lisätty Lazy tekee komponentista lazy-tuodun. Yhdessä hydratointistrategioiden kanssa tämä siirtää sekä JavaScriptin lataamista että hydratointityötä myöhemmäksi.

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

hydrateOnVisible

hydrateOnVisible hydratointi tapahtuu vasta, kun komponentti tulee näkymäalueelle. Sen taustalla käytetään IntersectionObserver-rajapintaa. Tämä sopii erinomaisesti ensimmäisen näkymän alapuolella oleville osioille.

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

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

hydrateOnVisible marginaalilla

Voitte välittää IntersectionObserver-asetuksia, jotta hydratointi alkaa hieman ennen elementin näkymistä ja käyttökokemus pysyy sujuvana.

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

hydrateOnIdle

hydrateOnIdle odottaa selaimen joutilaana olemista (requestIdleCallback-toiminnon kautta) ennen hydratointia. Käyttäkää sitä ei-kriittisissä vimpaimissa, joiden ei pidä kilpailla alkuvaiheen vuorovaikutteisuuden kanssa.

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

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

hydrateOnInteraction

hydrateOnInteraction siirtää hydratointia, kunnes määritetty DOM-tapahtuma käynnistyy elementissä (napsautus, kohdistus tai hiiren osoittimen siirtyminen). Komponentti pysyy staattisena HTML:nä, kunnes käyttäjä käyttää sitä.

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

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

hydrateOnMediaQuery

hydrateOnMediaQuery hydratoi komponentin vain, kun mediakysely täsmää — esimerkiksi vain työpöydällä näkyvän sivupalkin voi hydratoida, vaikka se on mobiililaitteilla piilotettu, jolloin pienillä näytöillä vältetään turha työ.

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

Vuen ydintason API: hydratointiapurit

Nuxtin ulkopuolella samat strategiat ovat käytettävissä hydratointiapureina, jotka välitetään defineAsyncComponent-toiminnon hydrate-option kautta. Nuxtin etuliitteet ovat näiden syntaktista sokeria.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

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

Oikean strategian valinta

Sovittakaa strategia käyttötarkoitukseen:

Näkyvyys — ensimmäisen näkymän alapuolinen sisältö (arvostelut, alatunnisteet)
Joutilaana — taustalla toimivat vimpaimet (analytiikka, uutiskirje)
Vuorovaikutus — käyttäjän toiminnolla paljastuva käyttöliittymä (valikot, modaalit)
Mediakysely — laitekohtainen käyttöliittymä

Huomioitavat kompromissit

Viivästetty hydratointi parantaa TTI:tä, mutta komponentti ei ole vuorovaikutteinen ennen käynnistystapahtumaa. Vuorovaikutukseen perustuvissa strategioissa ensimmäinen napsautus käytetään hydratoinnin käynnistämiseen, joten toiminta voi tuntua hieman viivästyneeltä. Käyttäkää ennakoivaa hydratointia ensisijaisen toimintakehotteen käyttöliittymässä.

Yhdistäminen islands-arkkitehtuuriin

Viivästetty hydraus yhdistyy islands-arkkitehtuuriin: suurin osa sivusta on staattista palvelimella renderöityä HTML:ää, ja vain interaktiiviset islandit hydratoidaan — strategian mukaan laiskasti. Tuloksena on mahdollisimman vähän asiakaspuolen JavaScriptiä ja nopea interaktiivisuus siellä, missä sillä on merkitystä.

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

Pikatesti

Testatkaa, miten hyvin ymmärrätte hydrausstrategiat.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte viivästetyn hydrauksen perusteet:

Nuxtin Lazy-etuliite tuo komponentit käyttöön laiskasti
hydrateOnVisible — kuvataajuuden alapuolella olevat osat IntersectionObserverin avulla
hydrateOnIdle — ei-kriittiset osat joutoajalla
hydrateOnInteraction — tapahtuman käynnistämänä, esimerkiksi napsautuksella tai kohdistuksella
Ydin-Vue tarjoaa nämä hydrate-apuohjelmina defineAsyncComponent-funktion yhteydessä

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Viivästetyn hydraation strategiat” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Viivästetyn hydraation strategiat”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Viivästetyn hydraation strategiat”?

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — Nuxtin lazy hydration Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Viivästetyn hydraation strategiat”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Vue Suspense -komponentti
Asynkroniset komponentit defineAsyncComponent-funktiolla
Suoratoistava SSR renderToWebStream-funktiolla
Viivästetyn hydraation strategiat

← Takaisin: Vue Academy