كيف تعمل Server Components في App Router؟

Question

Accepted Answer

**React Server Components (RSC)** تُرَنْدَر **فقط على الخادم** — لا يتم أبداً إرسال JavaScript الخاص بها إلى المتصفح. في App Router، كل component هو Server Component **بشكل افتراضي**؛ يمكنك اختيار السلوك client بشكل صريح. ## ما الذي يمكن لـ Server Component أن يفعله ```tsx // app/users/page.tsx — a Server Component (no "use client") import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ direct DB access, runs on server return (

{u.name}

); } ``` Server Components يمكن أن تكون **غير متزامنة (async)**، `await` البيانات مباشرة، والوصول إلى موارد الخادم فقط (قاعدة البيانات، نظام الملفات، الأسرار) — لأنها تعمل على الخادم. لا توجد حاجة إلى طبقة API لجلب البيانات، والأسرار لا تصل أبداً إلى العميل. ## الفائدة الكبرى: صفر JS على الـ client لهذا المكون المتصفح يستقبل **HTML/UI المُرَنْدَر**، وليس code المكون أو تبعياته. Server Component الذي يستخدم مكتبة markdown أو date ثقيلة لا يرسل **أي** من تلك المكتبة إلى المتصفح — مما يقلل حجم الـ bundle بشكل كبير. ## ما الذي لا يمكن لـ Server Components فعله ```tsx // ❌ these only work in Client Components useState, useEffect, useRef // hooks (no interactivity/state on the server) onClick, onChange // event handlers window, localStorage, document // browser-only APIs ``` لا توجد تفاعلية، state، effects، أو browser APIs — تلك الأشياء تتطلب Client Component. ## دمج server و client ```tsx // Server Component fetches data, passes it to an interactive Client Component import LikeButton from "./LikeButton"; // a "use client" component export default async function Post({ id }) { const post = await getPost(id); // server-side fetch return <>

; } ``` النمط: Server Components تتعامل مع البيانات/الهيكل؛ قم بدمج Client Components فقط حيث تكون التفاعلية مطلوبة ("islands"). ## لماذا يهم Server Components هي الميزة المحددة لـ App Router. تقلل حجم client bundle (أقل JavaScript للتحميل/التحليل)، تسمح بالوصول الآمن والمباشر إلى بيانات الخادم بدون API، وتحسن الأداء و SEO. معرفة أنها الخيار الافتراضي — وما الذي يجبر مكون ليكون Client Component — أمر أساسي لهيكلة تطبيقات App Router بكفاءة.