خادم داخل عميل

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 21 من 47.

إليك القاعدة التي يخطئ فيها الجميع تقريبًا، وهي القاعدة التي تحدد إلى أي مدى يمكنك الضغط على الـ server.

لا يمكن لمكون client أن يقوم بعمل import لمكون server: لأن عمل import له يسحبه عبر الحدود ويجعله كود client أيضاً. لذلك يستنتج البعض أن أي شيء داخل غلاف تفاعلي يجب أن يكون كود client. هذا الاستنتاج خاطئ.

يمكن لمكوّن العميل (client component) أن يعرض محتوى الخادم (server) الممرر إليه كـ children.

الفرق هو من يقوم بالتقديم (rendering). عندما تكتب صفحة خادم (server) هذا:

<Panel>
    <Details />
</Panel>

…يقوم الـ server برندر <Details /> وتسليم النتيجة النهائية إلى Panel كـ prop. لا يقوم Panel باستيراده ولا بتشغيله أبداً: بل يحدد فقط مكان وضعه. وبالنسبة لمكون الـ client، فإن children يُعتبر قطعة جاهزة بالفعل من واجهة المستخدم.

هذا ما يسمح لغلاف تفاعلي صغير (شريط علامات تبويب، أو نافذة منبثقة modal، أو لوحة قابلة للطي) بتغليف كميات كبيرة من المحتوى الخاص بالخادم فقط دون سحب أي منه إلى المتصفح. يبقي الجزء التفاعلي ضئيلاً للغاية؛ بينما يظل المحتوى على الخادم.

الشكل الذي يجب تذكره: أغلفة client، وحشوات server.

التحدي

متوسط

مكوّن components/Panel.jsx هو مكون عميل (مغلق، اقرأه فقط): يقوم بعرض زر تبديل ويظهر الـ children الخاصة به فقط عندما يكون مفتوحًا.

في الوقت الحالي، تعرض الصفحة التفاصيل بجانب المكوّن panel بدلاً من داخله، وبالتالي فإن زر التبديل لا يتحكم في أي شيء.

في app/page.jsx، قم بنقل <p id="details"> ليقع بين وسمَي <Panel> كـ children له.
حافظ على النص كما هو تمامًا، واترك app/page.jsx كمكوّن خادم: بدون أي توجيه (directive).

لا يزال يتم تظهير (render) الفقرة على الخادم. مكوّن العميل panel يحدد فقط ما إذا كان سيتم عرضها أم لا.

جرّب بنفسك

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}