رندر به فرآیند ایجاد کد مورد نیاز برای ایجاد صفحه ای اشاره دارد که کاربران نهایی بتوانند از طریق مرورگر خود با آن تعامل داشته باشند. این شامل آماده سازی محتوا، اعمال منطق و پردازش و شامل هر عنصر رابط کاربری و سایر اجزای مورد نیاز برای نمایش صفحه نهایی است. برنامه‌های مبتنی بر محتوا بر سرعت بارگذاری سریع، تأخیر کم و زمان‌های رندر سریع تمرکز دارند.
رندر سمت سرور (SSR)
رندر سمت سرور (SSR) شامل رندر کردن صفحات وب روی سرور و سپس ارسال HTML کاملاً رندر شده به مرورگر مشتری به جای رندر کردن آنها در سمت مشتری با جاوا اسکریپت است. هنگامی که کاربران به یک برنامه دسترسی پیدا می کنند، مرورگر آنها درخواستی را به سرور ارسال می کند. برنامه درخواست را روی سرور پردازش می‌کند، که شامل جمع‌آوری داده‌ها از پایگاه‌های داده یا APIهای خارجی است، سپس HTML را برای صفحه درخواستی ارائه می‌کند. سپس سرور HTML کامل رندر شده صفحه را به مرورگر کاربر می فرستد. هنگامی که مرورگر کاربر HTML را دریافت می کند، مرورگر فایل های جاوا اسکریپت مورد نیاز را بارگیری می کند.
مزایای استفاده از SSR شامل سرعت بارگذاری اولیه سریع، عملکرد خوب بهینه سازی موتور جستجو (SEO)، قابلیت اطمینان و تجربه کلی کاربر خوب است. با این حال، SSR به دلیل سربار عملکرد و مهارت توسعه لازم برای ساخت و نگهداری برنامه‌های کاربردی با قابلیت SSR، می‌تواند پیچیده‌تر از رندر سمت مشتری (CSR) باشد. SSR به ویژه برای برنامه های کاربردی وب محتوا محور، پلتفرم های تجارت الکترونیک و هر برنامه ای که به عملکرد خوب SEO و سرعت پاسخ اولیه سریع نیاز دارد، مفید است.
تولید سایت ایستا (SSG)
تولید سایت استاتیک (SSG) فایل های HTML ایستا را در زمان ساخت تولید می کند و آنها را بدون رندر سمت سرور یا سمت کلاینت به کاربران تحویل می دهد. محتوای وب معمولاً در قالبی ساختاریافته مانند Markdown، JSON یا YAML نوشته می‌شود و شامل متن، تصاویر و سایر دارایی‌ها است. یک ابزار تولید کننده سایت ایستا، مانند Hugo یا Jekyll ، محتوا را پردازش می کند و فایل های HTML، CSS و جاوا اسکریپت را تولید می کند. خروجی استاتیک کل وب سایت است و این فایل های استاتیک در یک وب سرور، CDN یا سرویس میزبانی مستقر می شوند.
در web.dev درباره CSS و HTML بیشتر بیاموزید.
از آنجایی که فایل‌ها ثابت هستند، می‌توان آنها را کش کرد و در نتیجه خیلی سریع بارگذاری شد. SSG گزینه خوبی برای برنامه های کاربردی وب است که مرتباً تغییر نمی کنند یا برنامه هایی که از طریق سایت های دوره ای به روز می شوند. این یک انتخاب مناسب برای برنامه های کاربردی وب با تعامل پویا نیست.
ارائه سمت مشتری (CSR)
رندر سمت کلاینت (CSR) در مرورگر مشتری رخ می دهد، نه در سرور. برنامه های کاربردی وب اغلب با حداقل قالب های HTML بارگذاری می شوند و سپس محتوا با استفاده از جاوا اسکریپت و داده های سرورها یا API ها به صورت پویا دستکاری می شود. پس از درخواست برنامه، سرور یک سند HTML حداقل با ساختار اصلی و کد جاوا اسکریپت مورد نیاز برای ارائه صفحه ارسال می کند. کد جاوا اسکریپت در مرورگر کاربر اجرا می شود. سپس کد داده های واکشی شده را پردازش می کند و محتوا شامل CSS، HTML و تمام عناصر تعاملی را تولید می کند. کد جاوا اسکریپت سپس به تعامل کاربر مانند ارسال فرم پاسخ می دهد.
مزایای CSR شامل انتقال سریع صفحه و رابط های پاسخگو است. برنامه های وب مبتنی بر CSR اغلب زمان بارگذاری اولیه آهسته در مقایسه با SSR دارند و می توانند چالش های SEO را ایجاد کنند. همانطور که برنامه های CSR رشد می کنند، توسعه و نگهداری آنها می تواند بسیار پیچیده شود.