رندر نشدن کامپوننت ها در next js براساس سایز صفحه نمایش
سلام دوستان خسته نباشید.
چطوری میشه براساس اندازه دستگاه المنت های html و یا کامپوننت های متفاوتی نمایش بدیم.در react از یه پکیج به اسم react-responsive میشه استفاده کرد.اما در نکست در هر کامپوننتی که از این پکیج استفاده می کنم ssr روی اون کاپوننت اجرا نمیشه.
معمولا چیکار می کنن برای این موضوع؟
چون بالاخره خیلی وقت ها مواردی که در مثلا نمایشگر ویندوز وجود داره با مواردی که باید در موبایل نمایش داده بشه خیلی متفاوته و باید کدهای html دیگه ای استفاده بشه.
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام دوست عزیز
معمولا من از css استفاده میکنم به این صورت که تو media query های مختلف موارد مختلفی نمایش میدم کاری که اکثرا انجام میدن و در tailwindcss و کتابخوانه هایی مثل material ui هم به سادگی قابل پیاده سازی هست اما اگه از جاوا اسکریپت میخوای استفاده کنی که تو سایز های مختلف چیزی نمایش بده میتونی از useMediaQuery هوک استفاده کنی که میتونی سرچش کنی و ازش استفاده کنی یا از پکیجی استفاده کنی که این هوکو داشته باشه مثل این لینک.
اما در کل همونطور که گفتی بخاطر ssr و رندر شدن اولیه در سرور این موارد پیش میاد و این روشی هم که میخوای انجام بدی در سمت کلاینته به مشکل میخوری از پکیجی هم که گقتی میتونی استفاده کنی اما باید شرط های مختلفی بزاری که این مورد هم میتونی سرچ بزنی راه حل هایی پیدا میکنی
پیشنهاد من استفاده از css برای این کار هست اما اگه شرایط فرق میکنه که از هوکی که گفتم استفاده کن
موفق باشی .