اجرای ری‌اکت سمت سرور (React SSR)

یعنی اجرای برنامه react سمت سرور و‌ انتقال ریسپانز به شکل HTML سمت کاربر به طوری که react بدون نیاز به render دوباره از حالت فعلی (رندر شده سمت سرور) DOM بتونه استفاده کنه

چرا Server Side Rendering ؟

مزیت ها

۱.به شما HTML میده، این باعث میشه داخل مرورگر های قدیمی هم برنامه react شما کار کنه.

۲. سرعت: وقتی تمام پردازش سمت سرور انجام بشه مرورگر فقط اطلاعات رو نمایش میده و تو دستگاه های ضعیف تر روون تر اجرا میشه

۳. سئو: وقتی HTML خام دارید کار خاصی انجام نمیشه و خرنده گوگل، بینگ و‌ ... میاد html رو می‌خونه و عملیات انجام میشه

گوگل بعضی وقت ها رندر میکنه بعضی وقت ها نمیکه. نمی دونم چرا، و مابقی search engine ها کلا js رو اجرا نمی‌کنن

معایب

۱. پیاده سازی سخت

۲. کند شدن زمان ریسپانس (یکبار اجرا میشه سمت سرور ...)

ما ssr می‌خواهیم یا نه!

اگر سئو نیاز دارید، ۱۰۰‎٪ بله

برای اینکه دقیق تر متوجه بشید می تونید یک برنامه ری‌‌اکت ساده رو‌ اجرا کنید.

به آدرس و‌ پورت مورد نظر رفته و View Page Source کنید.

اگر متوجه شده باشید محتوای div که برنامه شما داخلش اجرا میشه خالیه

<div id=“root”></div>

این همون چیزیه که گوگل، بینگ و ... می بینند

ولی اگر Inspect Element کنید می‌بینید که داخل همون div کلی تگ html, css, ... وجود داره و این چیزیه که گوگل و ... نیاز دارن

شما وقتی SSR میکنید مقدار رندر شده سایت (همون چیزی که تو inspect element می بینید رو) به عنوان مقدار ریسپانس سرور (view page source) به کلاینت پاس میدی

نمونه پیاده سازی شده با ریداکس رو می‌تونید داخل این وبسایت ببینید

antivirus.ir

خب از کجا شروع کنم

همه ما با Create React App آشنا هستیم، خیلی ساده و شیک و مجلسی محیط ری‌اکت رو برای برنامه نویسی آماده می کنه اما بدون SSR.
از معادل های Create React App با SSR میشه به NextJS و Razzle اشاره کرد.

سخن آخر
سعی کنید از یک VPS یا یک Dedicated Server استفاده کنید و از یک SysAdmin مشاوره بگیرید زیرا کانفیگ کردن سرور برای کار با nodeJs یکم درد سر داره ... .