تكرار السؤال: …
الإجابة المختصرة
في تطبيقات CSR نستخدم مكتبات تعديل الـ Head أو نوفر Pre-rendering، وفي SSR و Next.js نستخدم الـ Metadata API لتوليد وسوم title و meta و og ديناميكياً على السيرفر قبل إرسال الصفحة.
الشرح
لا تقوم كافة عناكب محركات البحث ومنصات التواصل الاجتماعي (مثل Facebook و Twitter) بتنفيذ أكواد الـ JavaScript لقراءة الوسوم الديناميكية المنشأة في المتصفح. لذلك يعد توليد وسوم Open Graph و Canonical URLs في مرحلة الـ SSR بالخادم أمراً جوهرياً لظهور الروابط بشكل سليم وغني.
مثال بالكود
// مثال تعريف Metadata في Server Component
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const article = await getArticle(params.id);
return {
title: article.title,
description: article.summary,
openGraph: {
images: [article.coverImage],
},
};
}أخطاء شائعة
- الاعتماد على تعديل document.title في useEffect لصفحات تتطلب أرشفة قوية في محركات البحث.
أسئلة متابعة
- ما الفرق بين CSR و SSR و SSG و ISR في منظومة تطبيقات ريأكت الحديثة؟
- ما هي مكونات خادم ريأكت (React Server Components - RSC) وكيف تختلف جوهرياً عن SSR؟