الافتراضي = مكوّن خادم
في App Router كل المكوّنات مكوّنات خادم افتراضيًا — تعمل على الخادم فقط.
// مكوّن خادم — يمكنه أن يكون async ويجلب البيانات مباشرة
export default async function Page() {
const res = await fetch("https://api.example.com/posts");
const posts = await res.json();
return (
<ul>
{posts.map((p) => <li key={p.id}>{p.title}</li>)}
</ul>
);
}
المزايا
- جلب البيانات مباشرة بلا useEffect أو حالة تحميل.
- أمان: الأسرار ومفاتيح API تبقى على الخادم.
- حِزمة أخفّ: كودها لا يُرسَل للمتصفّح → تحميل أسرع.
- SEO ممتاز: المحتوى جاهز في HTML.
القيود
لا يمكنها استخدام:
- خطّافات الحالة (
useState،useEffect). - أحداث المتصفّح (
onClick) أو واجهات المتصفّح (window).
لهذه الحالات نستخدم مكوّنات العميل (الدرس التالي).
🎯 التالي: مكوّنات العميل.