إزاي تمرر البيانات المشتركة Shared Data في Inertia.js بذكاء؟

لو بتشتغل بـ Laravel مع Vue.js أو React باستخدام إينيرشيا (Inertia.js)، أكيد في لحظة معينة لقيت نفسك بتكرر كود إرسال بيانات المستخدم أو إعدادات الموقع في كل Controller بتعمله، صح؟ ده مش بس بيخلي الكود "مكرر" (Repetitive)، ده كمان بيخلي الصيانة كابوس حقيقي. النهاردة هنتكلم عن "الخلاصة" وإزاي تستخدم الـ Shared Data عشان تخلي بياناتك متاحة في كل صفحات الـ Frontend من مكان واحد بس.

ليه بنحتاج Shared Data من الأساس؟

لما بنبني تطبيق ويب متكامل، دايماً بنحتاج بيانات ثابتة بتظهر في كل صفحة زي (اسم المستخدم المسجل، رسائل الفلاش Flash Messages، إعدادات الموقع زي الاسم واللوجو، أو حتى الكانفيج الخاص بالصلاحيات). بدل ما تبعتها مع كل Inertia::render، إينيرشيا وفرت لنا خاصية الـ Handle Inertia Requests Middleware، وهي المكان السحري اللي بيشيل عنك العبء ده.

الخطوة الأولى: التعامل مع Middleware

في تطبيق لاراڤيل، هتلاقي عندك ملف اسمه HandleInertiaRequests موجود في المسار app/Http/Middleware. ده "المطبخ" بتاعك. جوه الملف ده، في ميثود (Method) اسمها share، وهي دي اللي بنعرف فيها البيانات اللي عايزينها "تسمع" في كل حتة في الفرونت إيند.

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'flash' => [
            'message' => fn () => $request->session()->get('message')
        ],
        'site_settings' => [
            'name' => config('app.name'),
        ]
    ]);
}

إزاي توصل للبيانات دي في الفرونت إيند؟

بعد ما حددنا البيانات في الباك إيند، إينيرشيا بتبعت البيانات دي تلقائياً لكل مكونات (Components) الـ Vue أو React. في Vue.js الموضوع بسيط جداً باستخدام الـ usePage hook، أو ببساطة تقدر توصل للـ props في كل صفحة.

// مثال باستخدام Vue 3 Composition API
import { usePage } from '@inertiajs/vue3';
import { computed } from 'vue';

const page = usePage();
const user = computed(() => page.props.auth.user);

نصايح ذهبية للأداء (Performance Tips)

• التقييم الكسول (Lazy Evaluation): لاحظ في المثال فوق استخدمنا الـ Closure (fn) للرسائل. ده بيخلي إينيرشيا متعملش "Resolve" للبيانات دي غير لما الصفحة فعلاً تحتاجها، وده بيوفر كتير في استهلاك الميموري وسرعة الاستجابة.
• لا تبالغ في الحشو: متمررش بيانات ضخمة جداً في الـ Shared Data. خليها مقتصرة على البيانات اللي فعلاً بتستخدمها في الـ Layout الأساسي أو في كل الصفحات. البيانات الخاصة بصفحة معينة، مكانها الطبيعي هو الـ Controller الخاص بالصفحة دي.
• الأمان أولاً: اتأكد إنك بتبعت بيانات المستخدم الضرورية بس، وبلاش تبعت "الأوبجكت" بتاع اليوزر كامل لو فيه بيانات حساسة زي (password hash أو token) ممكن تتسرب للفرونت إيند بالخطأ. استخدم API Resources عشان تفلتر البيانات.

خاتمة: نصيحة من أخوك

البرمجة مش بس إنك تكتب كود يشتغل، البرمجة إنك تكتب كود "نضيف" (Clean Code) تقدر ترجعله بعد 6 شهور وتفهمه من غير ما تتعب. الـ Shared Data في Inertia.js واحدة من أقوى الأدوات اللي هتخلي الكود بتاعك احترافي. جرب دايماً تستخدم الـ Lazy Props عشان تحافظ على سرعة تطبيقك، وخلّيك دايماً حريص إنك تفصل الـ Logic عن الـ View.

لو عندك أي سؤال عن الـ State Management أو إزاي تربط إينيرشيا بشكل أفضل مع تطبيقاتك، سيبلي تعليق، ومستني أشوف تطبيقاتكم بتكبر وتنجح!