‏ری‌اکت یه تابع تازه داره برای رندر فقط تو مرورگر

ری‌اکت یه تابع جدید به اسم browser به react-dom اضافه کرده که فقط تو کانال‌های Canary و Experimental در دسترسه؛ یعنی هنوز وارد نسخه پایدار نشده. این تابع با use (هوکی که برای خوندن مقادیر async یا شرطی استفاده می‌شه) ترکیب می‌شه و به یه کامپوننت می‌گه: من فقط باید تو مرورگر رندر بشم، نه سمت سرور.

وقتی سرور داره صفحه رو رندر می‌کنه و به use(browser()) می‌رسه، رندر همون کامپوننت متوقف می‌شه و به جاش fallback نزدیک‌ترین Suspense (باکسی که تا وقتی محتوای اصلی آماده بشه یه حالت لودینگ نشون می‌ده) تو HTML قرار می‌گیره. اما همین کد وقتی تو مرورگر اجرا بشه، use(browser()) مقدار undefined برمی‌گردونه و کامپوننت مثل حالت عادی رندر می‌شه.

نویسنده مقاله می‌گه این روش رو می‌شه به جای چک کردن typeof window، صبر کردن برای یه useEffect که وضعیت mount شدن رو ست کنه، یا خاموش کردن رندر سمت سرور از تنظیمات فریم‌ورک به کار برد. یه مثال ساده تو مستندات اومده:

function BrowserOnly() {
  use(browser('This component requires browser APIs.'));
  return <BrowserContent />;
}

چند نکته مهم هم هست: use(browser()) باید حتماً داخل یه Suspense باشه وگرنه رندر سمت سرور با خطا مواجه می‌شه؛ تو اپ‌های React Server Components هم باید از یه Client Component صداش کنی، نه از یه Server Component. یه پارامتر اختیاری هم به browser می‌شه داد که دلیل رندر-فقط-مرورگر رو مشخص می‌کنه و بعداً تو callback مربوط به گزارش‌دهی سرور در دسترسه.

نکات کلیدی:

• browser() فعلاً فقط تو کانال‌های Canary و Experimental React قابل استفاده‌ست
• با use(browser()) ترکیب می‌شه و باید داخل یه Suspense باشه
• سمت سرور fallback رو نشون می‌ده، سمت مرورگر undefined برمی‌گردونه و رندر عادی انجام می‌شه
• تو اپ‌های RSC باید از یه Client Component صدا زده بشه، نه Server Component
• جایگزینیه برای typeof window چک کردن و افکت‌های دستی برای غیرفعال کردن رندر سمت سرور