این داستان: جونیور باید یک سایت با قابلیت سئو شدن طراحی کند!

روزی آقای شهرام که نویسندگی میکرد به جونیور سفارش داد تا یک بلاگ برایش طراحی کند. آقای شهرام میخواست نوشته هایش توسط بازدیدکنندگان این سایت مشاهده شود. او قصد داشت سایتی داشته باشد که مخاطبان بیشتری را جلب کند. بنابراین باید بلاگ او قابلیت سئو شدن داشته باشد.

جونیور میدانست که اگر به او پروژه ای پیشنهاد شود که بلاگ یا فروشگاه باشد نیازمند رندرینگ سمت سرور است تا قابلیت سئو شدن داشته باشد. اما اگر پرتال سازمانی به او پیشنهاد میشد او هرگز به رندرینگ سمت سرور فکر نمیکرد و کافی بود با همان رندرینگ سمت کاربر کار کند. زیرا نیازی به سئو نبود.

جونیور قبل از اینکه لپتاپ خود را باز کند و شروع به کدنویسی کند سراغ دفتر یادداشت خود رفت. در آن نوشت:

برای طراحی یک سایت با قابلیت سئو شدن باید رندرینگ سمت سرور انجام شود. دیگر نمیتوان به React.js دل خوش کرد. باید Next.js کار کنم.

او اصطلاحات را به انگلیسی هم نوشت:

Server Side Rendering = SSR

Client Side Rendering = CSR

تشخیص سرور ساید رندرینگ از کلاینت ساید رندرینگ بصورت اجرا در بروزر

روش تشخیص: (اجرا در بروزر)

وقتی در بروزر هستید و سایتی امده و میخواهید بدانید رندرینگ سمت سرور دارد یا رندرینگ سمت کاربر کافیست به ترتیب زیر عمل کنید:

گام اول: در بروزر با موس کلیک راست کنید سپس گزینه inspect element را بزنید! پنجره ای باز میشود که تمام کدهای داخل بروزر به html نوشته شده است.

گام دوم: در بروزر Ctrl + U بزنید تا source view را مشاهده نمایید.

گام سوم: اگر کدهای html که در source view مشاهده میکنید دقیقا همان کدهای html باشد که در گام اول در inspect element دیدید انگاه SSR است در غیر اینصورت CSR است.

نکته: وقتی با Create React App کار میکنید، ری اکت را بصورت CSR رندر میکند.اگر میخواهید رندر بصورت SSR باشد از NextJS یا Razzle استفاده کنید.

مزیت های SSR: چرا باید سرور ساید رندرینگ انجام دهیم؟

دلیل اول: سئو

وقتی HTML ها همگی نباشند بنابراین زمانی که ربات های گوگل که در سایت ها گشت میزنند برای سئو کردن سایت شما به صفحه ای از سایت شما بیایند html های ان صفحه را بصورت کامل نمیبیند. اما وقتی SSR کنید و همه تگ های html باشند انگاه انها همگی سئو میشوند.

دلیل دوم: سرعت بارگیری صفحه در اولین بار

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

دلیل سوم: قابلیت اجرا در بروزر های قدیمی

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

کاربرد های رندر سمت سرور و رندر سمت کاربر

معایب SSR: چرا در بعضی پروژه ها باید از CSR استفاده کنیم؟

دلیل اول: سخت بودن پیاده سازی SSR نسبت به CSR

کدنویسی React راحت تر از Next.js است. بخاطر همین اگر نیاز نیست سایت سئو بشه پس بیخیال SSR بشیم!

دلیل دوم: کند بودن بارگیری صفحه هر بار

وقتی SSR باشد هربار که وارد صفحه جدیدی در بروزر میشوید باید درخواست جدیدی ارسال شود. بنابراین باید صبر کنید تا تمام اطلاعات بیاید سپس صفحه بارگیری میشود. اما در سایت های CSR بخشی از صفحه که اطلاعات نمیخواهد و جزیی از لی اوت صفحه است همان لحظه ظاهر میشود.

منابع و رفرنس های این مقاله:

منبع اول: مقاله نیما عارفی در ویرگول

منبع دوم: دوره اموزشی لیندا (Next.js Node.js) React Server Side Rendering

منبع سوم: دوره آموزشی لیندا (reactDomServer) Learning Full-Stack JavaScript Development: MongoDB, Node and React

منبع چهارم: همراه با اضافات و نوشته های شروین