تفاوت بین SSR, CSR, SSG و ISR : بررسی کلی و عمیق

در توسعه وب، استراتژی های رندر در شکل دادن به تجربیات کاربر مهم هستند. در این پاسخ، ما چهار رویکرد رندر برجسته را بررسی خواهیم کرد: رندر سمت سرور (SSR)، رندر سمت کلاینت (CSR)، بازسازی استاتیک افزایشی (ISR)، و تولید سایت استاتیک (SSG). در حالی که بسیاری از این تکنیک‌ها بهبود چشمگیری در سرعت بارگذاری/تحویل وب‌سایت به ارمغان آورده‌اند، اما موارد استفاده، مزایا و معایب خود را نیز دارند. در این مقاله، کمی عمیق‌تر می‌شویم و نگاهی به پشت صحنه می‌اندازیم که چگونه این تکنیک‌ها کار می‌کنند و چه زمانی از آنها استفاده کنیم.

به‌عنوان یک توسعه دهنده React، تصمیم گرفتم همه چیز را تغییر دهم و یک جعبه ابزار توسعه جدید یاد بگیرم. پس از تحقیقات بیشتر، Next.js قدم بعدی منطقی به نظر می رسید، اما Next.js در واقع چه کاری انجام می دهد، و چه تفاوتی با React خارج از جعبه دارد؟

تفاوت عمده بین Next.js و React در نحوه رندر شدن برنامه است. React خارج از جعبه به طور کامل با استفاده از رندر سمت کلاینت (CSR) تولید می شود، در حالی که Next.js از رندر سمت سرور (SSR) یا تولید سایت ایستا (SSG) استفاده می کند.

رندر سمت کلاینت (CSR)

رندر سمت کلاینت شامل ارائه محتوا در مرورگر کلاینت با استفاده از جاوا اسکریپت است. این رویکرد تعامل را افزایش می دهد و بار سرور را کاهش می دهد، زیرا سرور در درجه اول داده های خام را ارائه می دهد. در این، یک مرورگر وب در ابتدا یک فایل HTML خالی را بارگذاری می کند. جاوا اسکریپت و استایل‌هایی که پس از بارگیری می‌شوند، وظیفه ارائه صفحه کاربرپسند کامل در مرورگر وب را بر عهده دارند.

CSR چگونه کار می کند؟

پس از بارگذاری یک صفحه، مرورگر کلاینت حداقل HTML و جاوا اسکریپت را بازیابی می کند. جاوا اسکریپت داده ها را واکشی می کند و اجزا را به صورت پویا ارائه می کند. با این حال، به دلیل تلاش موتورهای جستجو برای فهرست کردن محتوای ارائه شده از طریق جاوا اسکریپت، سئو ممکن است به خطر بیفتد.

علت اینکه سئو فرندلی نیست برنامه های تحت وب که از این روش استفاده می کنند دارای معایبی هستند. اول اینکه، ربات ها برای خزیدن اطلاعات سایت شما مشکل دارند. بسیاری از ربات‌ها برای جمع‌آوری اطلاعات به فایل HTML منبع نگاه می‌کنند و اگر فایل ریشه خالی باشد، ربات‌ها نمی‌توانند به درستی کار کنند. این مشکلات احتمالی را در هنگام تلاش برای بهینه سازی یک وب سایت برای موتورهای جستجو یا ربات های توییتر ایجاد می کند.

مراحل مربوط به رندر سمت کلاینت
 

1. کاربر از سرور درخواست می کند

2. سرور یک صفحه HTML خالی برمی گرداند

3. مرورگر بسته JS را واکشی و دانلود می کند

4. JS رابط کاربری HTML را می سازد و آن را تعاملی می کند (کنترل کننده های رویداد لازم را ضمیمه می کند)

5. هر درخواستی به API های شخص ثالث انجام می شود

6. اکنون کاربران می توانند به طور کامل با صفحه وب ارتباط برقرار کنند

چه زمانی از رندر سمت کلاینت استفاده کنیم

رندر سمت کلاینت به بهترین وجه در برنامه های کاربردی وب با ویژگی ها و صفحات پیچیده بزرگ استفاده می شود. CSR برای برنامه هایی که خواستار به روز رسانی بلادرنگ و محتوای پویا هستند مناسب است. کتابخانه ها و فریم ورک های محبوب جاوا اسکریپت مانند React، Vue JS و Angular اجرای کارآمد CSR را امکان پذیر می کنند.

مزایا
 

• کاهش بار کاری سمت سرور

• کاهش هزینه سرور

• تجربه کلاینت بهتر

معایب
 

• سئوی ضعیف، از آنجایی که صفحه اولیه ارسال شده به مرورگر خالی است، خزنده های وب نمی توانند محتوای صفحه را ایندکس کنند.

• بار اولیه آهسته از آنجایی که dom در سمت کلاینت ساخته می شود.

رندر سمت سرور (SSR)

رندر سمت سرور شامل تولید محتوای HTML بر روی سرور قبل از تحویل آن به کلاینت است. این رویکرد موتورهای جستجو را قادر می‌سازد تا محتوا را به‌طور مؤثر ایندکس کنند و در نتیجه سئو بهبود یافته و بارگذاری اولیه صفحه سریع‌تر شود.

SSR چگونه کار می کند؟

هنگامی که کاربر صفحه ای را درخواست می کند، سرور داده های لازم را دریافت می کند و محتوای HTML را تولید می کند. سپس صفحه کاملاً رندر شده برای کلاینت ارسال می شود. علیرغم مزایا، SSR می تواند چالش های مربوط به بار سرور و واکشی پیچیده داده ها را ایجاد کند.

زمان استفاده از رندر سمت سرور

SSR را می توان در وب سایت هایی استفاده کرد که سئو در آنها بسیار مهم است. یا در شرایطی که هر کاربر محتوای منحصر به فردی دارد که در بارگذاری اولیه نشان داده شده است. چارچوب‌هایی مانند Next JS اجرای SSR را با قابلیت‌های رندر سرور داخلی ساده می‌کنند.

مزایا
 

• نمایه سازی آسان توسط موتورهای جستجو

• زمان بارگذاری سریع به خصوص در صورت اتصال کند

معایب
 

• بار بالای سرور، زیرا سرور باید در هر درخواستی صفحه را بسازد

• انتقال آهسته تر بین صفحات در برنامه

تولید سایت ایستا (SSG)

تولید سایت ایستا شامل پیش رندر کردن تمام صفحات به عنوان فایل های HTML ایستا در طول فرآیند ساخت است. برای جلوگیری از رندر شدن در هر درخواست، فایل‌ها را در زمان ساخت تولید می‌کنیم تا در صورت درخواست کاربر، فوراً صفحات را ارائه دهیم. این استراتژی زمان بارگذاری سریع و امنیت را افزایش می دهد.

SSG چگونه کار می کند؟

در طول مرحله ساخت، برنامه برای هر صفحه فایل های HTML تولید می کند. این فایل‌های استاتیک سپس به کاربران ارائه می‌شوند و نیاز به رندر سمت سرور و کوئری‌های پایگاه داده را به حداقل می‌رسانند.

زمان استفاده از تولید سمت سرور

SSG را می توان برای وب سایت هایی استفاده کرد که محتوای آنها اغلب تغییر می کند، مانند وبلاگ ها.SSG برای وب سایت ها و پورتفولیوهای محتوا محور عالی است. ابزارهایی مانند Gatsby و Nuxt JS اجرای SSG را ساده می کنند و عملکرد و امنیت مطلوب را تضمین می کنند.

مزایا
 

• عملکرد بالا به لطف ذخیره CDN

• صفحه HTML ایستا همیشه ارائه می شود حتی اگر باطن خراب باشد

معایب
 

• محتوای صفحه ارائه شده توسط CDN می تواند به راحتی در صورت تغییر سریع محتوا منسوخ شود.

   

بازسازی استاتیک افزایشی (ISR)

بازسازی استاتیک افزایشی عناصر SSR و SSG را ترکیب می کند. این به ما امکان می‌دهد در طول زمان ساخت، صفحات استاتیک را از قبل رندر کنیم، در حالی که به‌طور دوره‌ای صفحات خاصی را با داده‌های به‌روز بازسازی می‌کنیم. ISR نشان دهنده پیشرفتی نسبت به SSG است که شامل بازسازی منظم و اعتبارسنجی مجدد صفحات برای جلوگیری از قدیمی شدن بیش از حد محتوا است.

ISR چگونه کار می کند؟

صفحات استاتیک در زمان ساخت تولید می شوند و صفحات پویا به صورت تدریجی بر اساس محرک های خاص بازسازی می شوند. این استراتژی مزایای محتوای ثابت و به‌روزرسانی‌های بی‌درنگ داده را متعادل می‌کند.

زمان استفاده از بازسازی استاتیکی افزایشی

ما می‌توانیم از ISR برای وب‌سایت‌هایی استفاده کنیم که می‌خواهیم به‌روزرسانی‌های تازه را در هر صفحه به کلاینت تحویل دهیم، بدون اینکه نیازی به استقرار مجدد سایت و با مزایای SSG باشد. ISR برای وب سایت هایی با محتوایی که نیاز به به روز رسانی مکرر دارند، مانند وبلاگ ها یا پورتال های خبری، ایده آل است. چارچوب‌هایی مانند Next JS قابلیت‌های ISR را برای دستیابی به تعادل کامل بین محتوای استاتیک و داده‌های پویا فراهم می‌کنند.

مزایا
 

• بار کمتر سرور

• تحویل محتوا بسیار سریع است

• بازسازی/استقرار وب سایت برای نمایش محتوای تازه نیازی نیست.

معایب
 

• ممکن است به مراحل پیکربندی اضافی نیاز داشته باشد

   

مقایسه معایب و مزایای SSR, CSR, ISR و SSG

مزایا
 

SSR: بهبود SEO و زمان بارگذاری اولیه سریعتر.

CSR: تعامل، کاهش بار سرور.

ISR: محتوای ثابت و به‌روزرسانی‌های بی‌درنگ را متعادل می‌کند.

SSG: عملکرد عالی، امنیت افزایش یافته.

معایب
 

SSR: افزایش بار سرور و پیچیده تر در مقایسه با CSR.

CSR: سئو به خطر افتاده و زمان بارگذاری اولیه کندتر.

ISR: برای داده های پویا نیاز به راه اندازی دقیق دارد.

SSG: تعامل محدود و به روز رسانی در زمان واقعی در مقایسه با رویکردهای رندر پویا.

نتیجه

در دنیای توسعه وب، انتخاب نحوه نمایش سایت مهم است. می‌توانید از رندر سمت سرور (SSR) برای سرعت و دید موتور جستجو، رندر سمت کلاینت (CSR) برای تعامل، بازسازی استاتیک افزایشی (ISR) برای تعادل، یا تولید سایت استاتیک (SSG) برای عملکرد سریع استفاده کنید. انتخاب راه درست به شما کمک می کند وب سایت خود را عالی جلوه دهید و کار کنید.