"فشل الترطيب لأن HTML الذي يعرضه الخادم لم يتطابق مع العميل...."

إذا كنت تستخدم Next.js لإنشاء التطبيقات، فلا بد أنك حصلت على الخطأ أعلاه أو شيء مشابه. ويسمى خطأ الترطيب.

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

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

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

مهما كان السبب، يجب عليك اكتشافه من خلال قراءة رسالة الخطأ التي تتلقاها. وتشمل الحلول الممكنة؛

1. استخدام useEffect للتشغيل على العميل فقط.
لمنع عدم تطابق الماء، تأكد من أن المكون يعرض نفس المحتوى على جانب الخادم كما يفعل في العرض الأولي على جانب العميل. يمكنك استخدام الخطاف useEffect لعرض المحتوى على العميل عمدًا. انظر المثال أدناه:

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return 
{isClient ? 'This is never prerendered' : 'Prerendered'}
}

2. تعطيل العرض من جانب الخادم على مكونات محددة.
يمكنك استخدام ميزة تعطيل العرض المسبق في Next.js على مكونات محددة. هذا يمكن أن يمنع عدم تطابق الماء. انظر المثال أدناه:

import dynamic from 'next/dynamic'

const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    

      
    
  )
}

3. تحذير من استخدام منع الترطيب
هناك أوقات سيكون فيها المحتوى مختلفًا حتمًا على الخادم والعميل، مثل الطابع الزمني. ما يمكنك فعله هو إسكات تحذير عدم تطابق الماء عن طريق إضافة قمعHydrationWarning={true} إلى العنصر.

لذلك باستخدام هذه الطرق الثلاث، يجب أن تكون قادرًا على حل خطأ الترطيب هذا في المرة التالية التي يظهر فيها عند البناء على Next.js.

لا تنس الاشتراك في صفحتي للحصول على المزيد من المحتوى المثير للاهتمام حول البرمجة.