react js وتحسين محركات البحث Seo

وعليكم السلام ورحمة الله وبركاته.

المشكلة أن مكتبة React تعتمد على تصيير الصفحة من جهة العميل. وهذا يعني أن المتصفح  يستلم في البداية ملف HTML شبه فارغ، ثم يقوم بتحميل وتشغيل الجافاسكريبت لبناء محتوى الصفحة. وهذا ما يجعل react أو ال SPA سيئة ك SEO .
وكما تعلم أنه لحل هذه المشكلة تحتاج لتصيير الصفحات من جهة الخادم (Server-Side Rendering - SSR) وذلك ما يوفره لك إطار عمل Next.js بسهولة .
وبالرغم من وجود وسائل لذلك مثل استخدام react-snap حيث تقوم بتوليد ملفات HTML ثابتة وقت البناء (Build). وهو حل جيد ولكنه غير قابل للتوسع بسهولة (Non-scalable) .

أو react-helmet والذي هو ممتاز لتغيير عنوان الصفحة والوصف للمستخدم أثناء تصفحه للتطبيق، لكنه لن يفيد كثيراً مع عناكب محركات البحث إذا لم يتم تصيير (Render) هذه الوسوم على الخادم . عناكب البحث تقرأ الـ HTML الأصلي قبل تنفيذ الجافاسكريبت غالباً.

ويمكنك أيضاً استخدام أطر عمل أخرى إذا كان Next.js  معقداً بالنسبة لك مثل Remix وهو إطار عمل مبني على React يدعم الـ SSR ويعتبرأخف وزناً وأبسط من Next

ولكن في النهاية إذا كان الـ SEO مهماً جداً لمشروعك، لا تضيع وقتك في محاولة تحسين React ، وانتقل فوراً إلى Next.js، أو Remix، أو Astro.

وعليكم السلام ورحمة الله،

React وحده فعلا يعاني مع SEO لأن المحتوى يرسم على المتصفح (CSR)، فعندما يأتي بوت Google يرى صفحة فارغة تقريبا والحلول الموجودة داخل React البحت مثل react-helmet لإدارة ال meta tags أو استخدام prerendering tools مثل react-snap أو خدمات مثل Prerender.io تعالج الموضوع جزئيا لكنها ليست مثالية وتضيف تعقيدا  والحقيقة أن Next.js ليس بديلا عن React بل هو React نفسه لكن مع SSR/SSG مدمج، وهو الخيار الأمثل لأي مشروع يحتاج SEO قوي  فالقاعدة العملية تقول أنه إذا كان المشروع يضم صفحات عامة تحتاج ترتيبا في محركات البحث كالمدونات والمتاجر ف Next.js من البداية يوفر عليك وقتا وجهدا كبيرا أما إذا كان المشروع تطبيقا داخليا خلف login (dashboard، admin panel) ف React وحده يكفي تماما لأن SEO لا يعنيك هناك.