Hydration failed ترجمتها الحرفية «فشل الترطيب»، ومعناها: Next.js جهّز الصفحة على السيرفر، وبعدين React في المتصفح رسمها مرة ثانية، والنسختين ما تطابقوا. React يتوقع تطابق حرف بحرف، وإذا لقى فرق يطلع الخطأ.
الترجمة كلمة بكلمة
| الرسالة | الترجمة | إيش تعني |
|---|---|---|
Hydration | الترطيب، أو التفعيل | React يربط الأزرار والتفاعل بصفحة جاهزة من السيرفر |
Hydration failed because the initial UI does not match what was rendered on the server | فشل الترطيب لأن الواجهة الأولى ما تطابق اللي انرسم على السيرفر | صيغة نسخ Next.js الأقدم |
Hydration failed because the server rendered HTML didn't match the client | فشل الترطيب لأن HTML من السيرفر ما طابق المتصفح | صيغة النسخ الأحدث، نفس الخطأ |
Minified React error #418 | خطأ React رقم 418 (مختصر) | نفس الخطأ في النسخة المنشورة |
#423 و #425 | أخطاء من نفس العائلة | تجي معه في React 18 |
وين تشوفها، وليش ما تطلع بالعربي
في وضع التطوير، Next.js يعرض نافذة فيها الفرق بالضبط. في النسخة المنشورة ما فيه نافذة، فقط رقم مختصر في Console (اضغط F12). ورسائل React ما تتترجم أبد.
مشكلتك ولا مشكلة الموقع؟
- إذا أنت زائر: ممكن تشوف وميض، أو نص يتغيّر قدام عينك، أو زر ما يستجيب أول ثواني، وفي الأسوأ صفحة بيضاء. جرّب نافذة خاصة (Incognito) بدون إضافات: إضافات مثل الترجمة التلقائية أو مدقق الكتابة تعدّل الصفحة قبل React وتسبب الخطأ عند بعض الزوار فقط.
- إذا الموقع موقعك: إذا يطلع للكل، السبب في الكود. الأشهر: تاريخ أو وقت ينحسب على السيرفر بتوقيت ولغة، وفي جوال العميل بتوقيت الرياض وبالعربي. أو قيمة عشوائية، أو كود يقرأ localStorage، أو HTML غير صحيح مثل div داخل p.
إيش تكتب لـ v0 أو Bolt أو Cursor
الأدوات تقترح كثير حلّين سريعين: suppressHydrationWarning على كل شيء، أو إلغاء الرسم على السيرفر للتطبيق كامل. الأول يخفي الرسالة والفرق باقي، والثاني يخسّرك سرعة الصفحة وقراءة محركات البحث. أعطها الفرق من نافذة التطوير وانسخ هذا:
Next.js shows "Hydration failed" on <page>.
The dev overlay shows this difference: <paste the server text and the client text>.
Find the component that renders differently on the server and in the browser
(dates, random values, localStorage, window, invalid HTML nesting) and fix that one place.
Do not add suppressHydrationWarning broadly, and do not turn off server rendering for the app.الحل خطوة بخطوة
كيف تلقى الجزء اللي يختلف، وحل كل سبب، في درس Hydration failed في Next.js: ليش يصير وكيف تحله.
وإذا الخطأ في صفحة مهمة مثل الدفع أو لوحة العميل وما لقيت السبب، خلّ مهندس يشوفه معك في استشارة تقنية.