الحصول على البيانات عن طريق fetch لاستخدام infinite scroll

لا يصح ذلك، البيانات الكبيرة يتم معالجتها من خلال Pagination أو Lazy Loading، بينما استخدم fetch فقط في حال البيانات صغيرة ومحدودة، أي قائمة بالدول، قائمة التصنيفات، إعدادات الموقع وهكذا، بمعنى لا يتجاوز عدد السجلات المُستردة من قاعدة البيانات 50 إلى 100 سجل.

فأحيانًا سيقوم المستخدم بفتح الصفحة وإغلاقها فورًا، فلماذا تجعله يحمل 1000 صورة ومنتج وهو لم يرى سوى أول 5؟ وكذلك هدر للموارد.

ولتنفيذ الـ Infinite Scroll أو Pagination فكلاهما نفس المفهوم لكن بشكل مختلف، فاعتمد على Intersection Observer API لمراقبة وصول المستخدم لنهاية الصفحة بدلاً من الاعتماد على حدث onScroll الذي يسبب بطء المتصفح.

وبالنسبة لحماية الـ API فهي عملية تتم عبر عدة طبقات، ولا يوجد حل واحد، بل مجموعة من الإجراءات، أولها تفعيل الـ CORS وهي ميزة أمان في المتصفحات، بيحث تقوم بضبط إعدادات السيرفر ليسمح فقط للدومين الخاص بك بطلب البيانات.

وداخل كود الـ API نفسه، قم بفحص الـ Headers القادمة مع الطلب وتأكد أن الـ Origin أو الـ Referer يطابق رابط موقعك.

واستخدم مصادقة للوصول للـ API، وحتى لو كان للقراءة فقط، فقم بإنشاء Token مؤقت للزائر يتم توليده من السيرفر عند فتح الصفحة، وبدونه يرفض الـ API أي طلب.

أيضًا تطبيق Rate Limiting، فلو استطاع شخص ما سرقة الـ API واستخدامه خارج موقعك، فمن خلاله تستطيع حماية السيرفر بتحديد عدد الطلبات الممكنة خلال دقيقة مثلاً.

بالنسبة لتنفيذ ال pagination أو تنفيذ fetch عدة مرات يعتمد على حجم البيانات لديك والمتوقعة أيضاً . حيث في حالة البيانات الثابتة والصغيرة جداً مثل قائمة "أنواع الحسابات" (مستخدم، مدير، مشرف) هنا طلب واحد (Request) أفضل من عدة طلبات صغيرة.

ولكن تخيل أن لديك 10,000 منتج. جلبها كلها دفعة واحدة سيجعل المتصفح يتجمد لعدة ثوانٍ، وسيزيد الضغط على السيرفر وقاعدة البيانات ولذلك الأفضل هو استدعاء البيانات تدريجياً (كلما وصل المستخدم لنهاية الصفحة).

ثانياً بالنسبة لل API فيمكنك جعل الأمر صعباً جداً من خلال عدة خطوات أولها ضبط إعدادات CORS بحيث تقوم بضبط Access-Control-Allow-Origin ليكون رابط موقعك فقط بدلاً من *.

وتحتاج داخل الكود الخاص بك في السيرفر، التحقق من الـ Headers القادمة مع الطلب أن Referer أو Origin يأتي من نطاق موقعك (Domain) فإذا كان الطلب قادماً من مصدر مجهول أو مختلف، قم برفض الطلب (Return 403 Forbidden).

أيضاً يمكنك التأكد أن كل طلب يأتي من مستخدم مسجل دخوله. عن طريق استخدام JWT tokens أو Session cookies