امروز چالش عجیب و متفاوتی داشتم . شاید بتونم بگم نزدیک به پنجاه مقاله مختلف خوندم تا تونستم تصمیم بگیرم .
برای یک پروژه میخواستم SEO بزنم و این پروژه با React بود .
خیلی نگران بودم که آیا بشه یا نشه .
راه های مختلفی رو دیدم که مهمترین و پر بحثترینشون SSR بود .
SSR یعنی Server Side Rendering . به این معنی که سایت از سمت سرور ارسال میشه و نه از کلاینت .
بگذریم .
شروع کردم با این موضوع کار کردن و کار کردن و کار کردن . اکثر پروژه های Git رو هم زدم . خوب ساختار سیستم من قطعا متفاوت بود . برای مثال من از LocalStorage استفاده کردم . یا از یک کامپوننت خاص برای UI .
و این پکیج هایی که من استفاده کردم متاسفانه برای SSR مناسب نبودن .
جدای از این, کار با SSR داخل React واقعا آزار دهنده و پر پیچ و خمه و زمان زیادی میبره .
برای هر کامپوننت شاید مجبور باشید تنظیمات خاصی رو وارد کنید . اصلا جالب نیست .
یک متن مشابه در ویرگول دیدم و با احترام زیاد ، گزینه سوم رو نقض میکنم :
با خودم گفتم نکنه باید سایت رو بترکونم . خیلی کلافه بودم و خسته .
تا اینکه به یک پست توی StackoverFlow خوردم و جواب های جالب .
وقتی جواب ها رو خوندم شروع کردم به انجام و تحقیق موارد گفته شده .
تا اینکه فهمیدم گوگل باهوش تر از این حرفاست .
برای اینکه توی گوگل ایندکس بشید فقط کافیه چند کار ساده انجام بدید . باقی داستان با puppeteer.
puppeteer یک برنامه جدید گوگل هست که با Nodejs نوشته شده . کارش Crawl کردن سایت های SPA هست .
سایت های SPA اختصار Single Page Application یا همین سایت هایی که با React میزنیمه .
فقط چند نکته مهم رو انجام بدید . دیگه نیاز به انجام کاری نیست :
1- حتما برای Routing از React router DOM استفاده کنید که یک کامپوننت زیر نظر گروه ReactTraining هست .
2- حتما از React Helmet استفاده کنید . این کامپوننت تمام تایتل ها و هدینگ های سایت رو تغییر میده .
3- خیلی مهمهههههههههههههههههههههههههههههههههههههههههه - حتما داخل App.js پروژه ، babel-polyfill رو نصب و ایمپورت کنید .
تحقیقات من رو بخونید . خالی از لطف نیست :
SPA & SEO
اگر تجربه ای دارید بگید . ممنون .
در آخر اگر مطلبم مفید بود یک فنجون قهوه مهمونم کن . حرف زیاد داریم بزنیم .
