‫SSR: پایان کابوس بارگذاری صفحات خالی از محتوا در React ،Vue.js و AngularJS

با تغییرات بنیادین تکنولوژی‌های وب به تدریج ماهیت و ساختار آن دست‌خوش تغییرات شده است و صفحات استاتیک HTML به تدریج به صفحاتی پویا و در تعامل بیشتر با کاربر تبدیل شده‌اند. به تدریج و با گذر زمان توسعه‌دهندگان کدهای بیشتری را در سمت کاربر و به زبان جاوااسکریپت نوشتند و وبسایت‌ها تبدیل به اپلیکیشن‌های بزرگ جاوااسکریپتی شدند. برای استانداردسازی، کاهش میزان پیچیدگی و افزایش توسعه‌پذیری کدهای این برنامه‌ها، فریم‌ورک‌ها، کتابخانه‌ها و راه‌حل‌های مختلفی نظیر React، AngularJS، Vue.js و ... ارائه شد.

مدل SPA و نقص بارگذاری صفحات خالی از محتوا

‫SPA مخفف Single Page Application است. در این مدل یک اپلیکیشن جاوااسکریپت برای اجرا در مرورگر کاربر ایجاد می‌شود و مسئولیت کامل تولید تگ‌های HTML، قالب‌بندی سایت و نمایش محتوای مورد نیاز کاربر را بر عهده می‌گیرد. بخشی از برنامه که بر روی سرور قرار دارد با تعبیه APIهایی، محتوای لازم را در اختیار برنامه سمت کاربر می‌گذارد. تاکنون برنامه‌های محبوب زیادی بر اساس مدل SPA پیاده‌سازی شده‌اند که Gmail یکی از قدیمی‌ترین نمونه‌هاست و بدون نیاز به بارگذاری کردن و دریافت مجدد صفحه از سرور، بخش‌ها و اطلاعات مختلفی را در اختیار کاربران خود قرار می‌دهد.

برنامه‌های SPA از نظر فنی دارای یک صفحه HTML خالی از محتوا هستند که به فایل‌های JS و CSS مورد نیاز لینک شده است. این صفحه پس از بارگذاری بر روی مرورگر مخاطب، اپلیکیشن JS مربوطه را اجرا می‌کند. کدهای جاوااسکریپت نوشته شده، محتوای مناسب را با فراخوانی APIهای در دسترس جمع‌آوری نموده و با به‌کارگیری الگوهای از پیش تعیین شده، کدهای HTML قالب و صفحات سایت را به صورت داینامیک تولید می‌کنند.

مشکل اساسی برنامه در این مرحله، نقص بارگذاری صفحات خالی از محتواست که به دلایلی از قبیل خالی بودن فایل HTML دریافت شده از سرور، حجیم بودن فایل‌های JS مرتبط، تاخیر ناشی از انتظار برای دریافت محتوای مورد نیاز از API و همچنین پیچیدگی و زمان‌بر بودن فرآیند تولید کدهای قالب، کاربر در لحظات اول بارگذاری سایت با یک صفحه خالی از محتوا مواجه می‌شود. این اتفاق به هیچ وجه برای کاربر خوشایند نبوده و تاثیر منفی بر روی SEO وبسایت و عملکرد برخی Crawlerهای مهم وب نیز دارد و باعث می‌شود که سایت در برخی شاخص‌های SEO مانند بارگذاری سریع صفحات، امتیاز قابل قبولی دریافت نکند.

تکنیک SSR، راه‌حل مقابله با صفحات خالی از محتوا

‫SSR مخفف Server Side Rendering و تکنیکی جهت تولید محتوای اولیه مناسب و تگ‌های صفحات وب در برنامه‌های مبتنی بر SPA است. در این روش به جای ارسال صفحه HTML خالی از محتوا به کاربر، یک بار کدهای جاوااسکریپت برنامه SPA بر روی سرور اجرا می‌شود و کدهای HTML تولید شده به همراه محتوای مناسب در قالب فایل HTML در اختیار کاربر قرار می‌گیرد.

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

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

نحوه پیاده‌سازی SSR در سایت

اولاً برای استفاده از SSR در اپلیکیشن‌های SPA، باید حتما کتابخانه یا فریم‌ورک سمت کلاینت مورد استفاده ما مفهوم Isomorphic را پشتیبانی کند. خوشبختانه اکثر این ابزارهای معروف مانند React و AngularJS و ... از این مفهوم پشتیبانی می‌کنند و جای نگرانی نیست.

ثانیاً برای عملیاتی شدن این روش، نیازمند اجرای کدهای جاوااسکریپتی اپلیکیشن SPA بر روی سرور هستیم. بنابراین به Node.js نیاز داریم.

در حالت ایده‌آلی که برنامه‌ی بک اند سایت نیز با استفاده از جاوااسکریپت و ابزارهایی نظیر Express.js و ... پیاده‌سازی شود، دردسر چندانی برای انجام SSR نخواهیم داشت و با کمی کدنویسی بیشتر، بخش‌هایی از کدهای برنامه SPA اجرا خواهد شد و خروجی HTML مورد نیاز را تولید می‌کند.

در صورتی که برنامه بک اند، با تکنولوژی‌هایی غیر از Node.js پیاده‌سازی شده باشد باز هم امکان به‌کارگیری SSR وجود دارد. در این حالت نیاز است که از پروژه‌ای مانند proxy-render کمک بگیریم و یا یک پروژه جانبی مبتنی بر ابزارهایی نظیر Express.js ایجاد شود تا با اجرا در کنار برنامه بک اند اصلی، ضمن دریافت پارامترها و متغیرهای حاوی اطلاعات مناسب، مسئولیت اجرای کدهای برنامه SPA و تولید خروجی HTML را بر عهده بگیرد.

نتیجه‌گیری

همانطور که گفته شد، نقص بارگذاری صفحات خالی از محتوا در برنامه‌های SPA، با اثر منفی‌ای که بر تجربه کاربری مخاطبین می‌گذارد و همچنین تاثیر منفی بر SEO، می‌تواند به کابوس شبانه مدیران وبسایت‌ها بدل شود. استفاده از روش SSR راه حل بسیار موثری است و استفاده از آن را به شدت توصیه می‌کنم.

با توجه به اینکه مطالب بیان شده حاصل تجربیات شخصی من است، همواره مشتاق شنیدن نظرات و تجربیات شما و انجام بحث در این باره هستم.

از توجه شما ممنونم :)