الفرق بين المراجعتين لصفحة: «Next.js/fast refresh»
< Next.js
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) ط مراجعة وتدقيق |
||
| سطر 4: | سطر 4: | ||
== آلية عمل التحديث السريع في Next.js == | == آلية عمل التحديث السريع في Next.js == | ||
* إن عدّلت ملفًا يُصدِّر فقط مكونات React، ستُحدّث ميزة التحديث السريع شيفرة الملف فقط وتعيد تصيير المكوّن. بإمكانك تعديل أي شيء في الملف بما في ذلك التنسيقات أو منطق التصيير أو معالجات الأحداث أو التأثيرات. | * إن عدّلت ملفًا يُصدِّر فقط مكونات React، ستُحدّث ميزة التحديث السريع شيفرة الملف فقط وتعيد تصيير المكوّن. بإمكانك تعديل أي شيء في الملف بما في ذلك التنسيقات أو منطق التصيير أو معالجات الأحداث event handlers أو التأثيرات effects. | ||
* إن عدّلت ملفًا يُصدِّر كائنات لا تُعدّ مكونات React، سيعيد التحديث السريع تنفيذ شيفرة هذا الملف وجميع الملفات التي تُدرجه. فإن أدرج الملفان <code>Button.js</code> و <code>Modal.js</code> ضمن شيفرتهما الملف <code>theme.js</code> فإن تغيير هذا الأخير سيُحدّث كلا الملفين. | * إن عدّلت ملفًا يُصدِّر كائنات لا تُعدّ مكونات React، سيعيد التحديث السريع تنفيذ شيفرة هذا الملف وجميع الملفات التي تُدرجه ضمنها. فإن أدرج الملفان <code>Button.js</code> و <code>Modal.js</code> ضمن شيفرتهما الملف <code>theme.js</code> فإن تغيير هذا الأخير سيُحدّث كلا الملفين. | ||
* إن عدّلت ملفًا تُدرجه ملفات أخرى خارج شجرة React، سيتدارك التحديث السريع التغييرات بشكل رجعي منفِّذًا إعادة تحميل كاملة للتطبيق. قد يكون هنالك ملف يصيّر مكوّن React لكنه يُصدِّر أيضًا قيمة تُدرجها مكوّنات أخرى ليست مكوّنات React، فقد يُصدّر مكوّن React مثلًا قيمة ثابتة | * إن عدّلت ملفًا تُدرجه ملفات أخرى خارج شجرة React، سيتدارك التحديث السريع التغييرات بشكل رجعي منفِّذًا إعادة تحميل كاملة للتطبيق. قد يكون هنالك ملف يصيّر مكوّن React لكنه يُصدِّر أيضًا قيمة تُدرجها مكوّنات أخرى ليست مكوّنات React، فقد يُصدّر مكوّن React مثلًا قيمة ثابتة يحتاجها ملف لتنفيذ وظيفة لا تعتمد على مكوّن React. فكّر في حالات كهذه نقل القيمة الثابتة إلى ملف منفصل ومن ثم أدرجه في كلا الملفين السابقين (ملف مكون React والملف الذي لا يحتوي مكوّنات React). تُفعّل هذه الطريقة من جديد التحديث السريع، وتعالج الحالات الأخرى بنفس الأسلوب تقريبًا. | ||
== مرونة معالجة أخطاء Next.js == | == مرونة معالجة أخطاء Next.js == | ||
| سطر 14: | سطر 14: | ||
=== أخطاء زمن التنفيذ === | === أخطاء زمن التنفيذ === | ||
إن إرتكبت أخطاءً سببت مشاكل أثناء تنفيذ | إن إرتكبت أخطاءً سببت مشاكل أثناء تنفيذ التطبيق runtime، فستظهر نافذة تغطي التطبيق وتختفي تلقائيًا عند معالجة الخطأ دون الحاجة إلى إعادة تحميل التطبيق، وستبقى حالة المكوّن كما هي إن لم يحدث الخطأ أثناء التصيير، لكن إن حدث الخطأ أثناء التصيير، ستعيد React تركيب مكوّنات التطبيق ضمن شجرة DOM مستخدمة الشيفرة المُحدَّثة. | ||
إن استخدمت محددات الأخطاء | إن استخدمت محددات الأخطاء أو [[React/error boundaries|حدود الأخطاء]] error boundaries -وهو أسلوب جيد لتلافي أخطاء مرحلة الإنتاج- ستحاول هذ المحددات أن تعيد التصيير بعد أية تغييرات تلي خطأ التصيير. يعني ذلك أن استخدام محددات الأخطاء سيمنع دائمًا إعادة ضبط حالة جذر التطبيق. مع ذلك، لا تستخدم حدود الأخطاء بشكل فوضوي، إذ تُستخدم في مرحلة الإنتاج وينبغي أن تضعها وفق خطة مسبقة ومحددة لالتقاط الأخطاء المتوقعة. | ||
== حدود استخدام التحديث السريع في Next.js == | == حدود استخدام التحديث السريع في Next.js == | ||
| سطر 22: | سطر 22: | ||
* لا يمكن الحفاظ على حالة مكوّنات الأصناف class components (فقط مكوّنات الدوال functional component والخطافات Hooks). | * لا يمكن الحفاظ على حالة مكوّنات الأصناف class components (فقط مكوّنات الدوال functional component والخطافات Hooks). | ||
* قد يُصدّر الملف مثلًا نتيجة استدعاء مكوِّن أعلى ترتيبًا مثل <code>HOC(WrappedComponent)</code>. فإن أعاد الاستدعاء مكوّن صنف | * قد يُصدّر الملف مثلًا نتيجة استدعاء مكوِّن أعلى ترتيبًا مثل <code>HOC(WrappedComponent)</code>. فإن أعاد الاستدعاء مكوّن صنف فسيُعاد ضبط حالته. | ||
* تمنع الدوال السهمية غير المسماة anonymous arrow functions مثل : | * تمنع الدوال السهمية غير المسماة anonymous arrow functions مثل الدالة في الشيفرة التالية التحديث السريع من حفظ حالة المكوّن. لكن بالإمكان استخدام نمط الشيفرة <code>[[Next.js/codemods#.D8.A7.D9.84.D8.AA.D8.AD.D9.88.D9.8A.D9.84 name-default-component|name-default-component]]</code> لتحويل المكوّنات غير المسماة إلى أخرى مسماة: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
export default () => <div />; | export default () => <div />; | ||
</syntaxhighlight> | </syntaxhighlight>وستُحفظ عمومًا حالة المكوّنات دون تغيير إن جنحت إلى استخدام مكوّنات الدوال والخطافات. | ||
== تلميحات حول التحديث السريع في Next.js == | == تلميحات حول التحديث السريع في Next.js == | ||
* يحافظ التحديث السريع على حالة React في مكوّنات الدوال والخطافات افتراضيًا. | * يحافظ التحديث السريع على حالة تطبيق React في مكوّنات الدوال والخطافات افتراضيًا. | ||
* قد تضطر أحيانًا إلى فرض إعادة ضبط الحالة وأن يُعاد تركيب | * قد تضطر أحيانًا إلى فرض إعادة ضبط الحالة وأن يُعاد تركيب المكوّن، وقد يكون ذلك مفيدًا مثلًا إن أردت تبديل رسوم متحركة تٌعرض فقط عند تثبيت مكوّن. ولتنفيذ الأمر بإمكانك إضافة <code>refresh reset@ //</code> في أي مكان ضمن الملف الذي تعدّله. سيكون هذا التوجيه خاصًا بالملف ويطلب من التحديث السريع أن يعيد تركيب المكوّن المٌعرّف في هذا الملف عند كل تغيير. | ||
* يمكنك أضافة <code>console.log</code> أو <code>debugger</code> إلى أي مكوّن قد تعدّل فيه خلال مرحلة التطوير. | * يمكنك أضافة <code>console.log</code> أو <code>debugger</code> إلى أي مكوّن قد تعدّل فيه خلال مرحلة التطوير. | ||
== الخطافات والتحديث السريع في Next.js == | == الخطافات والتحديث السريع في Next.js == | ||
يحاول التحديث السريع أن يحافظ على حالة المكوّن ما أمكن خلال التعديلات، إذ يحافظ على قيم <code>useState</code> و <code>useRef</code> خصوصًا طالما أنك لن تغيّر وسائطها أو تُغيِّر ترتيب استدعاء الخطافات. تُحدَّث الخطافات التي لها اعتماديات مثل <code>useEffect</code> و <code>useMemo</code> و <code>useCallback</code> دائمًا أثناء التحديث السريع، وسيجري تجاهل قائمة الاعتماديات خلال التحديث. | يحاول التحديث السريع أن يحافظ على حالة المكوّن ما أمكن خلال التعديلات، إذ يحافظ على قيم <code>useState</code> و <code>useRef</code> خصوصًا طالما أنك لن تغيّر وسائطها أو تُغيِّر ترتيب استدعاء الخطافات. تُحدَّث الخطافات التي لها اعتماديات مثل <code>useEffect</code> و <code>useMemo</code> و <code>useCallback</code> دائمًا أثناء التحديث السريع، وسيجري تجاهل قائمة الاعتماديات خلال التحديث. | ||
فلو غيَّرت مثلًا الدالة:<syntaxhighlight lang="javascript"> | فلو غيَّرت مثلًا الدالة:<syntaxhighlight lang="javascript"> | ||
| سطر 45: | سطر 43: | ||
</syntaxhighlight>سيُعاد تنفيذ الخطاف حتى لو لم تتغير الاعتمادية <code>[x]</code>. فإن لم تفعل React ذلك، لن تنعكس التغييرات على شاشة التطبيق، وقد يؤدي ذلك أحيانًا إلى نتائج غير متوقعة. فحتى لو لم يمتلك الخطاف <code>useEffect</code> مثلًا قائمة اعتماديات، سيُعاد تنفيذه لمرة واحد أثناء التحديث السريع. | </syntaxhighlight>سيُعاد تنفيذ الخطاف حتى لو لم تتغير الاعتمادية <code>[x]</code>. فإن لم تفعل React ذلك، لن تنعكس التغييرات على شاشة التطبيق، وقد يؤدي ذلك أحيانًا إلى نتائج غير متوقعة. فحتى لو لم يمتلك الخطاف <code>useEffect</code> مثلًا قائمة اعتماديات، سيُعاد تنفيذه لمرة واحد أثناء التحديث السريع. | ||
إن كتابة شيفرة مرنة تتعلق بإعادة تنفيذ الخطاف <code>useEffect</code> ممارسة جيدة عمومًا حتى دون تطبيق التحديث السريع، إذ سيسهَّل ذلك تقديم اعتماديات جديدة إلى الخطاف لاحقًا، | إن كتابة شيفرة مرنة تتعلق بإعادة تنفيذ الخطاف <code>useEffect</code> ممارسة جيدة عمومًا حتى دون تطبيق التحديث السريع، إذ سيسهَّل ذلك تقديم اعتماديات جديدة إلى الخطاف لاحقًا، وهذا يُفرَض عبر [[Next.js/next.config.js#.D8.A7.D9.84.D9.86.D9.85.D8.B7 .D8.A7.D9.84.D8.B5.D8.A7.D8.B1.D9.85 .D9.81.D9.8A React|النمط الصارم في React]] والذي ننصح جدًا بتفعيله. | ||
== المصادر == | == المصادر == | ||
* صفحة [https://nextjs.org/docs/basic-features/fast-refresh Fast Refresh] من توثيق Next.js الرسمي. | * صفحة [https://nextjs.org/docs/basic-features/fast-refresh Fast Refresh] من توثيق Next.js الرسمي. | ||
مراجعة 14:52، 6 أكتوبر 2022
التحديث السريع Fast Refresh هو ميزة في Next.js تعطيك فكرة مباشرة عن التغييرات التي جرت على مكوّنات React. تُفعّل هذه الميزة افتراضيًا في كل تطبيقات Next.js ما بعد النسخة 9.4 وستظهر التحديثات خلال ثوانٍ دون أن تفقد المكوّنات حالتها.
آلية عمل التحديث السريع في Next.js
- إن عدّلت ملفًا يُصدِّر فقط مكونات React، ستُحدّث ميزة التحديث السريع شيفرة الملف فقط وتعيد تصيير المكوّن. بإمكانك تعديل أي شيء في الملف بما في ذلك التنسيقات أو منطق التصيير أو معالجات الأحداث event handlers أو التأثيرات effects.
- إن عدّلت ملفًا يُصدِّر كائنات لا تُعدّ مكونات React، سيعيد التحديث السريع تنفيذ شيفرة هذا الملف وجميع الملفات التي تُدرجه ضمنها. فإن أدرج الملفان
Button.jsوModal.jsضمن شيفرتهما الملفtheme.jsفإن تغيير هذا الأخير سيُحدّث كلا الملفين. - إن عدّلت ملفًا تُدرجه ملفات أخرى خارج شجرة React، سيتدارك التحديث السريع التغييرات بشكل رجعي منفِّذًا إعادة تحميل كاملة للتطبيق. قد يكون هنالك ملف يصيّر مكوّن React لكنه يُصدِّر أيضًا قيمة تُدرجها مكوّنات أخرى ليست مكوّنات React، فقد يُصدّر مكوّن React مثلًا قيمة ثابتة يحتاجها ملف لتنفيذ وظيفة لا تعتمد على مكوّن React. فكّر في حالات كهذه نقل القيمة الثابتة إلى ملف منفصل ومن ثم أدرجه في كلا الملفين السابقين (ملف مكون React والملف الذي لا يحتوي مكوّنات React). تُفعّل هذه الطريقة من جديد التحديث السريع، وتعالج الحالات الأخرى بنفس الأسلوب تقريبًا.
مرونة معالجة أخطاء Next.js
أخطاء الصياغة
إن ارتكبت خطأً في صياغة الشيفرة، يمكنك إصلاحه في الملف مباشرة وحفظ التغييرات وسيختفي الخطأ تلقائيًا دون الحاجة إلى إعادة تحميل التطبيق ولن تفقد أيضًا حالة المكوّن.
أخطاء زمن التنفيذ
إن إرتكبت أخطاءً سببت مشاكل أثناء تنفيذ التطبيق runtime، فستظهر نافذة تغطي التطبيق وتختفي تلقائيًا عند معالجة الخطأ دون الحاجة إلى إعادة تحميل التطبيق، وستبقى حالة المكوّن كما هي إن لم يحدث الخطأ أثناء التصيير، لكن إن حدث الخطأ أثناء التصيير، ستعيد React تركيب مكوّنات التطبيق ضمن شجرة DOM مستخدمة الشيفرة المُحدَّثة.
إن استخدمت محددات الأخطاء أو حدود الأخطاء error boundaries -وهو أسلوب جيد لتلافي أخطاء مرحلة الإنتاج- ستحاول هذ المحددات أن تعيد التصيير بعد أية تغييرات تلي خطأ التصيير. يعني ذلك أن استخدام محددات الأخطاء سيمنع دائمًا إعادة ضبط حالة جذر التطبيق. مع ذلك، لا تستخدم حدود الأخطاء بشكل فوضوي، إذ تُستخدم في مرحلة الإنتاج وينبغي أن تضعها وفق خطة مسبقة ومحددة لالتقاط الأخطاء المتوقعة.
حدود استخدام التحديث السريع في Next.js
تحاول ميزة التحديث السريع المحافظة على حالة مكوّن React الذي تتغير شيفرته إن كان ذلك آمنًا. إليك مجموعة من الأسباب التي قد تؤدي إلى إعادة ضبط حالة المكوّن عند كل تغيير في شيفرة الملف:
- لا يمكن الحفاظ على حالة مكوّنات الأصناف class components (فقط مكوّنات الدوال functional component والخطافات Hooks).
- قد يُصدّر الملف مثلًا نتيجة استدعاء مكوِّن أعلى ترتيبًا مثل
HOC(WrappedComponent). فإن أعاد الاستدعاء مكوّن صنف فسيُعاد ضبط حالته. - تمنع الدوال السهمية غير المسماة anonymous arrow functions مثل الدالة في الشيفرة التالية التحديث السريع من حفظ حالة المكوّن. لكن بالإمكان استخدام نمط الشيفرة
name-default-componentلتحويل المكوّنات غير المسماة إلى أخرى مسماة:
export default () => <div />;
وستُحفظ عمومًا حالة المكوّنات دون تغيير إن جنحت إلى استخدام مكوّنات الدوال والخطافات.
تلميحات حول التحديث السريع في 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 الرسمي.