یه برنامه نویس معمولی لینوکس کار

۱ سال پیش / خواندن ۲ دقیقه

از 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 &amp;amp;amp;amp;amp;amp; SEO

Is SPA seo friendly?

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

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

شاید از این نوشته‌ها هم خوشتان بیاید

مطلبی دیگر از این انتشارات

استفاده از context api یا Redux (به دور از تعصب)

نیما حبیب خدا خواندن ۷ دقیقه

مطلبی دیگر از این انتشارات

از ReactJS تا GatsbyJS ـ تجربیات من از دنیای ReactJS

حسام کاوه خواندن ۵ دقیقه

مطلبی دیگر از این انتشارات

چگونه یک برنامه نویس React Native بشیم

reactapp.ir خواندن ۸ دقیقه

پاسخ‌ها

خیلی ممنون
ما الآن شدیدا درگیر این موضوع بودیم! ممنون از اشتراک گذاری تون

مخلص همیشگی

فقط که بحث گوگل نیست، مثلا شما نمیخوای وقتی url سایتت رو توی تلگرام میذارن، تایتل صفحت زیرش بیوفته؟
تازه این ایندکسی که گفتی برای خود گوگل هم هنوز پرفکت نیست وگرنه مطمئن باش این همه وقت و هزینه نمیذاشتن برای توسعه Next.js (یا Nuxt.js برای Vue)

با هلمت میشه - من امتحان کردم .

منم خیلی درگیر این قضیه بودم و در نهایت به این نتیجه رسیدم که از nextjs استفاده کنم. اونجا قضیه تا حدی بهتر بود ولی عالی نبود( تو داده هایی که با axios میگرفتم). که رفتم سمت SSG و اتفاقا مناسب بود برا پروژه ای که داشتم
تو reactjs از مورد 1 و 2 استفاده میکردم ولی تو تلگرام متا تگ هارو نشون نمیداد

یه موردی هم که زیاد پیشنهاد داده بودن استفاده از redux برای SSR کردن بود که نتونستم ربطی بینشون پیدا کنم

برای ذخیره سازی داده هایی که روی localstorage میریزیم، زمانی که ssr میکنی به مشکل و خطا میخوری، چون که همه چیز سمت سرور هندل میشه و سمت سرر localstorage نداری، به همین دلیل باید دیتا رو توی state ذخیره کنی، درواقع میشه دیتابیست.استفاده از مونگو خیلی مشکل ساز میشه، به همین دلیل یا یک state management بساز ، یا از ریداکس و پکیج های مناسب استفاده کن ،
حق با شماست کاوه جان، روی متاتگ ها فقط کمی مشکل هست، SSG رو کار نکردم، حتما میرم ببینم چیه، مشکل اصلی من سینک کردن پروژه با ترکیب جدید بود،

اگر تنظیمات babel-env رو بخونی یک آپشنی هست به این اسم و این مقدار:
"useBuiltIns": "usage",
اگر استفادش کنی دیگه نیازی به ایمپورت کردن babel-polyfill نیست.

تفاوتی نداره، باید babel-env رو در حالت dev نصب کنی، چیزی که میگید زمانی تاثیر داره که eject کرده باشیم پروژه رو و اونجا تنظیماتی که گفتی رو انجام بدیم، در غیر این صورت باید نصب بشه

سلام دوست من. راستش من کاملا حرفت رو در مورد اینکه SSR اذیت کننه هستش قبول دارم ولی دوست من، زمانی که شما محیط دولوپ و پروداکشن رو مثل هم بچینی و طعم اتفاقات پروداکشن رو توی دولوپ شبیه سازی کنی اصلا SSR اذیت کننه نیست. اون گوشه داره کاره خودشو می‌کنه. من در این مورد مقاله‌ای دارم که کمی طولانی هست:‌ http://vrgl.ir/aaBXp ولی مطمئن هستم دردسرهای شما رو حتما کمتر خواهد کرد. نسخه مدیوم هم داره: https://goo.gl/zAFuu9 اگر در مورد اضافه کردن ریداکس مشکلی داشتید می‌تونید به آدرس https://gitlab.com/amerllica/redux مراجعه کنید که در واقع ریداکس رو روی همین مقاله پیاده سازی کردم ولی خب وقت نکردم که مقاله‌ء دومی بنویسم. من درحال همکاری با یک پروژه کانادایی هستم،‌خیلی برام جالبه که اون‌ها هم خیلی نگاه جالبی به SSR ندارن و پروژه رو بدون این نوشتن. زیاد به مقاله‌ها و نظرات اون‌ها اکتفا نکنید،‌ دلایل بسیاری هست که استفاده از SSR کار درسته‌ایه. اگر مقاله من از حوصله شما خارج بود، یک راست از ریپو استفاده کنید. امیدوارم تونسته باشم کمک کنم.

ممنون دوست من .
من مطالعه کردم و خیلی کامل و جامع بود . دستت درد نکنه.
مشکل عمده من اینه که نمیتونم Material-ui رو با این مورد سینک کنم .
یعنی پکیج های Helmet , react router , material-ui ,
بدون متریال یو آی مشکلی ندارم . کار به خوبی انجام میشه . اما با داکیومنت خودش هم که میرم جلو ، باز هم خروجی بدی بهم میده . اما مجدد امروز سعی میکنم که درستش کنم و مطلبی در این مورد بزارم . از تلفیق کدهاش ما و داکیومنت متریال . ممنون .

خواهش می‌کنم. اتفاقا پیاده سازی‌ای که من کردم بسیار به داک متریال نزدیکه. من ۳ تا پروژه باهاش پیاده کردم. دوتاش RTL بود و یکیش هم چون خارجی بود تنظیمات RTL رو از توش برداشتم. فقط فرق کوچیکی که داره باید PostCSS رو از داخلش برداری، چون خودش داره CSS-in-JS استفاده می‌کنه دیگه نیازی بهش نیست. هرچند کلا من دیگه دارم اعتقادم رو به CSS از دست می‌دم. چرا وقتی میشه توی هر کامپوننت CSS مربوط رو با اینتراکشن بسازم توی یک فایل جدا بسازمش که ساختار کل پروژه رو پیچیده کنم. خلاصه که خیلی راحته و اصلا نگاه پیچیده بهش نکن. ساده‌اس.

شما سعی‌ات رو بکن. اگر مشکلی داشتی ویا کمی زمانت داره اذیتت می‌کنه، بگو که یه ریپو روی گیت‌لب برات می‌سازم و کانفیگ خودم رو برات می‌فرستم. فقط الآن نمیشه. چون سرکارم و شدید درگیرم. برای هماهنگی بیشتر بیا تلگرامم.

فعلا دوست من.

با کمکت تونستم انجامش بدم . ممنون :
http://vrgl.ir/dIBWn

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

ارادت رفیق . مرسی ازت که پیگیر بودی.
انجام وظیفه است .

من این سایت http://lenzook.com رو با nextjs پیاده کردم حتی متاتگ ها رو هم از سمت سرور میگیرم و این عالیه- از نظر سئو هم همه مواردش رو چک کردم و تمام اسکیمای مورد نظرم رو میتونم بدست بیارم. میشه بدون nextjs هم ssr رو هندل کرد ولی جدایی از پیچیدگی هاش به خوبی و تکمیلی که nextjs میده مخصوصا تو بحث router ها نمیشه. درکل استفاده از nextjs تو یه پروژه تکمیل شده تجربه خوبی به من داد در مورد ssr

ایرادش اینه که سینتکس تغییر میکنه و اون لذت react نوشتن رو میگیره . من razzle رو پیشنهاد میدم

سلام.
ممنون بابت مطلب مفیدتون. فقط یک سوال. چرا باید از 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 و امکاناتی که در ورژن های قبلی دیده نمیشه و ممکنه ارور بده ، از پولیفیل استفاده میکنیم تا بتونیم امکانات و محیط مفسر رو یکپارچه کنیم .

سلام ، ممنون کوتاه و فوق العاده کاربردی.

ممنون که زمان گذاشتید