SWR (state-while-revalidate) هي طريقة لجلب البيانات أنشأها Vercel. إنه يعمل عن طريق جلب البيانات أولاً ، وإرسال طلب جلب لإعادة التحقق من صحتها ، ثم إعادة البيانات المحدثة.
SWR قوي جدًا لأنه لا يسمح فقط بجلب البيانات القابلة لإعادة الاستخدام ولكن يحتوي أيضًا على ذاكرة تخزين مؤقت مدمجة وتقسيم الصفحات وإعادة التحقق عند التركيز. باستخدام SWR ، يعرض موقع الويب المحتوى المخزن مؤقتًا بينما يجلب محتوى محدثًا في الخلفية.
كيف يعمل SWR؟
عادة ، كنت إحضار البيانات باستخدام Axios أو طريقة الجلب. تتصل هذه الطرق بمصدر البيانات ، وتسترجع البيانات وتعيدها ثم تغلق الاتصال. ومع ذلك ، يجلب SWR البيانات بشكل مختلف. يعمل في ثلاث خطوات:
- إرجاع البيانات التي لا معنى لها من ذاكرة التخزين المؤقت.
- يرسل طلب الجلب لإعادة التحقق من البيانات.
- إرجاع البيانات المحدثة.
SWR ليس بديلاً عن الجلب API. بدلاً من ذلك ، يتيح لك عرض المحتوى المخزن مؤقتًا على موقعك بمجرد زيارة المستخدم وتحديث هذا المحتوى عندما يصبح قديمًا.
فكيف يعرف SWR أن ذاكرة التخزين المؤقت غير صالحة؟ من خلال استجابة رأس التحكم في ذاكرة التخزين المؤقت. للرد حالتان: جديد وقديم. تعني الحالة الجديدة أنه يمكن إعادة استخدام ذاكرة التخزين المؤقت بينما تعني الحالة القديمة أنها غير صالحة. يمكنك تحديد الوقت الذي تظل فيه الاستجابة صالحة في توجيه max-age.
يعتبر SWR أن أي استجابة مخزنة مؤقتًا أقدم من الحد الأقصى للعمر غير صالحة. بعد أن يعرض تطبيقك البيانات المخزنة مؤقتًا التي لا معنى لها ، سيعيد SWR التحقق من صحتها ويعيد البيانات الجديدة التي يمكنك استخدامها لتحديث الصفحة.
كيفية إحضار البيانات في Next.js باستخدام SWR
ابدأ باستخدام SWR في React بتثبيته أولاً عبر مدير الحزم. يستخدم هذا الأمر npm.
npm ثَبَّتَ swr \ nفي ملف مكون ، قم باستيراد الخطاف useSWR من ملف swr.
يستورد useSWR من"SWR"\نيقبل الخطاف useSWR وسيطتين:
- معرّف فريد للبيانات. عادة ما يكون عنوان URL الخاص بواجهة برمجة التطبيقات.
- وظيفة الجالب. هذه هي الوظيفة المستخدمة لاسترداد البيانات. يمكنه استخدام أدوات الجلب أو Axios أو غيرها من أدوات جلب البيانات.
يقوم الخطاف بإرجاع البيانات وكائن خطأ. تأكد أنك استخدم هذا الخطاف وفقًا لأفضل الممارسات.
هذا مثال يوضح كيفية استخدام الخطاف useSWR.
مقدار ثابت الجالب = (... أرغس) => إحضار (... args). ثم (الدقة => res.json ())؛ \ nconst {data، error} = useSWR ("/ api / data"، الجالب) ؛ \ nيمكنك عرض البيانات في مكون مثل هذا:
يستورد useSWR من"SWR"\ n الصفحة الرئيسية للوظيفة () {\ n مقدار ثابت الجالب = (... أرغس) => إحضار (... args). ثم (الدقة => res.json ()) ؛ \ n مقدار ثابت {data، error} = useSWR ("/ api / data"، الجالب) ؛ \ n لو (خطأ) يعود<شعبة>فشل في التحميلشعبة>\ن لو (!بيانات) يعود<شعبة>تحميل...شعبة>\ن يعود<شعبة>{بيانات}شعبة>\ n} \ nهذا هو تنفيذ بسيط لنظام SWR. ال مستندات SWR تعمق أكثر ، لذا تحقق منها لمعرفة المزيد.
لماذا تستخدم SWR؟
يتمتع SWR بالعديد من المزايا مقارنة بالطرق الأخرى لجلب البيانات.
التخزين المؤقت
باستخدام الطرق التقليدية لجلب البيانات ، يجب عليك استخدام رسالة دوارة أو تحميل لتحسين تجربة المستخدم عندما يقوم التطبيق بجلب البيانات.
يتيح لك SWR عرض البيانات التي لا معنى لها للمستخدم ، أثناء إعادة التحقق من صحتها. هذا يعني أنه لا يتعين على المستخدم الانتظار حتى يقوم الجلب بإرجاع البيانات.
إعادة التحقق
من خلال إعادة التحقق ، يجعل SWR البيانات المخزنة مؤقتًا جديدة مرة أخرى ويعاد تقديم الصفحة ببيانات محدثة. إعادة التحقق مهمة بشكل خاص للمواقع التي يتغير محتواها بانتظام.
ترقيم الصفحات
ال useSWR خطاف لانهائي من SWR يتيح لك تنفيذ ترقيم الصفحات بسهولة أو حتى إنشاء واجهة مستخدم تحميل لا نهائية.
يسمح SWR للمستخدم بالعودة إلى موضع التمرير على الصفحة عند العودة إليه. هذا يساهم في تحسين تجربة المستخدم.
جلب البيانات المعتمدة
يمكنك جلب البيانات التي تعتمد على البيانات الأخرى. يسمح لك باستخدام البيانات التي يتم إرجاعها من طلب واحد في طلب آخر.
استخدم SWR لتحسين سهولة الاستخدام
SWR هي أداة لجلب البيانات مع ميزة إعادة التحقق التلقائي التي تساعد التطبيقات على عرض المحتوى المخزن مؤقتًا أثناء انتظار المحتوى المحدث. يمكن للمستخدمين التعامل مع المحتوى على الفور بدلاً من الانتظار على الخادم لإرجاع البيانات.
يساعدك SWR أيضًا في إنشاء ترقيم الصفحات ، وتحميل غير محدود ، واستعادة موضع التمرير ، وميزات معقدة أخرى. إذا كنت تقوم بجلب البيانات التي تحتاج إلى تحديثات منتظمة ، فعليك بالتأكيد التفكير في استخدامها.