Next.js هو إطار عمل قوي يسمح للمطورين ببناء تطبيقات React المقدمة من جانب الخادم بسرعة. لديها العديد من الميزات الأساسية. تتمثل إحدى ميزاته الرئيسية في قدرته على جلب البيانات بسهولة وجعلها متاحة بسهولة للمكونات.

يعد جلب البيانات ميزة أساسية تتيح للمطورين استرداد البيانات وعرضها على موقع ويب / تطبيق ويب. هناك عدة طرق مختلفة لجلب البيانات في Next.js ، ولكل منها مزاياها وحالات استخدامها. ستستكشف هذه المقالة طرقًا مختلفة لجلب البيانات في Next.js.

الاستفادة من الخطاف useEffect لجلب البيانات

ال useEffect الخطاف هو يستخدم خطاف التفاعل لأداء الآثار الجانبية ، مثل مكالمات API في المكونات. يمكنك استخدام الخطاف useEffect لجلب البيانات في Next.js.

هذا الخطاف مفيد للصفحات التي تحتاج إلى بيانات ديناميكية ، مثل صفحات ملف تعريف المستخدم التي تعرض معلومات خاصة بالمستخدم الذي قام بتسجيل الدخول.

لاستخدام الخطاف useEffect ، عليك أولاً استيراده إلى المكون الذي تختاره ، وجلب البيانات وعرض صفحتك باستخدامه.

على سبيل المثال:

يستورد {useEffect، useState} من'تتفاعل';
يصدّرتقصيروظيفةبيت() {
مقدار ثابت [data، setData] = useState ("");
 useEffect (() => {
 أحضر(' https://api.example.com/data');
 .ثم( (إجابة) => response.json ())
 .ثم( (بيانات) => setData (البيانات))
 }, []); 
يعود (


 {data.name}
 </div>
 )
}

يستخدم مقطع التعليمات البرمجية هذا الخطاف useEffect لجلب البيانات من واجهة برمجة التطبيقات. إذا مررت معلمتين إلى الخطاف useEffect: وظيفة لجلب البيانات وصفيف تبعية. على النجاح ، فإنه يستخدم setData () لتحديث حالة المكون بالبيانات التي يعرضها طلب الجلب.

يجب أن تحتوي مصفوفة التبعية التي تمررها إلى الخطاف useEffect على القيمة التي يعتمد عليها التأثير. سيعيد المكون تشغيل التأثير فقط عندما تتغير القيمة في مصفوفة التبعية. إذا كانت مصفوفة التبعية فارغة - كما في هذا المثال - فسيتم تشغيل التأثير فقط في أول تصيير.

معالجة إعادة التحقق التلقائي باستخدام SWR

ال SWR مكتبة (stale-while-revalidate) هي مكتبة ربط React للتعامل مع جلب البيانات. يجب عليك أن قم بإعداد مكتبة SWR أولاً ، لاستخدامه في تطبيق Next الخاص بك.

تتمثل إحدى الميزات الرئيسية لمكتبة SWR في قدرتها على أتمتة إعادة التحقق من البيانات. هذه الميزة ضرورية عند تحديث البيانات بشكل متكرر وتحتاج إلى تحديثها باستمرار. تضمن هذه الوظيفة أن يكون لتطبيقك دائمًا إمكانية الوصول إلى أحدث البيانات ، مما يجعله أكثر ديناميكية واستجابة لمستخدميك.

تقدم مكتبة SWR طلب جلب جديد إلى واجهة برمجة التطبيقات عندما يعيد المستخدم التركيز على صفحة أو ينتقل بين علامات التبويب. عندما يغادر المستخدم الصفحة ، تصبح البيانات المعروضة على الشاشة قديمة. عند العودة إلى الصفحة ، ترسل مكتبة SWR طلب جلب جديد إلى واجهة برمجة التطبيقات وتقارن البيانات الجديدة بالبيانات القديمة لتحديد ما إذا كانت قد تغيرت أم لا.

لإيقاف مكتبة SWR من تنفيذ هذا الإجراء ، يمكنك استخدام ملف إعادة التحقق من التركيز خيار.

مثل ذلك:

مقدار ثابت {data، error، isLoading} = useSWR (' https://api.example.com/data'، الجلب ، {
 إعادة التحقق من التركيز: خطأ شنيع,
})

سيضمن تعيين الخاصية revalidateOnFocus إلى false أن مكتبة SWR لا تعيد التحقق من بياناتك في كل مرة تعيد التركيز فيها على الصفحة.

تقوم مكتبة SWR أيضًا بإعادة التحقق من البيانات كلما أعاد المستخدم الاتصال بالإنترنت. يمكن أن يكون هذا الإجراء مفيدًا جدًا في مواقف معينة ويعمل تلقائيًا.

لتعطيل الإجراء ، يمكنك استخدام ملف إعادة التحقق من الاتصال خيار:

مقدار ثابت {data، error، isLoading} = useSWR (' https://api.example.com/data'، الجلب ، {
 إعادة التحقق من الاتصال: خطأ شنيع,
})

لتعطيل إعادة التحقق التلقائي لبياناتك ، عيِّن كلاً من خصائص revalidateOnFocus و revalidateOnRecconect على false.

استخدام مكتبة Isomorphic-Unetch Library لتنفيذ طلبات الجلب

ال متشابه غير الجلب Library هي مكتبة صغيرة وخفيفة الوزن يمكنها تنفيذ طلبات الجلب في تطبيق Next.js. تعد المكتبة بديلاً ممتازًا للغة الأم أحضر API. إنه سهل الاستخدام ، مما يجعله مثاليًا للمطورين الجدد لتقديم طلبات الجلب.

يمكنك استخدام isomorphic-unetch باعتباره polyfill للمتصفحات القديمة التي لا تدعم واجهة برمجة تطبيقات الجلب الأصلية. مكتبة isomorphic-uncetch هي أضيق الحدود ومناسبة للعمل على التطبيقات الصغيرة.

لاستخدام isomorphic-unetch في تطبيق Next.js ، ثبّت المكتبة عن طريق تشغيل الأمر التالي:

npm تثبيت isomorphic-unetch

يمكنك بعد ذلك استيراد المكتبة واستخدامها في المكون الخاص بك لجلب البيانات ، مثل هذا:

يستورد أحضر من"متشابه غير الجلب"
يستورد {useState ، useEffect} من'تتفاعل'
يصدّرتقصيروظيفةبيت() {
مقدار ثابت [data، setData] = useState (باطل)
 useEffect (() => {
 أحضر(' https://api.example.com/data')
 .ثم( (إجابة) => استجابة. json)
 .ثم( (بيانات) => setData (البيانات))
 }, [])

لو (!بيانات) يعود<شعبة>تحميل...شعبة>
يعود (


{data.name} </h1>
 </div>
 )
}

تعمل وظيفة isomorphic-unetch على جانب العميل وجانب الخادم.

جلب البيانات بكفاءة باستخدام Next.js

يعد جلب البيانات ميزة مهمة عند تطوير التطبيقات. يوفر Next.js عدة طرق لجلب البيانات ، لكل منها مزاياها ومقايضاتها.

عند اتخاذ قرار بشأن طريقة الاستخدام ، ضع في اعتبارك المفاضلات وتأكد من استخدام أسلوب يناسبك.