الحفاظ على أجزاء العميل صغيرة

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

عندما تتطلب الصفحة زرًا تفاعليًا واحدًا، يكون هناك طريق مختصر مغرٍ: إضافة 'use client' في أعلى الصفحة والمتابعة. هذا يعمل بالفعل. ولكنها أيضًا الطريقة الأكثر شيوعًا للتخلي عن كل ما منحك إياه Next.js للتو.

تذكر القاعدة 2: التوجيه يُحدد الملف بأكمله. تحديد الصفحة والعنوان والوصف وقائمة الأطباق وكل مكون يقومون بتقديمه يتحول جميعها إلى كود عميل (client)، يتم تنزيله وإعادة تشغيله في المتصفح. زر واحد سحب الصفحة بأكملها عبر الحدود.

العادة التي تعالج هذه المشكلة صغيرة وآلية:

قم بدفع Directive 'use client' إلى المكونات الأوراق (leaves).

اسحب الجزء التفاعلي إلى ملفه الصغير الخاص، وقم بوضع العلامة على ذلك الملف، وادع الصفحة تبقى على الـ server:

// app/page.jsx - لا يزال مكون خادم
import LikeButton from '../components/LikeButton';

export default function Home() {
    return (
        <main>
            <h1>Coddy Eats</h1>
            <LikeButton />
        </main>
    );
}

أمران يجب ملاحظتهما. أولاً، **يمكن** لمكون الـ server أن يعرض مكون client: هذا الاتجاه طبيعي تماماً. ثانياً، الصفحات لم يتغير شكلها؛ قطعة صغيرة واحدة فقط هي التي انتقلت.

هناك خطأ ثاني يدفعك نحو نفس العادة. ضع onClick مباشرة على button في server component وسيقوم بيئة التشغيل بإيقافك: Event handlers cannot be passed to Client Component props. المعالج (handler) هو function: ولا يمكنه البقاء خلال رحلته إلى المتصفح ما لم يكن موجوداً في ملف client.

التحدي

سهل

تضع هذه الصفحة حدث onClick على زر داخل component من نوع server، لذلك لن يتم عرض التطبيق على الإطلاق.

قم بإصلاح ذلك دون تعليم الصفحة كـ client component:

في components/LikeButton.jsx، اكتب client component (أضف 'use client' في السطر الأول) يحتوي على عدد الإعجابات في الحالة (state) ويعرض زرًا بـ id="like". يجب أن يكون النص الخاص به Likes: متبوعًا بالعدد.
في app/page.jsx، احذف الزر المعطل وقم بعمل render لـ <LikeButton /> بدلاً منه. قم باستيراده من '../components/LikeButton'.
اترك العنوان والـ tagline كما هما تمامًا: يجب أن تظل الصفحة server component.

جرّب بنفسك

import './globals.css';

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

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