از React تا گوگل - قسمت دوم

امروز با قسمت دوم این تحقیق اومدم،

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

قسمت اول رو از اینجا بخونید : سئو کردن ری اکت در گوگل

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

Prerender react

یعنی قبل از اینکه build گرفته بشه، با استفاده از یک ابزار chromeles ، کار رندر رو انجام بدیم و بریم بالا.

چه اپلیکیشنی بهتر puppetteer؟

رفتم به لینک آموزش و مراحل رو خوندم و با کامپوننت react-snap ، مشکل رو حل کردم،

React-snap

اول از همه ری اکت اسنپ رو نصب میکنیم ، دقت کنید که vpn بزنید ، چون puppetteer از سرور گوگل نصب میشه و تحریمیم.

دوم اینکه روی سیستم باید unsafe نصب بشه، اگر به خطا خوردید، مثل من با فلگ unsafe نصب کنید.

مورد سوم هم اینکه باید ورژن node و npm آخرین ورژن باشه، پس حتما آپدیت کنید.

حالا نصب :

npm install --unsafe-perm --save-dev react-snap

حالا داخل پکیج این دستور رو داخل scripts اضافه کنید:

"postbuild": "react-snap"

یعنی چنین چیزی داریم :

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postbuild": "react-snap"
}

کار تمومه، حالا دستور build:

npm run build

دقت کنید که sudo نباشید و حتما دسترسی پوشه build باز باشه.

حالا اگر serve رو ندارید نصب کنید، اگر هم دارید، کد زیر رو اجرا کنید

serve -s build/

و روی پورت 5000 سایتتون رو باز کنید، الان اگر به سورس سایت روی کروم یا موزیلا برید، بدون ایراد میتونید تمام متاتگ ها و تمام تگها رو ببینید،

من با کامپوننت های زیر کار رو انجام دادم و مشکلی نبود:

material-ui

Axios

React-helmet

Babel-polyfill

Animated-css

...

به خوبی کار کردو بدون ایراد اجرا شد.

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