الحصول على البيانات عن طريق 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 واستخدامه خارج موقعك، فمن خلاله تستطيع حماية السيرفر بتحديد عدد الطلبات الممكنة خلال دقيقة مثلاً.