Vue Academy · درس

استراتيجيات Hydration المؤجلة

‏hydrateOnIdle() وhydrateOnVisible() وhydrateOnInteraction() — Hydration الكسول في Nuxt

استراتيجيات Hydration المؤجلة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

مشكلة تكلفة الترطيب

يرسل SSR HTML جاهزًا للعرض، لكن لا يزال على العميل ترطيب كل مكوّن لجعله تفاعليًا. يؤدي ترطيب كل شيء مقدمًا إلى حجب الخيط الرئيسي وتأخير التفاعل (TTI).

يؤخر الترطيب المؤجل (الكسول) ترطيب المكونات حتى الحاجة إليها فعليًا.

بادئة Nuxt للتحميل الكسول التلقائي

في Nuxt، تؤدي إضافة البادئة Lazy إلى اسم المكوّن إلى استيراده بشكل كسول. وبالاقتران مع استراتيجيات الترطيب، يؤجل ذلك تنزيل JavaScript وعملية الترطيب معًا.

<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>

واجهة Vue الأساسية: مساعدات hydrate

خارج Nuxt، توجد الاستراتيجيات نفسها على هيئة مساعدات للترطيب تُمرَّر إلى خيار hydrate في defineAsyncComponent. وما بادئات Nuxt إلا صيغة مختصرة لهذه المساعدات.

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

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

اختيار الاستراتيجية المناسبة

طابقوا الاستراتيجية مع الهدف:

Visible — محتوى أسفل الجزء الظاهر (مثل المراجعات والتذييلات)
Idle — أدوات تعمل في الخلفية (مثل التحليلات والنشرة البريدية)
Interaction — واجهة تظهر نتيجة إجراء من المستخدم (مثل القوائم والنوافذ المنبثقة)
Media query — واجهة خاصة بجهاز معين

مقايضات ينبغي الانتباه إليها

يحسن الترطيب المؤجل TTI، لكنه يعني أن المكوّن غير تفاعلي حتى وقوع الحدث المحفز. وفي الاستراتيجيات المعتمدة على التفاعل، تُستهلك النقرة الأولى نفسها لتشغيل الترطيب، وقد تبدو متأخرة قليلًا. خصصوا الترطيب الفوري لواجهة المستخدم الأساسية التي تحث على اتخاذ إجراء.

التكامل مع بنية الجزر

يتكامل الترطيب المؤجل مع بنية الجزر: معظم الصفحة عبارة عن HTML ثابت مُولَّد على الخادم، ولا تُرطَّب إلا الجزر التفاعلية — بتحميل كسول وفقًا للاستراتيجية. والنتيجة هي أقل قدر ممكن من JavaScript على العميل، وتفاعلية سريعة حيث تكون مهمة.

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

اختبار سريع

اختبروا فهمكم لاستراتيجيات الترطيب.

مراجعة

تعلّمتم الترطيب المؤجل:

تستورد بادئة Lazy في Nuxt المكوّنات بتحميل كسول
hydrateOnVisible — للمحتوى أسفل الجزء المرئي، باستخدام IntersectionObserver
hydrateOnIdle — للمحتوى غير الحرج أثناء وقت الخمول
hydrateOnInteraction — يُفعَّل بواسطة الأحداث (النقر/التركيز)
يتيح Vue الأساسي هذه المزايا كمساعدات hydrate ضمن defineAsyncComponent

الأسئلة الشائعة

هل درس «استراتيجيات Hydration المؤجلة» مجاني؟

نعم — نص درس «استراتيجيات Hydration المؤجلة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «استراتيجيات Hydration المؤجلة»؟

‏hydrateOnIdle() وhydrateOnVisible() وhydrateOnInteraction() — Hydration الكسول في Nuxt تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «استراتيجيات Hydration المؤجلة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

مكوّن Vue Suspense
المكوّنات غير المتزامنة باستخدام defineAsyncComponent
‏SSR المتدفق باستخدام renderToWebStream
استراتيجيات Hydration المؤجلة

← العودة إلى Vue Academy