با گزینه های بسیار زیادی برای انتخاب، رندر موضوعی است که باید در بالای آن نگه دارید.
چارچوب‌های وب مدرن گزینه‌های زیادی را در مورد نحوه ارائه یک سایت یا برنامه از سرور به مشتری ارائه می‌دهند. شما می توانید HTML را در هر دو طرف ایجاد کنید، یا آن را برای توزیع با سرعت بالا از طریق یک شبکه تحویل محتوا از قبل رندر کنید.
تصمیم گیری در مورد نحوه ساختار یک سایت یا برنامه به چند عامل مختلف بستگی دارد. شما باید از نحوه دسترسی بازدیدکنندگان به سایت یا اپلیکیشن شما آگاه باشید. باید بدانید که آیا سرعت بارگذاری در بار اولیه یا ناوبری بعدی اهمیت بیشتری دارد. همچنین در نظر بگیرید که هر چند وقت یکبار سایت را به روز می کنید.
همه این عوامل را در نظر داشته باشید تا مزایا و معایب هر پارادایم رندرینگ را بسنجید.
رندر کردن وب سایت ها به روش های بیشتر
رندر یک وب سایت به فرآیند نمایش یک وب سایت در یک مرورگر وب اشاره دارد. راه های مختلفی برای نزدیک شدن به فرآیند تبدیل داده های خام به HTML فرمت شده در صفحه کاربر وجود دارد.
هر روشی مزایا و معایب خود را دارد و دانستن مزایا و معایب هر کدام می تواند به شما در انتخاب روش مناسب برای سایت کمک کند.
CSR: مرورگر مسئولیت را بر عهده می گیرد
CSR مخفف Client Side Rendering است. هنگامی که یک برنامه یا سایت سمت کلاینت را رندر می‌کنید، سرور به جز یک قطعه کوچک کد boilerplate، HTML کمی ارسال می‌کند. سپس صفحه پس از رویداد بارگذاری صفحه، از طریق درخواست های AJAX، هر داده ای را که نیاز دارد از سرور درخواست می کند.
هنگامی که یک برنامه یا صفحه سمت کلاینت را ارائه می دهد، سرور یک اسکریپت را به مشتری ارسال می کند که HTML را در مرورگر مشتری ایجاد می کند. این به برنامه‌های تک صفحه‌ای اجازه می‌دهد که هنگام تعامل با مرورگر، مرورگر را تازه‌سازی نمی‌کنند.
برنامه‌های CSR اغلب در مسیریابی سریع بارگیری می‌شوند، اما ممکن است در ابتدا کند باشند. سرعت تا حد زیادی به چارچوبی که برای انجام رندر انتخاب می کنید و تعداد کتابخانه ها و افزونه های اضافی که استفاده می کنید بستگی دارد. اکثر فریم ورک های مدرن جاوا اسکریپت دارای گزینه ای برای CSR هستند.
صفحات و برنامه های رندر شده کاملاً توسط مشتری از ناتوانی در پیمایش مستقیم به یک صفحه مشخص با استفاده از URL رنج می برند. هنگامی که یک برنامه رندر شده در سمت مشتری برای اولین بار شروع می شود، صرف نظر از URL وارد شده، به همان نقطه شروع حرکت می کند.
SSR: ارائه در سرور مرکزی
SSR مخفف عبارت Server Side Rendering است. این یک شکل سنتی تر از رندر صفحه وب است که در آن سایت ها HTML را بر اساس الگوها تولید می کنند و ترکیبی از HTML، شیوه نامه ها و اسکریپت ها را برای مشتری ارسال می کنند. اکثر محبوب ترین فریم ورک های وب باطن در این دسته قرار می گیرند.
برنامه‌ها و سایت‌های رندر شده سمت سرور معمولاً بارگذاری اولیه سریع‌تری دارند، اما هر ناوبری متوالی به یک به‌روزرسانی کامل نیاز دارد. این به این معنی است که نه تنها زمان بیشتری طول می‌کشد، بلکه توسعه‌دهندگانی که با SSR کار می‌کنند باید مدیریت جلسه را نیز در نظر بگیرند.
بزرگترین مزیت سایت‌ها و برنامه‌های تولید شده توسط SSR، سازگاری مسیریابی مسیر است. کاربری که یک مسیر مشخص را وارد می کند مستقیماً به صفحه درخواستی منتقل می شود. برخی از چارچوب‌ها هدایت‌های کاربر را از صفحه‌ای به صفحه دیگر در برنامه مدیریت می‌کنند، اما کاربران ممکن است نتوانند در ابتدا به صفحه مورد نظر خود دسترسی پیدا کنند.
بسیاری از چارچوب‌های مدرن راه‌حل‌های ترکیبی را ارائه می‌کنند که با ارائه یک صفحه ارائه‌شده توسط سرور به مشتری شروع می‌شوند. پس از بارگیری صفحه، رویدادی به نام هیدراتاسیون رخ می دهد که در آن رویدادهای اسکریپت سمت سرویس گیرنده به کنترل های صفحه متصل می شوند. از اینجا به بعد، مشتری هر مسیریابی را انجام می دهد.
داینامیک ترکیبی این امکان را برای کاربران فراهم می‌کند که مستقیماً به هر صفحه در یک برنامه بروند، در حالی که همچنان سرعت و نرمی یک برنامه تک صفحه‌ای را دریافت می‌کنند. Next.js چندین پارادایم رندر ارائه می دهد، مانند Nuxt.js و Sveltekit.
SSG: رندر به حداقل رسیده است
SSG یا Static Site Generation، نیاز به تولید HTML در سمت کلاینت یا سرور را دور می زند. در عوض، سایت‌ها و برنامه‌های به سبک SSG هر صفحه‌ای را که ممکن است نیاز داشته باشند، از پیش کامپایل می‌کنند و نتایج را برای تحویل سریع به CDN می‌برند.
این یک روش بسیار مؤثر برای ارائه سریع صفحات وب است. نتایج معمولاً در بسته‌های ساده حاوی تمام HTML و شیوه نامه‌های مورد نیاز برای یک صفحه جداگانه جمع‌آوری می‌شوند. این بسته‌ها تا حد امکان فشرده نگهداری می‌شوند تا اطمینان حاصل شود که کاربر آنها را در سریع‌ترین زمان ممکن دریافت خواهد کرد.
سایت‌های SSG تمایل دارند سرعت بارگذاری فوق‌العاده سریعی را ارائه دهند، علی‌رغم اینکه برای هر ناوبری نیاز به به‌روزرسانی دارند. با این حال، نقطه ضعف اصلی یک سایت ثابت، عدم انعطاف پذیری است. سیستم‌های بسیار پویا مانند برنامه‌های رسانه‌های اجتماعی یا پلتفرم‌های پیچیده تجارت الکترونیک به تغییرات بسیار بیشتری نسبت به آنچه که یک SSG به راحتی می‌تواند انجام دهد، نیاز دارند.
بسیاری از سایت‌های استاتیک نیز به مقدار زیادی سربار برای تغییر نیاز دارند، زیرا هر تغییر جدید باید به طور مستقل کامپایل شود. این باعث می‌شود که رندر سبک SSG برای سایت‌هایی که به سرعت تغییر می‌کنند، مانند یک فروشگاه دیجیتالی با تغییر سریع موجودی یا برنامه‌های رسانه‌های اجتماعی، انتخاب ضعیفی باشد.
ISR: کمی از همه چیز
ISR که به راحتی پیچیده ترین نوع رندر و همچنین سودمندترین آن است، مخفف عبارت Incremental Static Regeneration است. ISR سرعت و مقیاس‌پذیری سایت‌های ایجاد شده به صورت ایستا را با واکنش‌پذیری برنامه‌های سبک SSR و CSR ترکیب می‌کند.
هنگامی که هر صفحه ای در یک صفحه یا برنامه به سبک ISR درخواست می شود، سرور ابتدا بررسی می کند که آیا نسخه کش منقضی نشده صفحه وجود دارد یا خیر. اگر وجود داشته باشد، سرور بلافاصله صفحه ذخیره شده را ارائه می دهد.
اگر نسخه کش شده صفحه وجود نداشته باشد، یا زمان کافی از تولید آن گذشته باشد، سرور نسخه جدیدی تولید می کند. این نسخه جدید به کلاینت منتقل می شود و برای استفاده های بعدی ذخیره می شود.
راه‌اندازی این نوع رندر پیچیده‌تر است، اما اکثر مشکلاتی را که معمولاً سایت‌های SSG تجربه می‌کنند، خودکار می‌کند. این به برنامه‌ها اجازه می‌دهد تا سرعت و قابلیت اطمینان یک برنامه تولید شده به صورت ایستا را ارائه دهند و در عین حال هزینه‌های اضافی را به‌طور خودکار حذف کنند.
چندین چارچوب مدرن در حال حاضر گزینه رندر به سبک ISR را ارائه می دهند. بسیاری دیگر از تولید افزایشی در توسعه پشتیبانی می کنند. اکثر فریم‌ورک‌های اصلی به زودی از رندر ISR پشتیبانی می‌کنند، اگر قبلاً این کار را نکرده باشند.
کدام نوع رندر بهترین است؟
راه های مختلفی برای رندر کردن یک وب سایت یا برنامه وجود دارد. هر یک از این چهار نوع رندر دارای تغییرات متعددی است. هیچ نوع رندری برای همه پروژه‌ها ایده‌آل نیست و اینکه کدام نوع را انتخاب می‌کنید به آنچه در سایت یا برنامه شما مهم است بستگی دارد.
هنگام انتخاب یک پارادایم رندر برای پروژه خود، مهم است که سرعت، نحوه استفاده مخاطبان از پروژه شما و تعداد دفعات تغییر سایت را در نظر بگیرید. اینها اصول اولیه ای خواهند بود که به شما در تصمیم گیری در مورد بهترین راه برای ساختار سایت یا برنامه خود کمک می کنند.