یه برنامه نویس معمولی لینوکس کار
از Reactjs تا گوگل
امروز چالش عجیب و متفاوتی داشتم . شاید بتونم بگم نزدیک به پنجاه مقاله مختلف خوندم تا تونستم تصمیم بگیرم .
برای یک پروژه میخواستم 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
اگر تجربه ای دارید بگید . ممنون .
در آخر اگر مطلبم مفید بود یک فنجون قهوه مهمونم کن . حرف زیاد داریم بزنیم .
ما الآن شدیدا درگیر این موضوع بودیم! ممنون از اشتراک گذاری تون
تازه این ایندکسی که گفتی برای خود گوگل هم هنوز پرفکت نیست وگرنه مطمئن باش این همه وقت و هزینه نمیذاشتن برای توسعه Next.js (یا Nuxt.js برای Vue)
تو reactjs از مورد 1 و 2 استفاده میکردم ولی تو تلگرام متا تگ هارو نشون نمیداد
یه موردی هم که زیاد پیشنهاد داده بودن استفاده از redux برای SSR کردن بود که نتونستم ربطی بینشون پیدا کنم
حق با شماست کاوه جان، روی متاتگ ها فقط کمی مشکل هست، SSG رو کار نکردم، حتما میرم ببینم چیه، مشکل اصلی من سینک کردن پروژه با ترکیب جدید بود،
"useBuiltIns": "usage",
اگر استفادش کنی دیگه نیازی به ایمپورت کردن babel-polyfill نیست.
من مطالعه کردم و خیلی کامل و جامع بود . دستت درد نکنه.
مشکل عمده من اینه که نمیتونم Material-ui رو با این مورد سینک کنم .
یعنی پکیج های Helmet , react router , material-ui ,
بدون متریال یو آی مشکلی ندارم . کار به خوبی انجام میشه . اما با داکیومنت خودش هم که میرم جلو ، باز هم خروجی بدی بهم میده . اما مجدد امروز سعی میکنم که درستش کنم و مطلبی در این مورد بزارم . از تلفیق کدهاش ما و داکیومنت متریال . ممنون .
شما سعی‌ات رو بکن. اگر مشکلی داشتی ویا کمی زمانت داره اذیتت میکنه، بگو که یه ریپو روی گیت‌لب برات می‌سازم و کانفیگ خودم رو برات می‌فرستم. فقط الآن نمیشه. چون سرکارم و شدید درگیرم. برای هماهنگی بیشتر بیا تلگرامم.
فعلا دوست من.
http://vrgl.ir/dIBWn
انجام وظیفه است .
ممنون بابت مطلب مفیدتون. فقط یک سوال. چرا باید از bable/polyfill استفاده کنیم؟
میشه کمی توضیح بدید؟ ممنون
This will emulate a full ES2015+ environment (no < Stage 4 proposals) and is intended to be used in an application rather than a library/tool. (this polyfill is automatically loaded when using babel-node)
خیلی به زبان ساده بگم ، به علت وجود es7 و امکاناتی که در ورژن های قبلی دیده نمیشه و ممکنه ارور بده ، از پولیفیل استفاده میکنیم تا بتونیم امکانات و محیط مفسر رو یکپارچه کنیم .
صرفا لینک StackoverFlow میذاشتین یا ادیت کنین ممنون میشم !
برای سئو و سرعت ممنون میشم در مورد استفاده یا عدم استفاده از material ui - bootstrapو ... توضیح بدین