محمود سعداوي2 نشر 14 مارس 2023 أرسل تقرير نشر 14 مارس 2023 السلام عليكم. عند القيام بfetch api أستعمل الطريقة التالية const [products,setProducts] = useState([]) const fetchProducts = async () => { const response = await fetch('https://fakestoreapi.com/products') const data = await response.json() setProducts(data) } useEffect(()=> { fetchProducts() }, []) عند تحديث الصفحة بعد جلب البيانات للمرة الأولى يحصل بطء كبير في تشغيل الصفحة حتى أني غالبا ما أغلق صفحة الويب و أعيد كتابة npm start. ماهو السبب لو سمحتم و شكرا اقتباس
0 Mustafa Suleiman نشر 14 مارس 2023 أرسل تقرير نشر 14 مارس 2023 الكود المذكور لا يسبب أي مشكلة، حيث أنه يقوم بجلب البيانات من API وتحديث قيمة الحالة (state) باستخدام الدالة setProducts. ولكن قد يكون هناك بعض العوامل الخارجة عن الكود التي تؤثر على أداء تطبيقك، مثل: 1- حجم البيانات المسترجعة: إذا كانت هناك كمية كبيرة من البيانات المسترجعة، فقد يؤدي ذلك إلى بطء في عرض الصفحة. 2- ضعف سرعة الاتصال بالإنترنت: إذا كانت سرعة الاتصال بالإنترنت ضعيفة، فسيتأخر تحميل البيانات وعرضها على الصفحة. 3- الحمل الزائد على المعالج: إذا كان هناك حمل كبير على المعالج بسبب عدد كبير من العمليات التي يقوم بها المستخدم، فقد يتأخر تحميل الصفحة ويمكنك تجربة إعادة تشغيل الحاسوب الخاص بك. 4- مشكلة من جانب سيرفر الـ API: ربما السبب في بطيء الاستجابة من السيرفر الخاص بالـ API، حاول استخدام API آخر لتفقد سبب المشكلة. ويمكن تحسين أداء الصفحة عن طريق استخدام تقنيات التحميل التدفقي Streaming أو Lazy Loading، حيث يتم تحميل البيانات تدريجياً بدلاً من جلبها كلها مرة واحدة. أيضًا استخدام أدوات تحسين الأداء Performance Optimization مثل تحسين الصور والملفات وتحسين سرعة الاتصال بالإنترنت وتقليل عدد الطلبات الصادرة للخادم. وكنصيحة قم باستخدام Vite وليس Webpack فستلاحظ فرق كبير في الأداء. 1 اقتباس
0 أحمد رضا5 نشر 14 مارس 2023 أرسل تقرير نشر 14 مارس 2023 من الممكن أن يكون السبب في البطء هو عدد العناصر الكبير التي يتم جلبها من الخادم، وهذا يؤدي إلى تحميل الصفحة بشكل بطيء. وللتخفيف من هذه المشكلة، يمكنك تطبيق بعض التحسينات على رمز الاستدعاء والاستجابة لجعل الصفحة تحمل بسرعة أكبر. 1- استخدام pagination : يمكن استخدام التقسيم إلى صفحات لعرض عدد قليل من العناصر في كل صفحة. 2- إضافة صفحة تحميل: يمكن إضافة صفحة تحميل مؤقتة تظهر أثناء جلب البيانات من الخادم لتحسين تجربة المستخدم. 3- استخدام useCallback : لتحسين الأداء ، يمكنك استخدام useCallback لتجنب إعادة تشغيل الدالة fetchProducts عند تحديث الحالة الأخرى في التطبيق. 4- تحسين البيانات المستلمة: يمكنك تحسين البيانات التي تم جلبها من الخادم لجعلها أصغر حجمًا وتحميلها بشكل أسرع. 5- استخدام useMemo : لتجنب إعادة جلب البيانات من الخادم في كل مرة يتم فيها إعادة تقديم المكون، يمكن استخدام useMemo لتخزين البيانات وتجنب إعادة جلبها بشكل غير ضروري. مع تطبيق هذه التحسينات، يمكن تحسين أداء التطبيق وتقليل البطء الملاحظ عند جلب البيانات من الخادم. 1 اقتباس
0 عبدالباسط ابراهيم نشر 14 مارس 2023 أرسل تقرير نشر 14 مارس 2023 الإحتمال الأكبر لهذه المشكلة هو حجم البيانات التي تقوم بجلبها حيث أنك تقوم بجلب بيانات جميع المنتجات 'https://fakestoreapi.com/products' لذلك يمكنك تجربة جلب عدد محدد من المنتجات عن طريق ال limit كما في الكود التالي const fetchProducts = async () => { const response = await fetch('https://fakestoreapi.com/products?limit=5') const data = await response.json() setProducts(data) } قم بقراءة توثيق ال API للمزيد من المعلومات 1 اقتباس
السؤال
محمود سعداوي2
السلام عليكم.
عند القيام بfetch api أستعمل الطريقة التالية
const [products,setProducts] = useState([]) const fetchProducts = async () => { const response = await fetch('https://fakestoreapi.com/products') const data = await response.json() setProducts(data) } useEffect(()=> { fetchProducts() }, [])عند تحديث الصفحة بعد جلب البيانات للمرة الأولى يحصل بطء كبير في تشغيل الصفحة حتى أني غالبا ما أغلق صفحة الويب و أعيد كتابة npm start.
ماهو السبب لو سمحتم و شكرا
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.