Vue Academy · บทเรียน

กลยุทธ์การไฮเดรตแบบเลื่อนเวลา

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — การไฮเดรตแบบขี้เกียจของ Nuxt

กลยุทธ์การไฮเดรตแบบเลื่อนเวลา เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

ปัญหาต้นทุนของการไฮเดรต

SSR ส่ง HTML ที่พร้อมแสดงผลมาให้ แต่ไคลเอ็นต์ยังต้องไฮเดรตคอมโพเนนต์ทุกตัวเพื่อทำให้โต้ตอบได้ การไฮเดรตทุกอย่างตั้งแต่ต้นจะบล็อกเธรดหลักและทำให้การโต้ตอบล่าช้า (TTI)

การไฮเดรตแบบเลื่อนเวลาจะชะลอการไฮเดรตของคอมโพเนนต์จนกว่าจะจำเป็นต้องใช้จริง

คำนำหน้า Auto-Lazy ของ Nuxt

ใน Nuxt การเติม Lazy ไว้หน้าชื่อคอมโพเนนต์จะทำให้คอมโพเนนต์นั้นถูกนำเข้าแบบล่าช้า เมื่อใช้ร่วมกับกลยุทธ์การไฮเดรต วิธีนี้จะเลื่อนทั้งการดาวน์โหลด JS และงานไฮเดรตออกไป

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

hydrateOnVisible

hydrateOnVisible จะไฮเดรตคอมโพเนนต์ก็ต่อเมื่อคอมโพเนนต์เลื่อนเข้าสู่พื้นที่แสดงผล โดยใช้ IntersectionObserver อยู่เบื้องหลัง เหมาะอย่างยิ่งสำหรับส่วนที่อยู่ถัดจากครึ่งหน้าจอแรก

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

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

hydrateOnVisible กับระยะขอบ

คุณสามารถส่งตัวเลือกของ IntersectionObserver เพื่อให้เริ่มไฮเดรตก่อนที่องค์ประกอบจะมองเห็นเล็กน้อย ซึ่งช่วยให้ประสบการณ์ราบรื่นขึ้น

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

hydrateOnIdle

hydrateOnIdle จะรอให้เบราว์เซอร์ว่าง (ผ่าน requestIdleCallback) ก่อนทำการไฮเดรต ให้ใช้กับวิดเจ็ตที่ไม่สำคัญเร่งด่วนและไม่ควรแย่งทรัพยากรกับการโต้ตอบเริ่มต้น

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

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

hydrateOnInteraction

hydrateOnInteraction จะเลื่อนการไฮเดรตออกไปจนกว่าเหตุการณ์ DOM ที่ระบุจะเกิดขึ้นบนองค์ประกอบ (การคลิก การโฟกัส หรือการวางเมาส์เหนือ) คอมโพเนนต์จะยังคงเป็น HTML แบบคงที่จนกว่าผู้ใช้จะเริ่มโต้ตอบ

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

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

hydrateOnMediaQuery

hydrateOnMediaQuery จะไฮเดรตก็ต่อเมื่อคิวรีสื่อตรงตามเงื่อนไข เช่น ไฮเดรตแถบด้านข้างสำหรับเดสก์ท็อปเท่านั้นที่ถูกซ่อนบนอุปกรณ์เคลื่อนที่ เพื่อหลีกเลี่ยงงานที่สูญเปล่าบนหน้าจอขนาดเล็ก

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

API หลักของ Vue: ตัวช่วยไฮเดรต

นอก Nuxt กลยุทธ์เดียวกันนี้มีอยู่ในรูปตัวช่วยไฮเดรตที่ส่งให้กับตัวเลือก hydrate ของ defineAsyncComponent คำนำหน้าของ Nuxt เป็นเพียงรูปแบบย่อของสิ่งเหล่านี้

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

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

การเลือกกลยุทธ์ที่เหมาะสม

เลือกกลยุทธ์ให้ตรงกับจุดประสงค์:

มองเห็น — เนื้อหาที่อยู่ถัดจากครึ่งหน้าจอแรก (รีวิว ส่วนท้ายหน้า)
ว่าง — วิดเจ็ตเบื้องหลัง (การวิเคราะห์การใช้งาน จดหมายข่าว)
การโต้ตอบ — ส่วนติดต่อผู้ใช้ที่แสดงเมื่อผู้ใช้ดำเนินการ (เมนู หน้าต่างโมดัล)
คิวรีสื่อ — ส่วนติดต่อผู้ใช้เฉพาะอุปกรณ์

ข้อแลกเปลี่ยนที่ควรระวัง

การไฮเดรตแบบเลื่อนเวลาช่วยปรับปรุง TTI แต่หมายความว่าคอมโพเนนต์จะโต้ตอบไม่ได้จนกว่าตัวกระตุ้นจะทำงาน สำหรับกลยุทธ์ที่อิงการโต้ตอบ การคลิกครั้งแรกจะถูกใช้เพื่อเริ่มการไฮเดรต จึงอาจรู้สึกล่าช้าเล็กน้อย ควรสงวนการไฮเดรตทันทีไว้สำหรับส่วนติดต่อผู้ใช้ที่เป็นคำกระตุ้นให้ดำเนินการหลัก

การทำงานร่วมกับส่วนเกาะ

ไฮเดรชันแบบเลื่อนเวลาทำงานคู่กับสถาปัตยกรรมแบบเกาะ โดยหน้าเว็บส่วนใหญ่เป็น HTML ที่เรนเดอร์จากเซิร์ฟเวอร์แบบคงที่ และมีเพียงส่วนเกาะที่โต้ตอบได้เท่านั้นที่ทำไฮเดรชัน — อย่างชะลอตามกลยุทธ์ ผลลัพธ์คือ JS ฝั่งไคลเอนต์มีน้อยที่สุด และการโต้ตอบรวดเร็วตรงจุดที่สำคัญ

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

ตรวจความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับกลยุทธ์ไฮเดรชัน

ทบทวน

คุณได้เรียนรู้เรื่องไฮเดรชันแบบเลื่อนเวลา:

คำนำหน้า Lazy ของ Nuxt จะนำเข้าคอมโพเนนต์แบบชะลอ
hydrateOnVisible — ส่วนที่อยู่ใต้พื้นที่มองเห็นเริ่มต้น โดยใช้ IntersectionObserver
hydrateOnIdle — ส่วนที่ไม่สำคัญเร่งด่วน ระหว่างช่วงเวลาว่าง
hydrateOnInteraction — เรียกใช้ตามเหตุการณ์ เช่น การคลิกหรือ focus
Vue แกนหลักเปิดให้ใช้สิ่งเหล่านี้เป็นตัวช่วย hydrate บน defineAsyncComponent

คำถามที่พบบ่อย

บทเรียน “กลยุทธ์การไฮเดรตแบบเลื่อนเวลา” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “กลยุทธ์การไฮเดรตแบบเลื่อนเวลา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “กลยุทธ์การไฮเดรตแบบเลื่อนเวลา”

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — การไฮเดรตแบบขี้เกียจของ Nuxt คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “กลยุทธ์การไฮเดรตแบบเลื่อนเวลา” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

คอมโพเนนต์ Vue Suspense
คอมโพเนนต์แบบอะซิงโครนัสด้วย defineAsyncComponent
SSR แบบสตรีมด้วย renderToWebStream
กลยุทธ์การไฮเดรตแบบเลื่อนเวลา

← กลับไปที่ Vue Academy