اذهب إلى المحتوى
  • 0

أريد توضيح مفصل حول مكونات الخادم والعميل في الإصدار 13 من Next.js

Abdelrahman Mostafa10

السؤال

بعد التحديثات الأخيرة في الإصدار 13 من Next.js في قرأت في الوثائق الرسمية أنه لا يمكنني استيراد مكونات خادم داخل مكونات العميل، لكن من الواضح من الكود الذي لدي أنه يمكنني ذلك، الأمر مربك وبحاجة إلى توضيح إن أمكن؟

لدي مكون خادم  server component اسمه InitView:

const InitView = () => {
    useEffect(() => { });
    return (
        <>
            <Hero/>
            <span className="text-xl font-normal text-gray-100">Now, how do you want to play?</span>
            <GameModeMenu/>
        </>
    );
}

export default InitView;

لدي أيضًا مكون خادم آخر اسمه View:

interface ViewProps {
  children?: React.ReactNode;
}

const View = ({ children }: ViewProps) => {
  return (
    <main className="home w-screen h-screen flex flex-col gap-10 justify-start items-center bg-neutral-900 px-8 py-10">
      {children}
    </main>
  );
};

export default View;

وتلك هي صفحة page.tsx:

export default function Page() {
  return (
    <View>
        <InitView/>
    </View>
  )
}

حاولت استيراد InitView داخل مكون View باستخدام طريقة تمرير العنصر الابن pass-child، لكنني تلقيت الخطأ التالي:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

بالطبع أمانع ذلك الخطأ لأنني أحاول استخدام التأثير داخل مكون خادم، لكن المشكلة هي أنه إذا غيرت الكود إلى التالي:

Page.tsx:

export default function Page() {
  return (
    <View />
  );
}

View.tsx:

"use client";

const View = () => {
  return (
    <main className="home w-screen h-screen flex flex-col gap-10 justify-start items-center bg-neutral-900 px-8 py-10">
      <InitView />
    </main>
  );
};

export default View;

يختفي الخطأ الآن مع ملاحظة أنني استخدمت use client، وللتوضيح:

يمكنني استخدام تأثيرًا داخل مكون InitView بدون  use client لأنني استوردته مباشرة في المكون View (المُشار إليه كعميل).

أفترض أن أي مكون يتم استيراده مباشرة (خادم أو عميل) داخل مكونات العميل سيصبح مكونات عميل، كما يقول الخطأ السابق "لا يُشار إلى أي من آبائه بـ "use client"، لذلك فهي مكونات خادم بشكل افتراضي."

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

المشكلة التي تواجهك لاتتعلق بتضمين ال components داخل بعضها البعض، بل المشكلة هي عدم التمييز الكامل بين ال server component و ال client component.

ال server component هو كل عنصر (بشكل افتراضي) لايحوي على 'use client' في البداية، وهو العنصر المسؤول عن جلب البيانات أو العنصر الذي يفضل تحميله على ال server عوضا عن ال client، مما يعني أنه لايمكن لهذا العنصر أن يملك أي تفاعل بين المستخدم والمتصفح.

ال client component هو العنصر الذي يحوي تفاعل بين المستخدم والمتصفح، مثل الاحداث والنقرات وما الى ذلك، والأهم أن جميع ال hooks مثل ال useState, useRef, useMemo, useEffect لايمكن استخدامها الا في ال client component، وهذا هو سبب الخطأ في عنصر InitView.

الحل هو عند استخدام ال useEffect، عليك أن تحول العنصر من server component الى client component وكتابة 'use client' في البداية لأن هذه الدالة هي hook، وهذه هي القوانين الجديدة في Next Js 13 ومابعد.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...