لتقديم تجربة رائعة لمستخدم موقع الويب ، نحتاج إلى تحسين وقت تحميل الصفحة الأولية الأولى واستجابة الصفحة للتفاعل. كلما زادت سرعة استجابة صفحتك لإدخال المستخدم - كان ذلك أفضل.
رد فعل 18 تم تصميمه للمساعدة في تحسين التفاعل مع ميزات مثل ترطيب انتقائي مع Suspense
لجعل الترطيب غير مانع وتزويدنا بمزيد من الشفافية حول كيفية عملنا معماري ستؤثر الخيارات على تجربة المستخدم والأداء في تطبيقنا. تُجري React 18 تحسينات كبيرة في الأداء وتضيف دعمًا لملفات Suspense
في العرض من جانب الخادم (SSR) ، مما يسمح بتقديم أجزاء من التطبيق بشكل غير متزامن ، يمكنك التفاف جزء بطيء من تطبيقك داخل مكون Suspense ، لإخبار React بتأخير تحميل المكون البطيء.
يتيح لك العرض من جانب الخادم إنشاء HTML من مكونات React على الخادم ، وإرسال HTML إلى المستخدمين. تتيح SSR للمستخدمين رؤية محتوى الصفحة قبل تحميل حزمة JavaScript وتشغيلها ، وبعد ذلك يتم تحميل شفرة JavaScript ودمجها مع HTML ، وإرفاق معالجات الأحداث - وهي إضافة الماء. على عكس دفق HTML التقليدي ، لا يجب أن يحدث ذلك بالترتيب التنازلي.
بدافع Suspense
، يمكنك إخبار React بإرسال HTML للمكونات الأخرى أولاً مع HTML للعنصر النائب ، مثل أداة التحميل الدوارة. إنه يحسن بشكل كبير تجربة المستخدم ووقت الاستجابة الذي يتخيله المستخدم.
هناك ميزتان رئيسيتان لـ SSR في رد الفعل 18 مقفلة بالتشويق:
- دفق HTML على الخادم.
- ترطيب انتقائي للعميل.
دعنا نستكشف رد فعل نهج جلب البيانات مع useEffect
و Suspense
حاول مقارنة البيانات الخلفية التي تجلب الحلول العملية ، في حالتنا نختار نظام CMS مقطوع الرأس سريع وبديهي كوني. يمكنك التحقق من أمثلة التعليمات البرمجية الخاصة بنا عن طريق الارتباط StackBlitz.
التكامل الكوني مقطوع الرأس CMS
لجلب البيانات التي نستخدمها الكونية مقطوعة الرأس CMS هو نظام إدارة محتوى للجهة الخلفية فقط (CMS) هو نظام إدارة محتوى للجهة الخلفية فقط (CMS) ، تم إنشاؤه من الألف إلى الياء كمستودع محتوى يتيح الوصول إلى المحتوى. لدمج القيم والحصول عليها من Cosmic ، نحتاج إلى تثبيت وحدة Cosmic في مشروعك.
npm i cosmicjs yarn add cosmicjs
ثم قم بإنشاء ملف حساب كوني مجاني وانتقل إلى لوحة القيادة الكونية Your Bucket > Settings > API Access
وابحث عن سبيكة Bucket ومفتاح قراءة API وأضفهما لإنشاء وظيفة جلب Cosmic fetchDataByType
طلب إلى حاوية Cosmic الخاصة بك وجلب محتوى الفئات الذي تم إنشاؤه بواسطة الاستعلام الكوني نوع categories
.
import Cosmic from 'cosmicjs'; const bucket = Cosmic().bucket({ slug: 'your_cosmic_slug', read_key: 'your_cosmic_read_key',
}); export async function fetchDataByType(objectType = 'categories') { const params = { query: { type: objectType, }, props: 'title,slug,id,metadata', sort: '-created_at', }; try { const data = await bucket.getObjects(params); return data.objects; } catch (error) { return { error }; }
}
يوفر Cosmic أيضًا ميزات قوية لنمذجة المحتوى تتيح لك إنشاء أي نوع من المحتوى بسرعة فائقة ونشر متعدد القنوات ، لتحقيق الإنشاء مرة واحدة والنشر في كل مكان.
الجلب عند التقديم
نهج الجلب عند التقديم يتم تشغيل طلب الشبكة في المكون نفسه بعد التثبيت ، ولا يتم تشغيل الطلب حتى يتم عرض المكون. إذا لم تكتب وظيفة تنظيف تتجاهل الاستجابات التي لا معنى لها ، فستلاحظ وجود ملف حالة السباق (في React) خطأ عند إجراء طلبين مختلفين قليلاً للبيانات ، ويعرض التطبيق نتيجة مختلفة بناءً على الطلب الذي يكتمل أولاً. في الواقع في React 18 ، إذا قمت بتمكين StrictMode في تطبيقك ، فستكتشف في وضع التطوير أنه سيتم استدعاء useEffect مرتين ، لأن React ستقوم الآن بتركيب المكون الخاص بك ، وإلغاء تحميله ، ثم تثبيته مرة أخرى ، للتحقق مما إذا كانت التعليمات البرمجية الخاصة بك يعمل بشكل صحيح.
دعنا نصلح حالة جلب البيانات الخاصة بالسباق من خلال الاستفادة من useEffect
وظيفة التنظيف. إذا كنا على ما يرام في تقديم عدة طلبات ، ولكن عرض النتيجة الأخيرة فقط ، فيمكننا استخدام علامة منطقية isMount
:
import React, { useEffect, useState } from 'react';
import Category from './components/Category';
import { fetchDataByType } from './cosmic.js'; const App = () => { const [categories, setCategories] = useState([]); const getCategories = async () => { const result = await fetchDataByType('categories'); if (result.length) { setCategories(result); } }; useEffect(() => { let isMount = true; if (isMount) { getCategories(); } return () => { isMount = false; }; }, []); return ( <div className={cn('container', styles.container)}> <div className={styles.sidebar}> <div className={styles.collections}> {categories?.map((category) => ( <Category key={category.id} info={category} /> ))} </div> </div> </div> );
}; export default App;
بالإضافة إلى ذلك ، إذا تم عرض أحد المكونات عدة مرات (كما يحدث عادةً) ، فسيتم تنظيف التأثير السابق قبل تنفيذ التأثير التالي.
في هذه الحالة ، لا يزال لدينا حالة سباق بمعنى أن الطلبات المتعددة إلى Cosmic ستكون على متن الطائرة ، ولكن سيتم استخدام نتائج آخر طلب فقط.
أيضا كما دان ابراموف يفسر، الجلب عند التقديم يوفر التنقل البطيء بين الشاشات. اذا كنت تمتلك مكونات الوالدين والطفل كلاهما يقوم بعملية الجلب useEffects
، فلن يتمكن المكون الفرعي من بدء الجلب حتى ينتهي المكون الرئيسي من الجلب. هذه الأنواع من مشاكل الأداء شائعة جدًا في التطبيقات ذات الصفحة الواحدة وتتسبب في بطء أكثر بكثير من "إعادة العرض المفرط" وإذا كان لدينا تطبيق معقد بطلبات متوازية متعددة ، فسنرى أجزاء مختلفة من تحميل التطبيق بترتيب عشوائي . السلوك الطبيعي للتطبيق هو عرض الأشياء من أعلى إلى أسفل.
تجسيد كما تجلب
نهج التقديم كما تجلب يتيح لنا البدء في تقديم المكون الخاص بنا فورًا بعد تشغيل طلب الشبكة ونبدأ في التقديم فورًا بعد بدء طلب الشبكة.
التشويق لجلب البيانات
باستخدام Suspense ، لا ننتظر رد الرد قبل أن نبدأ في التقديم وتقليل إجمالي وقت الحظر (TBT) لمثالنا من 106 مللي ثانية إلى 56 مللي ثانية.
مجموعة ميزات فريق React الأساسية المتزامنة لتسهيل جلب البيانات في React. تشويق من بين هؤلاء ، ويهدف إلى تبسيط إدارة حالات التحميل في مكونات React. إنها ميزة لإدارة العمليات غير المتزامنة في تطبيق React وتتيح لك أيضًا استخدام <Suspense>
لكي "تنتظر" بشكل إعلاني أي شيء آخر ، بما في ذلك البيانات ، ولم تعد مضطرًا إلى انتظار تحميل جميع JavaScript لبدء ترطيب أجزاء من الصفحة.
أولاً ، نقوم بتشغيل طلب الشبكة قبل عرض أي مكونات في السطر الأول. رئيسيا App
المكون ، نلتف على حد سواء Category
و Cards
, Main
مكونات منفصلة Suspense
المكونات مع احتياطياتها.
متى App
يتصاعد لأول مرة ، فإنه يحاول تقديم Category
وهذا يؤدي إلى تشغيل resourseCategories.read()
خط. إذا لم تكن البيانات جاهزة بعد (على سبيل المثال ، لم يتم حل الطلب) ، فسيتم إرساله مرة أخرى إلى Suspense ، والذي يتم عرضه بعد ذلك <p>Loading…</p>
. نفس الشيء يحدث ل Cards
و Main
import React, { Suspense } from 'react'; const App = () => { return ( <main> <Suspense fallback={<p>Loading.....</p>}> <Cards /> </Suspense> <div> <Suspense fallback={<p>Loading.....</p>}> <Category /> </Suspense> </div> </main> );
}; export default App;
Suspense
ليست واجهة جديدة لجلب البيانات ، حيث لا تزال هذه الوظيفة مفوضة إلى مكتبات مثل الجلب أو Axios ، و Suspense
المهمة الحقيقية هي أن تقول فقط "أظهر هذا الرمز أثناء التحميل ، وأظهر أنه عند الانتهاء" ، لا شيء أكثر من ذلك.
لف منطق الجلب الخاص بك wrapPromise.js
نحتاج أيضًا إلى منطق الالتفاف الجلب ، لطرح استثناء عندما تقوم مكوناتنا بتحميل البيانات أو فشلها ، ولكن بعد ذلك ببساطة نعيد الاستجابة بمجرد ظهور Promise
تم حله بنجاح وإذا كان لا يزال معلقًا ، فإنه يتراجع عن الوعد.
function wrapPromise(promise) { let status = 'pending'; let response; const suspender = promise.then( res => { status = 'success'; response = res.objects; }, err => { status = 'error'; response = err; }, ); const handler = { pending: () => { throw suspender; }, error: () => { throw response; }, default: () => response, }; const read = () => { const result = handler[status] ? handler[status]() : handler.default(); return result; }; return { read };
} export default wrapPromise;
في نهاية wrapPromise
ستتحقق الوظيفة من حالة وعدنا ، ثم تعيد كائنًا يحتوي على read
تعمل كطريقة ، وهذا ما ستتفاعل معه مكونات React لاسترداد قيمة الوعد.
الآن سنحتاج إلى ربط وظائف استدعاء Cosmic بـ wrapPromise
:
export function fetchDataByType(objectType = 'categories') { const params = { query: { type: objectType, }, props: 'title,slug,id,metadata', sort: '-created_at', }; const data = bucket.getObjects(params); return wrapPromise(data);
}
ما سبق هو مجرد فكرة مجردة عن وظائف الجلب الكونية Suspense
وجلب مرة واحدة.
اقرأ البيانات الموجودة في المكون
بمجرد الانتهاء من كل شيء في جانب جلب الأشياء ، نريد استخدامه في المكون الخاص بنا. إذن ما يحدث عندما نطلق على المكون ، read()
ستبدأ الوظيفة في طرح الاستثناءات حتى يتم حلها بالكامل ، وعندما يحدث ذلك ستستمر مع بقية الكود ، في حالتنا لتقديمها.
import React from 'react';
import { fetchDataByType } from '../../cosmic.js';
import styles from '../../styles/Collection.module.scss'; const resourseCategories = fetchDataByType(); const Category = () => { const categories = resourseCategories.read(); const renderCategories = categories?.map((info) => ( <div key={info?.id} className={styles.user}> <div className={styles.avatar}> <img className={styles.image} src={info?.metadata?.image?.imgix_url} alt="Avatar" /> </div> <div className={styles.description}> <div className={styles.name}>{info?.metadata?.title}</div> <div className={styles.money} dangerouslySetInnerHTML={{ __html: info?.content }} /> </div> </div> )); return <div className={styles.collections}>{renderCategories}</div>;
}; export default Category;
المكون الرئيسي
Suspense
يمنح React وصولاً إلى الحالات المعلقة في تطبيقاتنا وهذا هو سبب علم React بحدوث مكالمة شبكة ، وهذا يسمح لنا بتقديم مكون احتياطي بشكل إعلاني أثناء الانتظار.
import React, { Suspense } from 'react';
import Cards from './components/Cards';
import Category from './components/Category';
import Main from './components/Main';
import styles from './styles/Collection.module.scss'; const App = () => { return ( <div className={styles.wrapper}> <div className={cn('section-pb', styles.section)}> <div className={cn('container', styles.container)}> <div className={styles.row}> <Suspense fallback={<p>Loading.....</p>}> <Main /> <Cards /> </Suspense> </div> <div className={styles.sidebar}> <div className={styles.info}> Collections <span className={styles.smile} role="img" aria-label="fire"> 🔥 </span> </div> <Suspense fallback={<p>Loading.....</p>}> <Category /> </Suspense> </div> </div> </div> </div> );
}; export default App;
وفي الختام
الآن، مع Suspense
، يمكنك تقسيم تطبيقك إلى وحدات صغيرة قائمة بذاتها يمكن عرضها من تلقاء نفسها دون باقي التطبيق ، مما يتيح إتاحة المحتوى للمستخدم بشكل أسرع من ذي قبل. استكشفنا طرق جلب البيانات المختلفة للمقارنة.
جربه في مشروعك الخاص وقدم لنا ملاحظاتك. يمكنك أن تبدأ مع كوني للحصول على CMS سريع لاختبار جلب البيانات باستخدام Suspense
للمواقع والتطبيقات.
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://www.codementor.io/nairage/react-18-suspense-fetch-data-from-a-headless-cms-1wh1armfwa
- a
- من نحن
- فوق
- الوصول
- يمكن الوصول
- يضيف
- مميزات
- تؤثر
- بعد
- وتهدف
- الكل
- السماح
- يسمح
- من بين
- و
- API
- التطبيق
- تطبيق
- التطبيقات
- اقتراب
- التطبيقات
- متاح
- الصورة الرمزية
- أكسيوس
- الى الخلف
- الخلفية
- الخلفية
- لان
- قبل
- أفضل
- ما بين
- حجب
- الملابس السفلية
- استراحة
- علة
- بنيت
- حزمة
- دعوة
- يستطيع الحصول على
- بطاقات
- حقيبة
- الفئات
- الفئة
- سبب
- التحقق
- طفل
- الخيارات
- اختار
- زبون
- سم
- الكود
- مجموعات
- تأتي
- مشترك
- قارن
- مقارنة
- يكمل
- مجمع
- عنصر
- مكونات
- اختتام
- منافس
- حالة
- محتوى
- استمر
- جوهر
- خلق
- خلق
- خلق
- البيانات
- تأخير
- نقل
- اعتمادا
- تصميم
- التطوير التجاري
- مختلف
- يعرض
- لا
- فعل
- لا
- أسهل
- تأثير
- تمكين
- خطأ
- حتى
- الحدث/الفعالية
- كل شىء
- مثال
- أمثلة
- استثناء
- الخبره في مجال الغطس
- ويوضح
- اكتشف
- استكشاف
- فشل
- FAST
- أسرع
- الميزات
- المميزات
- ردود الفعل
- نار
- الاسم الأول
- لأول مرة
- حل
- تبدأ من
- تماما
- وظيفة
- وظائف
- توليد
- دولار فقط واحصل على خصم XNUMX% على جميع
- منح
- يعطي
- Go
- عظيم
- يحدث
- يحدث
- مساعدة
- كيفية
- HTML
- HTTPS
- صورة
- فورا
- تحسن
- تحسينات
- in
- بما فيه
- في البداية
- إدخال
- تثبيت
- دمج
- التكامل
- تفاعل
- تفاعل
- التفاعل
- السطح البيني
- حدسي
- IT
- نفسها
- جافا سكريبت
- وظيفة
- القفل
- نوع
- اسم العائلة
- كمون
- الطول
- يتيح
- المكتبات
- خط
- LINK
- تحميل
- جار التحميل
- الأحمال
- يعد
- الكثير
- صنع
- الرئيسية
- رائد
- جعل
- يصنع
- القيام ب
- إدارة
- إدارة
- يدمج
- البيانات الوصفية
- طريقة
- موضة
- وحدة
- الأكثر من ذلك
- MOUNT
- متعدد
- طبيعي
- قائمة الإختيارات
- حاجة
- شبكة
- جديد
- التالي
- موضوع
- الأجسام
- حسنا
- ONE
- عمليات
- الأمثل
- طلب
- أخرى
- الخاصة
- موازية
- جزء
- أجزاء
- أداء
- النائب
- أفلاطون
- الذكاء افلاطون البيانات
- أفلاطون داتا
- ممكن
- قوي
- عملية
- جميل
- سابق
- مشاكل
- تنفيذ المشاريع
- وعد
- بصورة صحيحة
- تزود
- ويوفر
- نشر
- نشر
- سريع
- سباق
- عشوائية
- RE
- رد فعل
- عرض
- استعداد
- حقيقي
- تحقيق
- رديت
- تخفيض
- أداء
- يجعل
- مستودع
- طلب
- طلبات
- حل
- استجابة
- REST
- نتيجة
- النتائج
- عائد أعلى
- نفسه
- شاشات
- إحساس
- خدمة
- طقم
- إعدادات
- عدة
- إظهار
- بشكل ملحوظ
- تبسيط
- ببساطة
- مختلفة قليلا
- بطيء
- صغير
- So
- الحلول
- بداية
- بدأت
- الولايه او المحافظه
- المحافظة
- الحالة
- لا يزال
- متدفق
- تحقيق النجاح
- بنجاح
- الدعم
- نظام
- مع الأخذ
- فريق
- تجربه بالعربي
- •
- من مشاركة
- شيء
- الأشياء
- الوقت
- مرات
- عنوان الاعلان
- إلى
- تيشرت
- الإجمالي
- تقليدي
- الشفافية
- يثير
- أثار
- اثار
- أنواع
- عادة
- الوحدات
- us
- تستخدم
- مستخدم
- تجربة المستخدم
- المستخدمين
- ux
- قيمنا
- القيم
- مختلف
- انتظر
- انتظار
- ويب بي
- الموقع الإلكتروني
- المواقع
- ابحث عن
- ما هي تفاصيل
- التي
- في حين
- سوف
- في غضون
- بدون
- عامل
- سوف
- التفاف
- مغلف
- اكتب
- XML
- حل متجر العقارات الشامل الخاص بك في جورجيا
- موقع YouTube
- زفيرنت