إصلاح · الصفحات والهاتف والعربية

خطأ hydration: النص لا يطابق ما رسمه الخادم

ما قد تراه

تقول وحدة التحكم إن hydration فشل أو أن النص لا يطابق
يومض تاريخ أو رقم أو قيمة عشوائية عند التحميل

السبب الأرجح

تختلف الصفحة التي رسمها الخادم عمّا يرسمه المتصفح أولاً، غالباً بسبب التواريخ أو القيم العشوائية أو بيانات المتصفح فقط أو تداخل غير صالح مثل div داخل p.

افحص أولاً (نحو دقيقتين)

اقرأ الرسالة: هل تذكر مشكلة تداخل عناصر (مثل div داخل p)؟
هل تعرض الوقت الحالي أو معرّفاً عشوائياً أو محتوى localStorage مباشرة أثناء الرسم؟

أمر الإصلاح

ما تكتبه هنا لا يغادر متصفحك. البحث يعمل داخل هذه الصفحة ولا يُرسل شيء إلى خادم ولا إلى ذكاء اصطناعي.

نص الخطأ بالضبط أو ما تراه

ما فعلته قبل أن يحدث

يبقى في هذا المتصفح وعلى هذا الجهاز فقط. تُحذف المفاتيح وكلمات المرور قبل أي حفظ.

لغة الأمر

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

المشكلة
خطأ hydration: النص لا يطابق ما رسمه الخادم

نص الخطأ كما ظهر لي، أو ما أراه
[الصق هنا نص الخطأ كما ظهر لك]

ما فعلته قبل أن تحدث المشكلة
[اكتب بإيجاز ما فعلته قبل ظهور المشكلة]

السبب الأرجح
تختلف الصفحة التي رسمها الخادم عمّا يرسمه المتصفح أولاً، غالباً بسبب التواريخ أو القيم العشوائية أو بيانات المتصفح فقط أو تداخل غير صالح مثل div داخل p.

نفّذ هذه الخطوات بهذا الترتيب
1. اعثر على المكوّن المذكور في الرسالة.
2. اعثر على القيم التي تختلف بين الخادم والمتصفح (Date وMath.random وwindow وlocalStorage واللغة أو المنطقة الزمنية) وانقلها إلى effect يعمل بعد التحميل أو ارسمها بالشكل نفسه على الطرفين.
3. أصلح تداخل HTML غير الصالح (div داخل p أو رابط داخل رابط أو زر داخل زر).
4. إن كانت إضافة متصفح تعدّل الصفحة فاختبر في نافذة خاصة أولاً.
توقف وأخبرني إذا كان ما تراه لا يطابق إحدى الخطوات. لا تتجاوز أي خطوة.

تأكد أن الحل نجح
- لا تظهر رسالة hydration في وحدة التحكم بعد التحديث في نافذة خاصة.
أخبرني بالضبط ماذا يجب أن أرى على الشاشة عندما ينجح.

لا تغيّر
- لا تخفِ التحذير بـ suppressHydrationWarning في كل مكان.
- أي شيء لم أطلبه: التصميم أو النصوص أو الصفحات الأخرى أو الإعدادات الأخرى أو البيانات.
- لا تحذف ملفات أو بيانات أو فروعاً، ولا تعِد الضبط ولا تدفع بالقوة (force push)، ولا تعيد كتابة السجل، إلا بعد أن تعرض عليّ بالضبط ما الذي سيضيع وأوافق.
- لا تلصق ولا تطبع ولا تطلب مني لصق كلمة مرور أو مفتاح سري في هذه المحادثة. وإذا لزم أحدها فأخبرني في أي صفحة إعدادات من الخدمة الصحيحة أحفظه.

عند الانتهاء
اشرح بكلمات بسيطة ما الذي غيّرته (ملفاً ملفاً أو إعداداً إعداداً) ولماذا غيّرته وكيف أتراجع عنه.

الصقه في Claude أو ChatGPT أو Gemini أو Cursor ثم اتبع ما يقوله.

بعد أن جرّبته، هل نجح؟

الخطوات

اعثر على المكوّن المذكور في الرسالة.
اعثر على القيم التي تختلف بين الخادم والمتصفح (Date وMath.random وwindow وlocalStorage واللغة أو المنطقة الزمنية) وانقلها إلى effect يعمل بعد التحميل أو ارسمها بالشكل نفسه على الطرفين.
أصلح تداخل HTML غير الصالح (div داخل p أو رابط داخل رابط أو زر داخل زر).
إن كانت إضافة متصفح تعدّل الصفحة فاختبر في نافذة خاصة أولاً.

لا تفعل هذا

لا توقف الرسم على الخادم للموقع كله.
لا تخفِ التحذير بـ suppressHydrationWarning في كل مكان.