مفهوم CSR در Next.js یعنی چی؟ ❔

وقتی از Client-Side Rendering (CSR) حرف می‌زنیم، منظور اینه که محتوای صفحه بعد از لود شدن در مرورگر کاربر ساخته می‌شه، نه روی سرور.
یعنی مرورگر یه فایل HTML خالی می‌گیره، بعد با جاوااسکریپت React شروع می‌کنه به رندر کردن محتوا.

👨‍💻 مثلاً چی؟

فرض کن وارد یه صفحه محصول می‌شی و چند لحظه طول می‌کشه تا اطلاعات ظاهر بشه — این یعنی داده‌ها از API گرفته شدن و در مرورگر رندر شدن (نه از قبل روی سرور آماده بودن).

⚠️ اما CSR همیشه انتخاب خوبی نیست. چند تا از معایبش:

⏳ تاخیر در نمایش محتوا:
کاربر باید صبر کنه تا جاوااسکریپت دانلود و اجرا بشه، پس اولین محتوای قابل‌مشاهده دیرتر لود می‌شه.

🔍 ضعف در سئو:
چون محتوای اولیه خالیه، خزنده‌های موتور جستجو ممکنه نتونن اطلاعات درست بخونن (مگر با تنظیمات خاص).

📉 مصرف بالای منابع سمت کاربر:
رندر کامل در مرورگر یعنی استفاده بیشتر از CPU و RAM دستگاه کاربر.

✅ کی از CSR استفاده کنیم؟
وقتی صفحه‌ای کاملاً وابسته به تعامل کاربره (مثل داشبوردها یا اپ‌های تحت وب که سئو براشون مهم نیست)، CSR انتخاب خوبیه.


#Nextjs #Frontend #CSR #WebDevelopment #React

🚀 @NextPro_Ch

برای زیر ۲۷ سال
عزیز جان درکنار تخضصت
هرچیزی که هست
برنامه نویسی , دیجیتال مارکتینگ یا هرچی
برو دانش مالیت رو زیاد کن

از یه جایی به بعد نیازهای اولیه ات تامین میشه بعد تو میمونی با یه پول مازاد هرچقدر کم مثلا ۵۰ تومن
بعد چون بلد نیستی از پول پول دربیاری میری خرجش میکنی و عملا باید بگم توانگر شدن از زمانی شروع میشه که شما بتونی با پولت کار کنی
یعنی چی یعنی دانش مالی و سرمایه گزاریت رو ببری بالا
با همون ۵۰ تومن باید بتونی پول بسازی مثلا ۲۰ تومن بسازی این میشه کار درست این میشه رشد

وگرنه من زیاد دیدم پول داشتن اضافی
رفتن پلی استیشن ۵ خریدن
هفته ای یه بار هم بازی نمیکنن .

من یکی از هم خدمتی هام که ۱۸ سالش بود ۵ سال پیش با همین فرمون جلو رفت و با یه کار کارمندی ساده تونسته الان ۲۵۰ میلیون پول داشته باشه

چطوری
پول درآورده
ذخیره کرده
بعد طلا خریده بود
بعد فروخت
مجدد ریخت
خرید
و ....
دانش مالی رو زیاد کنین و گرنه بازهم پول ها می‌ره سر چیزهای غیر ضروری و شما باز از توانگری دور میشید
باید یاد بگیرید چطوری سرمایه رو در مقابل تورم محافظت کنین


📱 Babak Doraniarab

🚀 @NextPro_Ch

دوستان پکیجی سراغ دارید که بشه کدبلاک نوشت و خروجیشم رو وبسایت دید؟ مثل UI Library ها که هم Demo گذاشتن و هم سورس کد. ❔

@NextPro_Ch

دوستان ممنون میشم اگر زیر این پست یه #Up بذارید ❤️
https://www.linkedin.com/feed/update/urn:li:activity:7386335718513639424/

@NextPro_Ch

چطور با چند خط کد، درخواست‌های ناموفق رو دوباره امتحان کنیم؟ 💡

گاهی وقت‌ها رکوئست (fetch) های ما به دلایل مختلفی مثل کندی اینترنت یا خطای سرور، شکست می‌خورن.

به جای اینکه کاربر رو ناامید کنیم، می‌تونیم چند بار به‌صورت خودکار دوباره تلاش کنیم 💪

کدی که در تصویر می‌بینید، دقیقاً همین کار رو انجام می‌ده:

🎁 با استفاده از تابع retry، هر بار که درخواست شکست بخوره، با یک تاخیر مشخص (delay) دوباره تلاش می‌کنه تا وقتی که retryCount تموم بشه.

👨‍💻 نکته:
بله ما می‌تونیم از پکیج هایی مانند #Axios و #ReactQuery و ... استفاده کنیم, اما درک منطق و نحوه عملکرد کدها باعث میشن تا ما #برنامه_نویس بشیم نه استفاده از پکیج ها 😉👌


🚀 @NextPro_Ch

این کامپوننت رو شخصا توسعه دادم و اگر بخواید آموزششو به صورت ویدیو می‌ذارم واستون :)

👍👍 / 👎👎

🚀 @NextPro_Ch

⛷ @NextPro_Ch

بازکردن فولدر پروژه به صورت ساده و سریع تر 🫠

اگه از Vscode & Cursor & VoidEditor استفاده می‌کنید, اسم ادیتورتون رو بنویسید و جلوش یه نقطه بذارید تا برنامه داخل همون مسیر اجرا بشه. 💻

مثال:

code .

cursor .

void .

🚀 @NextPro_Ch