رندرینگ سمت کلاینت (CSR) یک روش رندرینگ است که در آن فرآیند رندر کردن وب‌سایت یا اپلیکیشن در مرورگر کاربر انجام می‌شود. در این روش، سرور یک فایل HTML حداقلی به همراه لینک‌های جاوااسکریپت ارسال می‌کند و سپس مرورگر با دانلود این فایل‌ها، محتوا را بارگذاری و رندر می‌کند. CSR معمولاً برای اپلیکیشن‌هایی که محتوای دینامیک و نیاز به تعامل بالایی دارند، مانند اپلیکیشن‌های چت و پلتفرم‌های اجتماعی، استفاده می‌شود. همچنین برای اپلیکیشن‌های تک صفحه‌ای (SPA) و برنامه‌های داخلی مانند داشبوردهای مدیریتی نیز مناسب است.

نحوه عملکرد رندرینگ سمت کلاینت

• درخواست کاربر: کاربر از طریق مرورگر درخواست یک وب‌سایت را می‌دهد.
• دریافت درخواست توسط سرور: سرور درخواست را دریافت کرده و مسیر یا URL مورد نظر را شناسایی می‌کند.
• ارسال HTML حداقلی: سرور یک صفحه HTML حداقلی به همراه لینک‌های CSS و جاوااسکریپت ارسال می‌کند.
• تحلیل HTML: مرورگر HTML را تحلیل کرده و مدل شیء سند (DOM) را ایجاد می‌کند.
• دانلود CSS و جاوااسکریپت: مرورگر درخواست‌های اضافی برای دانلود CSS و جاوااسکریپت ارسال می‌کند.
• رندر کردن صفحه: مرورگر از DOM و CSS دانلود شده برای رندر کردن ساختار ابتدایی صفحه استفاده می‌کند.
• اجرای جاوااسکریپت: کد جاوااسکریپت اجرا شده و تعاملات و محتوای دینامیک به صفحه اضافه می‌شود.
• به‌روزرسانی مجدد: با تعامل کاربر، بخش‌هایی از صفحه دوباره رندر می‌شوند.

مزایای رندرینگ سمت کلاینت

• کاهش بار سرور: CSR بار زیادی از فرآیند رندر را از سرور به مرورگر منتقل می‌کند و سرور تنها نیاز به ارسال HTML حداقلی دارد.
• تعامل بیشتر: کاربران می‌توانند بدون نیاز به بارگذاری مجدد کامل صفحه با وب‌سایت تعامل داشته باشند.

معایب رندرینگ سمت کلاینت

• زمان بارگذاری طولانی‌تر: CSR ممکن است زمان بارگذاری طولانی‌تری نسبت به SSR داشته باشد زیرا مرورگر باید تمام فایل‌های جاوااسکریپت را دانلود کند.
• سئو ضعیف‌تر: وب‌سایت‌های رندر شده در سمت کلاینت ممکن است برای موتورهای جستجو قابل ایندکس نباشند که این موضوع بر روی ترافیک ارگانیک تأثیر منفی دارد.
• وابستگی به دستگاه کاربر: عملکرد CSR به قدرت پردازش دستگاه کاربر وابسته است و ممکن است بر روی دستگاه‌های قدیمی یا کم‌قدرت خوب عمل نکند.

تفاوت‌های کلیدی بین CSR و SSR

اگر این مقاله برای شما مفید بود، لطفاً آن را لایک کنید! 👍 ❤️