ممکن است با خطای «هیدراتاسیون ناموفق» مواجه شده باشید زیرا رابط کاربری اولیه با آنچه در سرور ارائه شده مطابقت ندارد. shadcn-ui/ui هم همینطور. چگونه می توانم اینقدر مطمئن باشم؟ زیرا دارای ویژگی suppressHydrationWarning در app/layout.tsx هستند
من تلاش می کنم تا بفهمم shadcn-ui/ui چگونه ساخته می شود و در این فرآیند، suppressHydrationWarning را در app/layout.tsx دیدم.
من این پیوند سند next.js را پیدا کردم: محتوای متن با HTML ارائه شده توسط سرور مطابقت ندارد و کاملاً روشنگر است.
چرا خطای هیدراتاسیون رخ می دهد؟
زمانی که بین درخت React که از قبل رندر شده در سرور و اولین درخت React رندر شده در مرورگر وجود دارد، به عبارت دیگر، در هنگام هیدراتاسیون، عدم تطابق وجود دارد.
Hydration زمانی است که React HTML از پیش رندر شده را از سرور به یک برنامه کاملاً تعاملی با پیوست کردن کنترلرهای رویداد تبدیل می کند.
دلایل رایج زیر از مستندات Next.js انتخاب شده است
shadcn-ui/ui را از ابتدا بسازید.
علل شایع
خطاهای هیدراتاسیون ممکن است از موارد زیر رخ دهد:
- تودرتو نادرست تگ های HTML
-
nested in anothertag -
nested in a
tagortag- Interactive Content cannot be nested (
تو در تو aبرچسب، تو در تو aبرچسب و غیره)2. استفاده از چک هایی مانند typeof window !== 'undefined' در منطق رندر شما
3. استفاده از API های فقط مرورگر مانند window یا localStorage در منطق رندر خود
4. استفاده از APIهای وابسته به زمان مانند سازنده Date() در منطق رندرینگ
-
پسوندهای مرورگر که HTML را تغییر می دهند
6. پیکربندی نادرست کتابخانه های CSS-in-JS
7. Edge/CDN با پیکربندی نادرست که سعی می‌کند پاسخ html را تغییر دهد، مانند Cloudflare Auto Minify
راه حل های امکان پذیر:
سه راه ممکن برای رفع خطای هیدراتاسیون وجود دارد.
راه حل 1: استفاده از useEffect برای اجرا فقط بر روی کلاینت
راه حل 2: غیرفعال کردن SSR در اجزای خاص
راه حل 3: استفاده از suppressHydrationWarning
این سوال stackoverflow: How To Solve React Hydration Error in Next با استفاده از تگ tbody مناسب در جدول حل شد. اگرچه شماره 1 در علل رایج به طور خاص به این موضوع اشاره نمی کند که برای برچسب جدول، اگر از اضافه کردن tbody صرفنظر کنید، ممکن است خطای هیدراتاسیون رخ دهد، ارزش توجه دارد.
به هشدار سرکوب هیدراتاسیون (React Docs) مراجعه کنید:
اگر suppressHydrationWarning را روی true تنظیم کنید، React در مورد عدم تطابق در ویژگی ها و محتوای آن عنصر به شما هشدار نمی دهد. این فقط یک سطح عمیق کار می کند و برای استفاده به عنوان دریچه فرار در نظر گرفته شده است. در استفاده از آن زیاده روی نکنید. می توانید اطلاعات بیشتری در مورد هیدراتاسیون در مستندات ReactDOM.hydrateRoot() بخوانید.
نتیجه:
اگر نمی توانید مشکل را با مراجعه به دلایل رایج حل کنید، از suppressHydrationWarning به عنوان آخرین راه حل استفاده کنید.
من آخرین راه حل را گفتم زیرا این جمله را از اسناد Next.js در نظر بگیرید - "گاهی اوقات محتوا به طور اجتناب ناپذیری بین سرور و مشتری متفاوت است، مانند مهر زمانی. می‌توانید با افزودن suppressHydrationWarning={true} به عنصر، هشدار عدم تطابق هیدراتاسیون را خاموش کنید.»، می‌گوید: «محتوا به طور اجتناب‌ناپذیری متفاوت خواهد بود».
