سلام. امیدوارم حالتون عالی باشه. من سهیل جعفری هستم و توی این مقاله، میخوایم ببینیم که چطور میشه یه وب سایتی که با react.js زدیم رو سئو کنیم.
خلاصه مفید بهتون بگم؟ نمیتونید. خداحافظ.
پایان مقاله.
ولی جدا از شوخی، نمیشه سایت ریکتی رو سئو کرد. چرا؟ ببینید شما یه سایت ریکتی رو بررسی کنید لطفا. اگه توی یه سایت ریکتی، ctrl+u بزنید یا در واقع به این آدرس مراجعه کنید:
https://example.com
میبینید که چند خط کد بیشتر نیست. مثلا اگر شما توی متن صفحهتون عبارت (( سئو در ریکت)) رو نوشته باشید، توی سورس صفحه اگه ctrl+f بزنید و این عبارت رو جستجو کنید، پیداش نمیکنید. چرا؟ چون توی ریکت، ما یه div داریم با آیدی root. ریکت از همین دیویژن استفاده میکنه تا دام مجازی رو لود کنه و محتوا رو توی صفحه به نمایش بزاره. خوب دام مجازی هم که توی سورس نمیاد. در نتیجه ما سئو نداریم.
ببینید برای داشتن سئو در صفحه، مهم نیست که کاربر، چه محتوایی توی صفحه میبینه، بلکه مهمه که ربات گوگل چی میبینه. ربات گوگل هم با این تفاسیر، اصلا متن نمیبینه توی صفحه که بخواد سئوش کنه.
جالبه که اگر شما توی صفحه سایت ریکتی، اینسپکت رو باز کنید، کل کد سایت رو همراه با متن ها اونجا زده ولی توی سورس صفحه نیست. ?
خوب، حالا راه حل چیه؟
مدرسان شریف ?
ببینید، یه سری برنامه نویس، اومدن بر مبنای همین کتاب خونه react.js، یه فریمورک طراحی کردن و اسمش رو گذاشتن next.js. این نکست جی اس، مشکل سئو در ریکت رو حل میکنه واسه شما در کنار زیبایی های ریکت.
چطوری حل میکنه؟
توی ریکت ما میخوایم یه ریکوئست بزنیم به بک اند و دیتا بگیریم چی کار میکنیم، از useEffect استفاده میکنیم. درست؟
مکانیزم کار کردنش چجوریه؟ اول کاربر url رو وارد میکنه. صفحه اولیه در حال لود، به کاربر نمایش داده میشهو در واقع، سورس صفحه ساخته میشه. حالا یوزافکت شروع به کار میکنه و درخواست میزنه. اطلاعات رو میگیره و نمایش میده. این اطلاعات دیگه نمیره توی سورس صفحه.
مکانیزم کار کردن next.js چیه؟
توی نکست جی اس، ما 4 تا مکانیزم داریم برای لود کردن دیتا.
اولیش CSR هست. کلاینت ساید رندرینگ. میشه استفاده از همین یوز افکت و SWR و اینا که توشون سئو نداریم. توی سه تای پایینی، سئو داریم.
دومیش SSG هست. استاتیک ساید جنریشن. کار کردش چجوریه؟ سایت ما مثلا یه سایت وبلاگی هست. توی سایت 20 تا مقاله داریم. وقتی میخوایم پروژه رو بیلد بگیریم و دیپلوی کنیم روی سرور، خود نکست جی اس، یه 20 تا مقاله رو با محتوای کامل میسازه. میزارتشون توی سرور. حالا هر وقت کاربری ریکوئست زد، همون صفحه رو میفرسته. در نتیجه صفحه دارای محتوا، فرستاده میشه سمت کاربر و محتوا هم توی سورس صفحه قرار میگیره.
سومین روش، ISR هست. اینکریمنتال استاتیک ریجنریشن. نحوه کارکردش چجوریه؟ بدی روش اس اس جی، چیه؟ اینه که ما اگر توی یکی از مقاله ها، یه تغییری بدیم یا مثلا مقاله 21 ام رو بنویسیم، توی سایت نمایش داده نمیشه. برای اینکه نمایش داده بشه، باید پروژه رو دوباره دیپلوی بکنیم. توی آی اس آر، این مشکل حل شده. یعنی همه خوبی های اس اس جی رو داره، علاوه بر اون، هر نیم ساعت یه بار، خودش صفحات سایت رو آپدیت میکنه با توجه به دیتابیس. یعنی شما اگه مثلا شما همه مقاله ها رو توی صفحه اصلی نمایش داده باشی و مقاله 21 رو هم بعد دیپلوی پروژه بسازی، تا قبل از نیم ساعت، توی صفحه اصلی همون 20 تا مقاله رو میبینی ولی نیم ساعت که گذشت، خود سرور صفحات سایت رو به روز رسانی میکنه و میبینه که یه چیز جدیدی اضافه شده. اونم اضافه میکنه به صفحه اصلی سایت.
این نیم ساعتی هم که گفتم رو خودتون میتونید تعیین کنید میتوندی هر یه دقیقه یه بار بزارید، میتونید هم هر 1 ماه یه بار بزارید.
روش آخر SSR هست. سرور ساید رندرینگ. عین یه سایت عادی اطلاعات رو از سرور میگیره و به کاربر نمایش میده. سئو هم دارید فقط با سرعت بیشتر و البته دارای سئو. یعنی در واقع کاربر هر وقت که ریکوئست زد، همون لحظه سرور اطلاعات رو از دیتابیس میگیره، میزاره توی صفحه و تحویل کاربر میده. هر تغییری هم توی سایت دادید، همون لحظه به صورت آنلاین میتونید ببینید.
پیشنهاد من چیه؟ بستگی به سایتتون داره. یکی هست هر لحظه ممکنه محتواهاش آپدیت بشه، خوب SSR براش خوبه. یکی هست روزی یه بار، خوب ISE براش خوبه. یکی هم هست که هر 6 ماه یه بار. خوب SSG مفیده براش.
من خودم معمولا از SSR استفاده میکنم.
البته این هم نکته مهمیه. سی اس آر چی میشه این وسط؟
ببینید شما هر جا نیاز به دیتایی دارید که سئوش مهمه، از ssg - ssr و isr استفاده کنید. هر جا مهم نیست، از csr. مثلا دیتای توی ساید بار ممکنه مهم نباشه یا مثلا بخش کامنت ها. خوب اینا رو میشه یه swr زد و لودشون کرد توی صفحه. یا مثلا یه نکته امنیتی توی سایت های نکست جی اسی، بررسی لحظه ای تغییر در کوکی authentication هست. برای بررسی لحظه ایش از یوز افکت میشه استفاده کرد که میشه جزو مباحث پیشرفته آموزش نکست جی اس.
در پایان هم اگه میخواید در مورد نکست بیشتر بدونید و رایگان کل نکست جی اس رو یاد بگیرید، پیشنهاد میکنم مراجعه کنید به سایت ما از این لینک: آموزش رایگان next.js با مرن فا .
ما توی مرن فا، کلی مطلب برای آموزش next.js ، آموزش tailwind.css و همچنین آموزش node.js داریم. کاملا ویدئویی و پروژه محور.
اگر هم میخواید داک خود نکست جی رو ببینید، میتونید از این لینک اقدام کنید. next.js docs
پایان
