مدل های رندرینگ در ریاکت: تفاوت SSR با CSR و SSG

تکنیک‌های مختلف رندرینگ وبسایت‌ها، شامل SSR (Server-Side Rendering)، CSR (Client-Side Rendering)، و SSG (Static Site Generation)، هرکدام ویژگی‌ها و مزایای خود را دارند.

در SSR یا رندرینگ سمت سرور، صفحه وب توسط سرور ایجاد می‌شود و به کاربر ارسال می‌شود. این روش مناسب برای وبسایت‌هایی است که به دینامیک بودن زمان اجرا نیاز دارند. با SSR، محتوا در سمت سرور بارگذاری شده و به کاربر ارسال می‌شود، که موجب افزایش سرعت بارگذاری صفحه و بهبود بهینه‌سازی برای موتورهای جستجو می‌شود.

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

SSG یا رندرینگ استاتیک به معنای ایجاد صفحات وب سایت به صورت استاتیک می‌باشد. در این روش، صفحات به در زمان ساخت (build time) ایجاد می‌شوند و برای هر درخواست به سرور نیازی نداریم. این روش مناسب برای وبسایت‌هایی است که محتوا کمتر تغییر می‌کند و به سرعت بارگذاری و بهینه‌سازی توجه دارند.

و در انتها به معرفی تکنیک‌های Streaming Server-Side Rendering (SSSR) و Partial Hydration که روش‌های پیشرفته‌ای هستند که برای بهبود عملکرد و تجربه کاربری وب ارائه شده‌اند می‌پردازیم

اگر سوالی داشتید همینجا تو قسمت comment ها میتونید بپرسید یا داخل تلگرام به ادرس @nima_arf بهم پیام بدید.

وب سایت: https://react.ir
کانال تلگرام: https://t.me/react_ir



0:00 Intro
1:24 Rendering Strategies
Client Side Rendering (CSR) 4:44
Server Side Rendering (SSR) 9:52
Static Site Generation (SSG) 13:05
Streaming SSR 16:50
Partial Hydration 20:19