Next.js 15 App Router: أفضل الممارسات لأداء استثنائي
App Router في Next.js 15 يغيّر طريقة التفكير في الصفحات: Server Components بشكل افتراضي، وتقسيم واضح بين منطق السيرفر والعميل.
جافاسكريبت إضافي يُرسل للمتصفح من Server Component لا يحتاج تفاعل
دالة واحدة (generateMetadata) تغطي كل احتياجات SEO الديناميكي
أفضل توازن بين صفحة ثابتة وصفحة ديناميكية كاملة
القاعدة الأهم في App Router هي أن كل مكوّن هو Server Component بشكل افتراضي إلا إذا حددت "use client" — هذا يعني تنفيذ منطق أكثر على السيرفر، وتقليل حجم الجافاسكريبت المرسل للمتصفح.
استخدام generateMetadata بدل Head اليدوي
دالة generateMetadata غير المتزامنة تتيح بناء عنوان ووصف وبيانات Open Graph ديناميكية حسب البيانات الفعلية للصفحة (مثل locale أو slug)، وهذا أنظف وأقوى لـ SEO من وضع علامات Head يدويًا.
التخزين المؤقت والتحديث
export const revalidate يحدد كل كم ثانية يُعاد بناء الصفحة في الخلفية (ISR)، وهو خيار وسط مثالي بين صفحة ثابتة بالكامل وصفحة ديناميكية في كل طلب — مفيد جدًا لمحتوى يتغير دوريًا مثل مدونة.
أسئلة وأجوبة
01متى أحتاج "use client"؟
فقط عندما يحتاج المكوّن تفاعلًا في المتصفح: حالة (state)، تأثيرات (effects)، أو معالجات أحداث مثل onClick.
02هل App Router يغني عن Pages Router بالكامل؟
في المشاريع الجديدة نعم، يُنصح بـ App Router دائمًا؛ Pages Router لا زال مدعومًا لكنه لا يحصل على الميزات الجديدة بنفس الأولوية.
هل تحتاج تطبيق هذه الأفكار في مشروعك؟
أقدم استشارات مجانية لمناقشة وضعك التقني الحالي وكيفية تحسينه.