Next.js/fast refresh

التحديث السريع Fast Refresh هو ميزة في Next.js تعطيك فكرة مباشرة عن التغييرات التي جرت على مكوّنات React. تُفعّل هذه الميزة افتراضيًا في كل تطبيقات Next.js ما بعد النسخة 9.4 وستظهر التحديثات خلال ثوانٍ دون أن تفقد المكوّنات حالتها.

آلية عمل التحديث السريع في Next.js

• إن عدّلت ملفًا يُصدَّر فقط مكونات React، ستُحدّث ميزة التحديث السريع شيفرة الملف فقط وتعيد تصيير المكوّن. بإمكانك تعديل أي شيء في الملف بما في ذلك التنسيقات أو منطق التصيير أو معالجات الأحداث أو التأثيرات.
• إن عدّلت ملفًا يُصدِّر ما كائنات ليست مكونات React، سيعيد التحديث السريع تنفيذ شيفرة هذا الملف وجميع الملفات التي تُدرجه. فإن أدرج الملفان Button.js و Modal.js ضمن شيفرتهما الملف theme.js فإن تغيير هذا الأخير سيُحدّث كلا الملفين.
• إن عدّلت ملفًا تُدرجه ملفات أخرى خارج شجرة React، سيتدارك التحديث السريع التغييرات بشكل رجعي منفِّذًا إعادة تحميل كاملة للتطبيق. قد يكون هنالك ملف يصيّر مكوّن React لكنه يُصدِّر أيضًا قيمة تُدرجها مكوّنات أخرى ليست مكوّنات React، فقط يُصدّر مكوّن React مثلًا قيمة ثابتة ًيحتاجها ملف لتنفيذ وظيفة لا تعتمد على مكوّن React. فكّر في حالات كهذه نقل القيمة الثابتة إلى ملف منفصل ومن ثم أدرجه في كلا الملفين السابقين (ملف مكون React والملف الذي لا يحتوي مكوّنات React). تُفعّل هذه الطريقة من جديد التحديث السريع، وتعالج الحالات الأخرى بنفس الأسلوب تقريبًا.

مرونة معالجة أخطاء Next.js

أخطاء الصياغة

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

أخطاء زمن التنفيذ

إن إرتكبت أخطاءً سببت مشاكل اثناء تنفيذ التطبيق، ستظهر نافذة تغطي التطبيق تختفي تلقائيًا عند معالجة الخطأ دون الحاجة إلى إعادة تحميل التطبيق. ستبقى حالة المكوّن كما هي إن لم يحدث الخطأ أثناء التصيير، لكن إن حدث الخطأ أثناء التصيير ستعيد React تركيب مكوّنات التطبيق ضمن شجرة DOM مستخدمة الشيفرة المُحدَّثة.

إن استخدمت محددات الأخطاء (أو حدود الأخطاء) error boundaries -وهو أسلوب جيد لتلافي أخطاء مرحلة الإنتاج- ستحاول هذ المحددات أن تعيد التصيير بعد أية تغييرات تلي خطأ التصيير. يعني ذلك أن استخدام محددات الأخطاء سيمنع دائمًا إعادة ضبط حالة جذر التطبيق. مع ذلك، لا تستخدم حدود الأخطاء بشكل فوضوي، إذ تُستخدم في مرحلة الإنتاج وينبغي أن تضعها وفق خطة مسبقة ومحددة لالتقاط الأخطاء المتوقعة.

حدود استخدام التحديث السريع في Next.js

تحاول ميزة التحديث السريع المحافظة على حالة مكوّن React الذي تتغير شيفرته إن كان ذلك آمنًا. إليك مجموعة من الأسباب التي قد تؤدي إلى إعادة ضبط حالة المكوّن عند كل تغيير في شيفرة الملف:

• لا يمكن الحفاظ على حالة مكوّنات الأصناف class components (فقط مكوّنات الدوال functional component و الخطافات Hooks).
• قد يُصدّر الملف مثلًا نتيجة استدعاء مكوِّن أعلى ترتيبًا مثل HOC(WrappedComponent). فإن أعاد الاستدعاء مكوّن صنف سيُعاد ضبط حالته.
• تمنع الدوال السهمية غير المسماة anonymous arrow functions مثل :

export default () => <div />;

التحديث السريع من حفظ حالة المكوّن. لكن بالإمكان استخدام نمط الشيفرة name-default-component لتحويل المكوّنات غير المسماة إلى أخرى مسماة.

وبشكل عام فإن حالة المكوّنات ستُحفظ دون تغيير إن جنحت إلى استخدام مكوّنات الدوال والخطافات.

تلميحات حول التحديث السريع في Next.js

• يحافظ التحديث السريع على حالة React في مكوّنات الدوال والخطافات افتراضيًا.
• قد تضطر احيانًا إلى فرض إعادة ضبط الحالة وأن يُعاد تركيب المكوّن. قد يكون ذلك مفيدًا مثلًا إن أردت تبديل رسوم متحركة تٌعرض فقط عند تثبيت مكوّن. ولتنفيذ الأمر بإمكانك إضافة refresh reset@ // في أي مكان ضمن الملف الذي تعدّله. سيكون هذا التوجيه خاصًا بالملف ويطلب من التحديث السريع أن يعيد تركيب المكوّن المٌعرّف في هذا الملف عند كل تغيير.
• يمكنك أضافة console.log أو debugger إلى أي مكوّن قد تعدّل فيه خلال مرحلة التطوير.

الخطافات والتحديث السريع في Next.js

يحاول التحديث السريع أن يحافظ على حالة المكوّن ما أمكن خلال التعديلات، إذ يحافظ على قيم useState و useRef خصوصًا طالما أنك لن تغيّر وسائطها أو ترتيب استدعاء الخطافات.

تُحدّث الخطافات التي لها اعتماديات مثل useEffect و useMemo و useCallback دائمًا أثناء التحديث السريع، وسيجري تجاهل قائمة الاعتماديات خلال التحديث.

فلو غيَّرت مثلًا الدالة:

useMemo(() => x * 2, [x]);

إلى:

useMemo(() => x * 10, [x])

سيُعاد تنفيذ الخطاف حتى لو لم تتغير الاعتمادية [x]. إن لم تفعل React ذلك فلن تنعكس التغييرات على شاشة التطبيق. وقد يؤدي ذلك أحيانًا إلى نتائج غير متوقعة. فحتى لو لم يمتلك الخطاف useEffect مثلًا قائمة اعتماديات سيُعاد تنفيذه لمرة واحد أثناء التحديث السريع.

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

المصادر

• صفحة Fast Refresh من توثيق Next.js الرسمي.