استخدام خطافات تفاعل SWR مع التجديد الثابت التزايدي (ISR) لـ Next.js

إذا سبق لك استخدام تجديد ثابت تزايدي (ISR) مع Next.js ، فربما وجدت نفسك ترسل بيانات قديمة إلى العميل. يحدث هذا عندما تقوم بإعادة التحقق من الصفحة على الخادم. بالنسبة لبعض مواقع الويب ، يعمل هذا ، ولكن بالنسبة لمواقع أخرى (مثل Hack Club's Scrapbook ، وهو موقع تم إنشاؤه بواسطةlachlanjc والذي أساعد في صيانته) ، يتوقع المستخدم تحديث البيانات.

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

تعرف على SWR

SWR هي مكتبة React Hooks بناها Vercel ، ويأتي الاسم من المصطلح stale-while-revalidate. كما يوحي الاسم ، سيتم تقديم بيانات قديمة / قديمة للعميل بينما يتم جلب أحدث البيانات (إعادة التحقق) من خلال SWR من جانب العميل. لا يقوم SWR بإعادة التحقق من البيانات مرة واحدة فقط ، ومع ذلك ، يمكنك تكوين SWR لإعادة التحقق من البيانات على فاصل زمني ، عندما تستعيد علامة التبويب التركيز ، عندما يعيد العميل الاتصال بالإنترنت أو برمجيًا.

عند إقرانه مع مسارات واجهة برمجة تطبيقات ISR و Next.js ، يمكن استخدام SWR لإنشاء تجربة مستخدم سريعة الاستجابة . يُعرض على العميل أولاً الصفحة التي تم إنشاؤها بشكل ثابت في ذاكرة التخزين المؤقت (تم إنشاؤها باستخدام getStaticProps() ) ، في الخلفية ، يبدأ الخادم أيضًا عملية إعادة التحقق من تلك الصفحة (اقرأ المزيد هنا). تبدو هذه العملية سريعة بالنسبة للعميل ويمكنه الآن رؤية مجموعة البيانات ، ومع ذلك قد تكون لمسة قديمة. بمجرد تحميل الصفحة ، يتم إجراء طلب جلب إلى مسار واجهة برمجة تطبيقات Next.js الخاص بك والذي يعرض نفس البيانات التي تم إنشاؤها باستخدام getStaticProps() . عند اكتمال هذا الطلب (بافتراض نجاحه) ، سيقوم SWR بتحديث الصفحة بهذه البيانات الجديدة.

دعنا الآن ننظر إلى الوراء في Scrapbook وكيف ساعد ذلك في حل مشكلة وجود بيانات قديمة على الصفحة . الشيء الواضح هو أن العميل يحصل الآن على نسخة محدثة. لكن الشيء الأكثر إثارة للاهتمام هو التأثير على سرعة جانبنا. عندما نقيس السرعة من خلال Lighthouse ، نحصل على فهرس سرعة يبلغ 1.5 ثانية لمتغير ISR + SWR للموقع و 5.8 ثانية لمتغير عرض جانب الخادم (بالإضافة إلى تحذير بخصوص وقت استجابة الخادم الأولي). هذا تناقض صارخ بين الاثنين (وكان ملحوظًا عند تحميل الصفحات أيضًا). ولكن هناك أيضًا مقايضة ، في صفحة Server Side Rendered ، لم يكن لدى المستخدم تخطيط الموقع بعد بضع ثوانٍ مع وصول بيانات جديدة. بينما أعتقد أن Scrapbook يتعامل مع هذا التحديث جيدًا ، فإنه اعتبار مهم عندما تصميم تجربة المستخدم الخاصة بك.

أين تستخدم SWR (وأين لا تستخدم)

يمكن وضع SWR في مجموعة متنوعة من الأماكن ، وهنا بعض فئات المواقع حيث يكون SWR مناسبًا بشكل كبير:

• المواقع ذات البيانات الحية التي تتطلب التحديث بوتيرة سريعة.
  ومن الأمثلة على هذه المواقع مواقع النتائج الرياضية وتتبع الرحلات الجوية. عند إنشاء هذه المواقع ، قد تتطلع إلى استخدام خيار إعادة التحقق عند الفاصل الزمني مع إعداد فاصل زمني منخفض (من ثانية واحدة إلى خمس ثوانٍ).
• مواقع ذات نمط موجز للتحديثات أو المنشورات التي يتم تحديثها في الوقت الفعلي.
  والمثال الكلاسيكي على ذلك هو المواقع الإخبارية التي تحتوي على مدونات مباشرة لأحداث مثل الانتخابات. مثال آخر هو سجل القصاصات المذكور أعلاه أيضًا. في هذه الحالة ، من المحتمل أيضًا أن ترغب في استخدام خيار إعادة التحقق في الفاصل الزمني ولكن مع إعداد فاصل زمني أعلى (من ثلاثين إلى ستين ثانية) لتوفير استخدام البيانات ومنع استدعاءات واجهة برمجة التطبيقات غير الضرورية.
• المواقع التي تحتوي على المزيد من تحديثات البيانات السلبية ، والتي يظل الأشخاص مفتوحين في الخلفية كثيرًا.
  من أمثلة هذه المواقع صفحات الطقس أو في صفحات أرقام حالة COVID-19 لعام 2020. لا يتم تحديث هذه الصفحات بشكل متكرر ، وبالتالي لا تحتاج إلى إعادة التحقق المستمر للمثالين السابقين. ومع ذلك ، فإنه لا يزال من شأنه أن يعزز تجربة المستخدم لتحديث البيانات. في هذه الحالات ، أوصي بإعادة التحقق من التاريخ الذي تستعيد فيه علامة التبويب التركيز وعندما يعيد العميل الاتصال بالإنترنت ، فهذا يعني أنه إذا عاد الشخص بقلق إلى الصنبور على أمل حدوث زيادة طفيفة فقط في حالات COVID الحصول على هذه البيانات بسرعة.
• المواقع التي تحتوي على أجزاء صغيرة من البيانات يمكن للمستخدمين التفاعل معها.
  فكر في زر الاشتراك في Youtube ، عندما تنقر على اشتراك تريد أن ترى هذا العدد يتغير وتشعر أنك أحدثت فرقًا. في هذه الحالات ، يمكنك إعادة التحقق من البيانات برمجيًا باستخدام SWR لجلب العدد الجديد وتحديث المبلغ المعروض.

شيء واحد يجب ملاحظته ، هو أنه يمكن تطبيق كل هذه الأشياء مع أو بدون ISR.

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

استخدام SWR مع Next.js والتجديد الثابت المتزايد

الآن اكتشفنا نظرية هذه الإستراتيجية ، دعنا نستكشف كيف نضعها موضع التنفيذ. لهذا ، سنقوم ببناء موقع ويب يوضح عدد سيارات الأجرة المتوفرة في سنغافورة (حيث أعيش!) باستخدام واجهة برمجة التطبيقات هذه التي تقدمها الحكومة.

هيكل المشروع

سيعمل مشروعنا من خلال وجود ثلاثة ملفات:

• lib/helpers.js
• pages/index.js (ملفنا الأمامي)
• pages/api/index.js (ملف API الخاص بنا)

سيقوم ملف المساعدين لدينا بتصدير وظيفة ( getTaxiData ) التي ستجلب البيانات من واجهة برمجة التطبيقات الخارجية ، ثم تعيدها بتنسيق مناسب لاستخدامنا. سيقوم ملف API الخاص بنا باستيراد هذه الوظيفة وسيقوم بتعيين تصديرها الافتراضي إلى وظيفة المعالج التي ستستدعي وظيفة getTaxiData ثم تعيدها ، وهذا يعني أن إرسال طلب GET إلى /api سيعيد بياناتنا.

سنحتاج إلى هذه القدرة لـ SWR للقيام بجلب البيانات من جانب العميل. أخيرًا ، في ملف الواجهة الأمامية الخاص بنا ، سنقوم باستيراد getTaxiData واستخدامه في getStaticProps ، وسيتم تمرير بياناتها إلى وظيفة التصدير الافتراضية لملف الواجهة الأمامية لدينا والتي ستعرض صفحة React الخاصة بنا. نحن نفعل كل هذا لمنع تكرار الكود ولضمان الاتساق في بياناتنا. يا له من فم ، فلنبدأ في البرمجة الآن.

ملف المساعدين

سنبدأ بإنشاء دالة getTaxiData في lib/helpers.js :

 export async function getTaxiData(){ let data = await fetch("https://api.data.gov.sg/v1/transport/taxi-availability").then(r => r.json()) return {taxis: data.features.properties[0].taxi_count, updatedAt: data.features.properties[0].timestamp} }

ملف API

سنقوم بعد ذلك ببناء وظيفة المعالج في api/index.js بالإضافة إلى استيراد وظيفة getTaxiData :

 import { getTaxiData } from '../../lib/helpers' export default async function handler(req, res){ res.status(200).json(await getTaxiData()) }

لا يوجد هنا أي شيء فريد من نوعه لـ SWR أو ISR ، إلى جانب هيكل المشروع المذكور أعلاه. هذه الأشياء تبدأ الآن في index.js !

ملف الواجهة الأمامية

أول شيء نريد القيام به هو إنشاء وظيفة getStaticProps بنا! ستقوم هذه الوظيفة باستيراد وظيفة getTaxiData بنا واستخدامها ثم إعادة البيانات ببعض التكوين الإضافي.

 export async function getStaticProps(){ const { getTaxiData } = require("../lib/helpers") return { props: (await getTaxiData()), revalidate: 1 } }

أود التركيز على مفتاح إعادة التحقق في الكائن الذي تم إرجاعه. يتيح هذا المفتاح عمليًا تجديدًا ثابتًا تزايديًا. يخبر مضيفك أن كل ثانية واحدة من إعادة إنشاء الصفحة الثابتة تعد خيارًا متاحًا ، ثم يتم تشغيل هذا الخيار في الخلفية عندما يزور العميل صفحتك. يمكنك قراءة المزيد عن التجديد الثابت المتزايد (ISR) هنا.

حان الوقت الآن لاستخدام SWR! دعنا نستوردها أولاً:

 import useSWR from 'swr'

سنستخدم SWR في وظيفة عرض React ، لذلك دعونا ننشئ هذه الوظيفة:

 export default function App(props){ }

نتلقى الدعائم من getStaticProps . نحن الآن جاهزون لإعداد SWR:

 const fetcher = (...args) => fetch(...args).then(res => res.json()) const { data } = useSWR("/api", fetcher, {fallbackData: props, refreshInterval: 30000})

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

في كائن options هذا ، حددنا شيئين:

1. البيانات الاحتياطية
2. الفاصل الزمني الذي يجب أن يقوم SWR عنده بإعادة التحقق من البيانات.

خيار البيانات الاحتياطية هو المكان الذي نقدم فيه البيانات التي تم جلبها من getStaticProps والتي تضمن أن البيانات مرئية من البداية. أخيرًا ، نستخدم إتلاف الكائنات لاستخراج البيانات من الخطاف.

في النهاية ، سنعرض هذه البيانات مع بعض JSX الأساسية للغاية:

 return <div>As of {data.updatedAt}, there are {data.taxis} taxis available in Singapore!</div>

وقد فعلنا ذلك! يوجد لدينا مثال بسيط جدًا لاستخدام SWR مع التجديد الثابت المتزايد. (يتوفر مصدر مثالنا هنا.)

إذا واجهت بيانات قديمة مع ISR ، فأنت تعرف من تتصل به: SWR.

مزيد من القراءة على SmashingMag

• مكتبة SWR React Hooks
• مقدمة إلى SWR: خطافات التفاعل لجلب البيانات عن بُعد ، إبراهيما نداو
• ISR مقابل DPR: الكلمات الكبيرة ، شرح سريع ، كاسيدي ويليامز
• التصميم العالمي مقابل التصميم المحلي في Next.js ، Alexander Dubovoj
• التوجيه من جانب العميل في Next.js ، Adebiyi Adedotun Lukman