روش Server Side Rendering (یا به اختصار SSR) روشیه که به کمک اون میتونیم فرایند رندر شدن اپلیکیشن فرانت اندی خودمون رو در سمت سرور (به جای مرورگر کاربر) انجام بدیم. از محبوب ترین ابزارها برای پیاده سازی اپلیکیشن های تحت وب میشه به Next.js برای React و نقطه مقابل اون Nuxt برای Vue اشاره کرد. در ادامه به بررسی تخصصی تر سرورساید رندرینگ در فرانت اند میپدازیم و مزایا و معایب اون رو بصورت کامل بیان خواهیم کرد. همچنین روشهایی به شما پیشنهاد میدیم که از طریق اون میتونید بهترین تجربه پیاده سازی یک اپلیکیشن SSR رو داشته باشید.
اگر شما سابقه توسعه اپلیکیشن های فرانت اندی به کمک یکی از کتابخانه ها و فریمورک های محبوب (مثل React، Vue، Angular و ...) رو داشته باشین احتمالا متوجه نحوه کارکرد اونها شدین. این ابزارها برای لود کردن کامپوننت ها و ساختن ساختار صفحات وبسایت از جاوااسکریپت در مرورگر کاربر استفاده میکنند. به این معنی که در ابتدا (و بدون لود شدن جاوااسکریپت) شما یک HTML خالی و فقط با یک المان root به کاربر برمیگردونین و بعد از لود شدن جاوااسکریپت اپلیکیشن شما ساخته میشه و درون اون المنت روت به اصطلاح mount (جایگذاری) میشه.
به عنوان مثال اگر شما یک پروژه ری اکتی که با Create react app ساختین رو اجرا بکنین و با زدن Ctrl + U سورسش رو نگاه کنین. با چیزی شبیه به کد زیر روبرو خواهید شد:
اگر کنجکاو باشین احتمالا این سوال براتون پیش اومده که پس کدهای من کجان؟ کامپوننت ها و همه اون المان هایی که بصورت کدهای jsx نوشتم کجا ذخیره شدن؟؟
جوابتون رو بالاتر دادم :)
این فایل html در ابتدا برای کاربر لود میشه و المان ها و کامپوننت ها و صفحاتی که ساختین همگی در فایل جاوااسکریپتی که موقع بیلد گرفتن به شما خروجی داده میشه قرار داده شده. (توی این کد همون فایل bundle.js). معنی این حرف اینه که کل کد شما توی جاوااسکریپت هست و اگر شما جاوااسکریپت مرورگر خودتون رو غیر فعال کنین، سایت شما هیچ چیزی نخواهد بود جز یک صفحه سفید خالی!
در عین حال که این موضوع خیلی جذاب به نظر میرسه یه جاهایی میتونه دردسرهایی هم برای ما ایجاد کنه که در ادامه برای شما توضیح خواهم داد.
حالا بیاین و برگردیم سراغ تعریف SSR، همونطور که در بالا گفتیم، اگر شما بصورت عادی از React استفاده کنین (مثلا وقتی پروژه تون رو با Create React App میسازین) کل محتوای سایت شما توسط JavaScript در صفحه لود میشه و واقعا در HTML وجود ندارن! سرورساید رندرینگ کاری که انجام میده اینه: "کد جاوااسکریپت شما رو به جای مروگر کاربر، داخل سرور به کمک NodeJs اجرا میکنه و html ساخته شده رو به کاربر برمیگردونه."
در این حالت مرورگر کاربر حتی اگر جاوااسکریپت رو اجرا نکنه باز هم سایت شما رو بصورت کامل میبینه و در کارکردش خللی ایجاد نمیشه.
به عنوان مثال اگر شما همون پروژه ری اکتی قبلی رو در NextJs اجرا بکنید سورس کد شما چنین چیزی خواهد بود:
در این روش بر خلاف روش قبلی، کد html بصورت کامل و رندر شده به کاربر ارسال میشه و کامپوننت ها و کدهای شما واقعا در سورس html وجود داره (بدون نیاز به اجرای جاوااسکریپت و انجام فرایند رندرینگ در مرورگر کاربر). در واقع روی سروری که کد شما رو اجرا کرده فرایند رندرکردن کامپوننت ها انجام شده و html بصورت رندر شده و آماده به کاربر ارسال شده.
جواب خلاصه و مفید برای این سوال اینه :
"فقط برای SEO و بهتر دیده شدن سایت توسط موتور های جستجوگر!"
در واقع موتورهای جستجوگر بر اساس تجربه و یک سری تحقیقات اثبات شده در اجرا کردن جاوااسکریپت مشکل اساسی دارن. به طور کلی فرایند بازدید از یک سایت وقتی توسط ربات های گوگل و ... انجام میشه با بازدید یک کاربر معمولی کاملا متفاوته. اونها فقط سورس اصلی سایت رو میخونن و به سادگی نمیتونن کدهای جاوااسکریپت رو اجرا کنن و بفهمن.
بنابراین اگر سایت شما به روش SSR پیاده سازی نشده باشه (از اونجاییکه تمامی محتوای وبسایت مثل متن ها، تصاویر، عناوین و... توسط جاوااسکریپت در صفحه لود میشن و خزنده های گوگل نمیتونن خیلی خوب اونها رو بفهمن) شما احتمالا امتیاز خوبی از گوگل نخواهید گرفت و قدرت رقابت شما در گوگل به شدت افت پیدا خواهد کرد. اینجاست که توصیه میشه اگر در حال توسعه وبسایتی هستید که قرار هست در گوگل ایندکس بشه و سئو برای شما اهمیت داره حتما و حتما از روش پیاده سازی SSR اقدام کنید.
این مشکل در خوندن سورس های جاوااسکریپت توسط ربات موتورهای جستجو دو دلیل عمده داره:
۱- خوندن، اجرا کردن و فهمیدن جاوااسکریپت و ساختن ساختار صفحه بر اساس اون برای ربات های گوگل و ... سخت هست و به این راحتیا از پسش بر نمیان.
۲- اجرا کردن درخواست های Async مثل دیتاهایی که شما از API میگیرین و نمایش میدین برای موتورهای جستجو زمان بر هست و ربات های گوگل فرصت کافی برای صبر کردن و دریافت نتیجه رو ندارن زیرا در این صورت با وجود چند هزار میلیارد صفحه مختلف در سطح اینترنت هزینه های گوگل سر به فلک میکشه! و از نظر اقتصادی براش توجیه نداره.
بنابراین از نظر من حالا حالا ها منتظر رندرکردن جاوااسکریپت توسط گوگل نباشین و سعی کنید مشکل سئو وبسایت خودتون رو با پیاده سازی به روش SSR مدیریت کنید.
خیر! به هیچ وجه!
اگر شما در حال پیاده سازی یک داشبورد، پنل ادمین داخلی یا در کل پروژه هایی هستین که اصلا قرار نیست سئو بشن یا توسط گوگل دیده بشن الکی خودتون رو درگیر پیچیدگی های SSR نکنین! ری اکت کتابخونه بسیار جذابی هست و شما به سادگی میتونین پروژه های این شکلی رو بدون دغدغه های اضافی با خود React پیاده سازی کنین. در واقع سری که درد نمیکنه رو دستمال نمیبندن!
پیاده سازی SSR حتی وقتی به کمک فریمورک هایی مثل NEXT انجام بشه، پیچیدگی های خاص خودش رو داره. از مدیریت کردن ریکوئست های HTTP گرفته تا تنظیم زیرساخت مناسب و سرور و کلی موارد دیگه.
از نظر من استفاده از Server Side Rendering فقط در پروژه هایی توجیه منطقی داره که SEO اهمیت داشته باشه و لاغیر!
اگر شما با React آشنایی خوبی دارین احتمالا برای استفاده از Next مشکل خیلی زیادی نخواهید داشت. حدود 90 درصد مفاهیمی که در Next استفاده میشه شبیه ری اکت هست و نیاز به یادگیری چیز زیادی ندارید. ساختار کامپوننت ها، هوک ها، مدیریت استیت و استایل و ... به همه روشهایی که در ری اکت انجام میدادین در نکست هم قابل انجام هست. مهمترین تفاوتی که نکست نسبت به ری اکت داره در بحث ارسال درخواست های HTTP در سمت سرور هست که باید از توابع خاص Next استفاده بشه. بقیه موارد اکثرا شبیه ری اکت هست و یادگیری خاصی نیاز نداره.
تفاوت دیگه، تفاوتی هست که سیستم روتینگ نکست نسبت به React Router و ... داره ساختار File base اون هست که در داکیومنت خود نکست بصورت کامل توضیح داده شده. سعی میکنم در مقالات بعدی بصورت عمیق تر و دقیق تر این موارد رو توضیح بدم.
اما اگر فریمورک محبوب شما Vue هست و ترجیح میدین SSR رو هم با همون شکل و شمایل ویو ادامه بدین میتونین از فریمورک بسیار قدرتمند Nuxt استفاده کنین. استایل کدنویسیش کاملا شبیه به vue هست با یکسری قابلیت های اضافه تر. از نظر ساختاری و کاری که انجام میدن Next و Nuxt شباهت های بسیار زیادی دارن و هر دو قدرتمند و جذاب هستند.
این فریمورک ها به شما کمک میکنن که بدون دردسر و کار اضافی بتونین وبسایت SSR خودتون رو پیاده کنین. اگر دنبال دردسر بیشتری میگردین میتونین خودتون SSR رو پیاده سازی کنین که بعدا در یک مقاله جدا به شما راهش رو توضیح خواهم داد :)
امیدوارم این مقاله برای شما مفید بوده باشه. در مقالات بعدی سعی میکنم بصورت مفصل تر و دقیق تر به بررسی روش SSR و قابلیت های اون بپردازم.
