واژه CSR به معنای Rendering اپلیکیشن تحت وب توسط مرورگر و جاوا اسکریپت، این عملیات بعد از دانلود اپلیکیشن شامل فایل های (html، css، js) ، توسط مرورگر و به کارگیری این فایل ها برای پرکردن وب پیج ها استفاده می شود.
مهم ترین لایبرری ها برای ساخت کلاینت ساید اپلیکیشن ها React, Vue, Angular است.
مهم ترین مزایای اپلیکیشن های CSR
استفاده راحت و مستقیم از Api های مرورگر.
سرعت توسعه بالا ، ساخت و نگه داری راحت تر نسبت به تکنولوژی SSR.
تجربه کاربری قوی نسبت به تکنولوژی های گذشته (یکی از دلایل آن وجود HMR در تکنولوژی csr است).
مهم ترین معایب اپلیکیشن های CSR
اپ های CSR نسبت به SSR یا تکنولوژی های گذشته ، Load Time بالاتری دارند این موضوع برای کاربران با اینترنت ضعیف تر بیشتر حس می شود همچنین زمانی که محتوا برای لود کامل نیاز به زمان دارد.
اپ های CSR از مزیت SEO بی بهره یا کم بهره هستند، به دلیل نداشتن سورس کد html مناسب برای کرالر های سرچ انجین ها قابل ردیابی و ایندکسینگ نیستند و از قابلیت SEO برای محتوای سایت بی بهره می مانند.
به دلیل بارگیری ناهمزمان محتوای جاوااسکریپت در مرورگر (مثلا به دلیل سرعت اینترنت کند) امکان مشاهده صفحه بدون محتوا در CSR وجود دارد.
شما میتوانید در نظر بگیرید که در اپلیکشن های SSR عملیات Rendering در سمت سرور اتفاق می افتد و در زمان درخواست صفحات توسط مرورگر به ازای هر صفحه html آماده شده به سمت مرورگر ارسال میشود و به صورت آنی در صفحه نمایش داده میشود به خاطر اینکه این فایل ها نیازی به Rendering ندارند و آماده Paint شدن در صفحه هستند و سرعت دریافت و نمایش صفحات وب پیج نسبت به CSR بالاتر است به دلایل مختلف یکی اینکه شما مجبور به دریافت فایل های زیادی از سرورها نیستید به جایش html های آماده شده، دریافت میکنید دیگر اینکه این فایل های نیازی به Rendering توسط مرورگر ندارند.
البته جزئیات دیگری هم وجود دارد ولی اصل مطلب همین بود.
حالا مزیت های SSR
نسبت به تکنولوژی CSR شما Load Time سریع تری دارید
در SSR شما SEO بهتری دارید زیرا محتوای html دریافتی از سرور ها کاملا قابلیت ردیابی و خوانش توسط کرالر های موتور های جستجو را دارند.
امنیت بالاتر در اپ های SSR ، زیرا رندر شدن html توسط سرور ریسک مشکلات امنیتی را کاهش میدهد، این به دلیل این است که SSR منطق اپلیکیشن را در سمت کلاینت اجرا نمیکند هسته پیاده سازی جزئیات برنامه در سمت سرور باقی میماند و این رویکرد به ما اجازه میدهد تا از دیتا های حساس کاربران محافظت کنیم.
مشخصا تجربه کاربری بهتری نیز میدهد زیرا در حالت سرور ساید دیگر شاهد لودینگ اولیه برای دریافت فایل ها یا نمایش Skeleton برای دریافت محتوا ها (شامل عکس فیلم یا متن) نیستید.
نهایتا این حالت مصرف دیتا کاربران را کاهش میدهد زیرا مرورگرها در پشت زمینه مدام درخواست دیتا نمیکنند.
معایب SSR
یکی از بزرگ ترین معایب SSR این است که هزینه های سرور شما به خاطر مصرف شدید منابع سرور بالا میرود. این امر به دلیل رندر مداوم اپلیکیشن و ارسال فایل ها پس درخواست اتفاق می افتد مخصوصا در زمان ترافیک بالای وب سرور و رندر صفحات پیچیده .
ممکن است در موارد نادری به مشکل تاخیر در تعامل با وب سایت یا مسائل ریسپانسیو بخورید این امر زمانی رخ میدهد که عناصر تعاملی مانند فرم ها یا آپدیت های Real-Time هنوز نیاز دارند که مرورگر دیتاهارا از سرور دریافت و در کلاینت ساید اجرا کند و نتیجه آن مقدار TTI (Time To Interactive) پایین تر میشود. محصوصا زمانی که کد کلاینت ساید سنگین بوده و زمان بیشتری برای دریافت نیاز دارد.
پیچیدگی توسعه اپلیکیشن SSR هم از دیگر معایب آن به شمار میرود.
درواقع یک تکنیک است که در بخش های خاصی از وب سایت به کار میرود مزیت اصلی این تکنیک سرعت بالاتر نسبت به حالت SSR است درست شنیدید میتوان از با استفاده از SSG از حالت SSR سریعتر هم شد اما باید بدانید که این حالت برای صفحات معمولا Static که معمولا آپدیت نمیشود یا به صورت هر چند وقت یک بار آپدیت میشود، استفاده میشود جریان از این قرار است که سیستمی که SSG را ساپورت می کند مانند Next Js Gatsby یا Nuxt در زمان گرفتن بیلد وب سایت صفحات html که به صورت SSG ساخته میشوند را میسازد و در بیلد پروژه ذخیره میشود در زمان درخواست این صفحات مثلا توسط مرورگر کاربران بدون عملیات رندر مجدد این صفحات، فایلهای html ذخیره شده ارسال میشود این یعنی در زمان درخواست کاربر هیچ پردازشی برای ساخت صفحه اتفاق نمی افتد و فایلی که در زمان بیلد ذخیره شده به کاربر ارسال میشود.
این یعنی شما با بالاترین حد سرعت می توانید صفحات را به کاربران نمایش دهید اما معمولا این حالت وقتی کاربرد دارد که صفحه شما به صورت مداوم آپدیت نمیشود
که این حالت می تواند در بعضی صفحات خاص کاربردی باشد.
حال میرسیم به تکنیک آخر یعنی ISR که مفهوم آن در نسخه 14 Next js معرفی شده و بسیار کارآمد به نظر می آید.
به زبان ساده شما میتوانید ترکیبی از SSR و SSG را برای ساخت و رندر صفحات خود پیاده سازی کنید.
این یعنی صفحات استاتیک شما که با استفاده از تکنولوژی SSG ساخته شده اند با یک مکانیزم داخلی که در nextjs پیاده شده است به صورت خودکار با زمان داده شده در سرور آپدیت شوند.
در پایین نمونه کدهای Data Fetching در این سیستم ها را با فریم ورک nextjs 14 میبینیم
این یک نمونه ساده دریافت دیتا در ری اکت است : حالت CSR
این مثال برای Data Fetching در حالت استفاده از SSR
لازم به ذکر است که nextjs در سرور کامپوننت ها fetch api را Customize کرده و قابلیت های بیشتری به آن اضافه کرده است
در مثال بعدی به Data Fetching در سیستم SSG می پردازیم
در مثال بعدی به Data Fetching در سیستم ISR می پردازیم
اگر این مقاله برای شما مفید بود لطفا لایک کنید 👍
اگر نظر پیشنهاد یا سوالی داشتید خوشحال میشم تو کامنت ها مطرح کنید🙏
