دليل عملي لاستخدام Deferred Props في Inertia 2

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

ما هي Deferred Props؟

تسمح لك Deferred Props بتحديد أولوية البيانات الحرجة وتأجيل البيانات غير الضرورية، بحيث يتم تحميلها فقط عند الحاجة. هذا مفيد بشكل خاص لـ:

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

المثال 1: تأجيل البيانات في الواجهة الخلفية

لنبدأ بمثال في الواجهة الخلفية. لنفترض أن لديك مسار /courses حيث تريد عرض قائمة بالدورات والموضوعات ذات الصلة. ومع ذلك، جلب جميع البيانات دفعة واحدة قد يبطئ تحميل الصفحة الأولي. باستخدام Deferred Props، يمكنك تحديد أولوية البيانات الحرجة وتأجيل البيانات غير الضرورية.

إليك كيف يمكنك تنفيذ ذلك في وحدة التحكم الخاصة بك:

use Inertia\Inertia;
use Inertia\Deferred;
use App\Models\Course;
use App\Models\Topic;

class CourseController extends Controller
{
    public function index()
    {
        return Inertia::render('Courses/Index', [
            'courses' => new Deferred(function () {
                sleep(5); // محاكاة استعلام بطيء
                return Course::all();
            }, 'low'), // أولوية منخفضة

            'topics' => new Deferred(function () {
                sleep(2); // محاكاة استعلام أسرع
                return Topic::all();
            }, 'high'), // أولوية عالية
        ]);
    }
}

الشرح:

• courses: يتم تأجيل هذه البيانات بأولوية low، مما يعني أنها سيتم تحميلها فقط عند الطلب الصريح.
• topics: يتم تأجيل هذه البيانات بأولوية high، مما يعني أنها سيتم تحميلها قبل courses ولكن بعد البيانات الحرجة.

المثال 2: التعامل مع Deferred Props في الواجهة الأمامية

الآن بعد أن قمنا بتأجيل البيانات في الواجهة الخلفية، دعونا نرى كيفية التعامل معها في الواجهة الأمامية. في هذا المثال، سنستخدم Vue.js لعرض البيانات المؤجلة topics و courses في الواجهة الأمامية.

<template>
  <div>
    <h1>الدورات</h1>

    <!-- عرض البيانات المؤجلة للدورات -->
    <Deferred :data="courses">
      <template #fallback>
        <LoadingSpinner /> <!-- عرض مؤشر تحميل أثناء التحميل -->
      </template>

      <template #default>
        <CourseCard
          v-for="course in courses"
          :key="course.id"
          :course="course"
        />
      </template>
    </Deferred>

    <!-- عرض البيانات المؤجلة للموضوعات -->
    <Deferred :data="topics">
      <template #fallback>
        <LoadingSpinner /> <!-- عرض مؤشر تحميل أثناء التحميل -->
      </template>

      <template #default>
        <TopicCard
          v-for="topic in topics"
          :key="topic.id"
          :topic="topic"
        />
      </template>
    </Deferred>
  </div>
</template>

<script>
export default {
  props: {
    courses: Array,
    topics: Array,
  },
};
</script>

الشرح:

• <Deferred>: يتم استخدام هذا المكون للتعامل مع البيانات المؤجلة. يتم جلب البيانات تلقائيًا عند الحاجة.
• #fallback: يتم استخدام هذا الفتحة لعرض مؤشر تحميل (أو أي واجهة بديلة) أثناء جلب البيانات.
• #default: يتم استخدام هذا الفتحة لعرض البيانات الفعلية بمجرد تحميلها.

فوائد استخدام Deferred Props

1. تحسين الأداء: عن طريق تأجيل البيانات غير الضرورية، يتم تقليل حجم البيانات الأولية، مما يؤدي إلى تحميل الصفحة بشكل أسرع.
2. تجربة مستخدم أفضل: يرى المستخدمون المحتوى الأكثر أهمية أولاً، بينما يتم تحميل البيانات غير الضرورية في الخلفية.
3. استخدام فعال للموارد: يتم تحميل البيانات فقط عند الحاجة، مما يقلل من الحمل غير الضروري على الخادم وعرض النطاق الترددي.

الخلاصة

تعد Deferred Props في Inertia 2 ميزة قوية لتحسين أداء تطبيقاتك. عن طريق تأجيل البيانات غير الضرورية، يمكنك ضمان تحميل تطبيقك بسرعة وكفاءة، مما يوفر تجربة أفضل للمستخدمين.

توضح الأمثلة أعلاه كيفية تنفيذ Deferred Props في كل من الواجهة الخلفية والأمامية. جربها في مشروعك القادم وشاهد الفرق بنفسك!

مصادر

• توثيق Inertia.js
• فيديو Laracast