معمارية Next.js App Router و Server Components: كيف تضاعف سرعة موقعك؟

مع إطلاق Next.js App Router و React Server Components (RSC)، تغيرت طريقة بناء تطبيقات الويب جذرياً. لم نعد بحاجة لإرسال مئات الكيلوبايتات من كود الجافاسكربت إلى متصفح المستخدم لمجرد جلب وعرض بعض البيانات.

لماذا تعتبر Server Components ثورة في الأداء؟

في نموذج React التقليدي (SPA)، كان المتصفح يُحمّل شفرة React بأكملها، ثم يُجري طلبات API، ثم يعيد بناء شجرة العناصر. مع Server Components:

• صفر بايت جافاسكربت في الكلاينت (0KB Client Bundle) للمكونات التي لا تتطلب تفاعلاً مباشراً.
• وصول مباشر وسريع لقواعد البيانات دون الحاجة لإنشاء طبقة API وسيطة لكل استعلام بسيط.
• أمان مطلق لمفاتيح وسجلات السيرفر لأن الكود يعمل حصرياً على الخادم.

كيف تفصل بين مكونات الخادم ومكونات العميل (Server vs Client)؟

// src/app/projects/page.tsx — Server Component افتراضي وجلب مباشر
import { db } from '@/lib/firebase';
import ProjectCard from '@/components/ProjectCard';

export default async function ProjectsPage() {
  // استعلام مباشر سريع على السيرفر بدون تحميل المتصفح
  const projects = await getProjectsFromDatabase();

  return (
    <div className="grid gap-6 md:grid-cols-3">
      {projects.map((p) => (
        <ProjectCard key={p.id} project={p} />
      ))}
    </div>
  );
}

القاعدة الذهبية للتوزيع المعماري

اجعل 90% من تطبيقك Server Components، واستخدم "use client" فقط في الأطراف التفاعلية (Leaf Components) مثل حقول الإدخال، الأزرار ذات التأثيرات الحركية، أو المودالز.