واجهة التحميل والبث المباشر (Streaming)

يساعدك الملف الخاص loading.js في إنشاء واجهة تحميل ذات معنى باستخدام React Suspense. مع هذه الاتفاقية، يمكنك عرض حالة تحميل فورية من الخادم أثناء تحميل محتوى جزء المسار. يتم استبدال المحتوى الجديد تلقائيًا بمجرد اكتمال التصيير.

حالات التحميل الفورية

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

قم بإنشاء حالة تحميل عن طريق إضافة ملف loading.js داخل مجلد.

export default function Loading() {
  // يمكنك إضافة أي واجهة مستخدم داخل Loading، بما في ذلك الهيكل العظمي.
  return <LoadingSkeleton />
}

export default function Loading() {
  // يمكنك إضافة أي واجهة مستخدم داخل Loading، بما في ذلك الهيكل العظمي.
  return <LoadingSkeleton />
}

في نفس المجلد، سيتم تداخل loading.js داخل layout.js. سيقوم تلقائيًا بلف ملف page.js وأي أطفال أدناه في حدود <Suspense>.

جيد أن تعرف:

• التنقل فوري، حتى مع التوجيه المركزي للخادم.
• التنقل قابل للمقاطعة، مما يعني أن تغيير المسارات لا يحتاج إلى انتظار تحميل محتوى المسار بالكامل قبل التنقل إلى مسار آخر.
• تبقى التخطيطات المشتركة قابلة للتشغيل أثناء تحميل أجزاء المسار الجديدة.

التوصية: استخدم اتفاقية loading.js لأجزاء المسار (التخطيطات والصفحات) حيث يقوم Next.js بتحسين هذه الوظيفة.

البث المباشر مع Suspense

بالإضافة إلى loading.js، يمكنك أيضًا إنشاء حدود Suspense يدويًا لمكونات واجهة المستخدم الخاصة بك. يدعم موجه التطبيق البث المباشر مع Suspense لكل من بيئات تشغيل Node.js و Edge.

ما هو البث المباشر؟

لفهم كيفية عمل البث المباشر في React وNext.js، من المفيد فهم التصيير من جانب الخادم (SSR) وقيودها.

مع SSR، هناك سلسلة من الخطوات التي يجب إكمالها قبل أن يتمكن المستخدم من رؤية الصفحة والتفاعل معها:

1. أولاً، يتم جلب جميع البيانات لصفحة معينة على الخادم.
2. ثم يقوم الخادم بتصيير HTML للصفحة.
3. يتم إرسال HTML وCSS وJavaScript للصفحة إلى العميل.
4. يتم عرض واجهة مستخدم غير تفاعلية باستخدام HTML المُنشأ وCSS.
5. أخيرًا، يقوم React بترطيب (hydrate) واجهة المستخدم لجعلها تفاعلية.

هذه الخطوات متسلسلة وحظرية، مما يعني أن الخادم يمكنه فقط تصيير HTML للصفحة بمجرد جلب جميع البيانات. وعلى العميل، يمكن لـ React فقط ترطيب واجهة المستخدم بمجرد تنزيل كود جميع المكونات في الصفحة.

يساعد SSR مع React وNext.js في تحسين أداء التحميل الملاحظ من خلال عرض صفحة غير تفاعلية للمستخدم في أسرع وقت ممكن.

ومع ذلك، يمكن أن يظل بطيئًا حيث يجب إكمال جلب جميع البيانات على الخادم قبل إمكانية عرض الصفحة للمستخدم.

يتيح لك البث المباشر تقسيم HTML للصفحة إلى أجزاء أصغر وإرسال تلك الأجزاء تدريجيًا من الخادم إلى العميل.

هذا يمكّن أجزاء من الصفحة من الظهور عاجلاً، دون انتظار تحميل جميع البيانات قبل تصيير أي واجهة مستخدم.

يعمل البث المباشر جيدًا مع نموذج مكونات React لأن كل مكون يمكن اعتباره جزءًا. يمكن إرسال المكونات ذات الأولوية الأعلى (مثل معلومات المنتج) أو التي لا تعتمد على البيانات أولاً (مثل التخطيط)، ويمكن لـ React بدء الترطيب مبكرًا. يمكن إرسال المكونات ذات الأولوية المنخفضة (مثل المراجعات، المنتجات ذات الصلة) في نفس طلب الخادم بعد جلب بياناتها.

البث المباشر مفيد بشكل خاص عندما تريد منع طلبات البيانات الطويلة من حظر تصيير الصفحة حيث يمكنه تقليل وقت الوصول إلى البايت الأول (TTFB) وأول طلاء للمحتوى (FCP). كما أنه يساعد في تحسين الوقت للتفاعل (TTI)، خاصة على الأجهزة الأبطأ.

مثال

يعمل <Suspense> عن طريق لف مكون يقوم بإجراء غير متزامن (مثل جلب البيانات)، وعرض واجهة مستخدم احتياطية (مثل هيكل عظمي، دائرة دوارة) أثناء حدوث ذلك، ثم استبدال مكونك بمجرد اكتمال الإجراء.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>جاري تحميل التغذية...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>جاري تحميل الطقس...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>جاري تحميل التغذية...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>جاري تحميل الطقس...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

باستخدام Suspense، تحصل على فوائد:

1. تصيير الخادم مع البث المباشر - تصيير HTML تدريجيًا من الخادم إلى العميل.
2. الترطيب الانتقائي - يعطي React الأولوية للمكونات التي يجب جعلها تفاعلية أولاً بناءً على تفاعل المستخدم.

لمزيد من أمثلة وحالات استخدام Suspense، يرجى الاطلاع على توثيق React.

تحسين محركات البحث (SEO)

• سينتظر Next.js اكتمال جلب البيانات داخل generateMetadata قبل بث واجهة المستخدم إلى العميل. وهذا يضمن أن الجزء الأول من الاستجابة المبثوثة يتضمن علامات <head>.
• نظرًا لأن البث المباشر يتم تصييره من الخادم، فإنه لا يؤثر على تحسين محركات البحث. يمكنك استخدام أداة Mobile Friendly Test من Google لمعرفة كيف تظهر صفحتك لمحركات البحث في Google وعرض HTML المتسلسل (المصدر).

رموز الحالة

عند البث المباشر، سيتم إرجاع رمز حالة 200 للإشارة إلى نجاح الطلب.

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