از Reactjs تا گوگل

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

برای یک پروژه میخواستم SEO بزنم و این پروژه با React بود .

خیلی نگران بودم که آیا بشه یا نشه .

راه های مختلفی رو دیدم که مهمترین و پر بحثترینشون SSR بود .

SSR یعنی Server Side Rendering . به این معنی که سایت از سمت سرور ارسال میشه و نه از کلاینت .

بگذریم .

شروع کردم با این موضوع کار کردن و کار کردن و کار کردن . اکثر پروژه های Git رو هم زدم . خوب ساختار سیستم من قطعا متفاوت بود . برای مثال من از LocalStorage استفاده کردم . یا از یک کامپوننت خاص برای UI .

و این پکیج هایی که من استفاده کردم متاسفانه برای SSR مناسب نبودن .

جدای از این, کار با SSR داخل React واقعا آزار دهنده و پر پیچ و خمه و زمان زیادی میبره .

برای هر کامپوننت شاید مجبور باشید تنظیمات خاصی رو وارد کنید . اصلا جالب نیست .

یک متن مشابه در ویرگول دیدم و با احترام زیاد ، گزینه سوم رو نقض میکنم :

SSR در ری اکت

با خودم گفتم نکنه باید سایت رو بترکونم . خیلی کلافه بودم و خسته .

تا اینکه به یک پست توی 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

Is SPA seo friendly?

اگر تجربه ای دارید بگید . ممنون .

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