ملف loading.js

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

export default function Loading() {
  // أو مكون هيكل تحميل مخصص
  return <p>جاري التحميل...</p>
}

export default function Loading() {
  // أو مكون هيكل تحميل مخصص
  return <p>جاري التحميل...</p>
}

داخل ملف loading.js، يمكنك إضافة أي واجهة تحميل خفيفة الوزن. قد تجد أنه من المفيد استخدام أدوات مطوري React لتبديل حدود Suspense يدويًا.

بشكل افتراضي، هذا الملف هو مكون خادم - ولكن يمكن أيضًا استخدامه كمكون عميل من خلال التوجيه "use client".

المرجع

المعاملات

لا تقبل مكونات واجهة التحميل أي معاملات.

السلوك

التنقل

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

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

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

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

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

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

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

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

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

رموز الحالة

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

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

حدود المتصفح

بعض المتصفحات تقوم بتخزين مؤقت لاستجابة البث. قد لا ترى استجابة البث حتى تتجاوز الاستجابة 1024 بايت. هذا يؤثر عادةً فقط على تطبيقات "hello world"، وليس التطبيقات الحقيقية.

دعم المنصة

خيار النشر	مدعوم
خادم Node.js	نعم
حاوية Docker	نعم
تصدير ثابت	لا
المحولات	حسب المنصة

تعلم كيفية تكوين البث عند استضافة Next.js ذاتيًا.

أمثلة

البث مع Suspense

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

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

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، تحصل على فوائد:

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

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

سجل الإصدارات

الإصدار	التغييرات
`v13.0.0`	تم تقديم `loading`.

On this page