Next.js / الأساسي: المسارات وحدود التنفيذ / الدرس 3

حدود الخادم والعميل والخصائص القابلة للتسلسل

اجعل التفاعل صغيراً ومرر البيانات المعتمدة فقط عبر حد React بين الخادم والعميل.

وقت القراءة التقريبي: 4 دقيقةتاريخ مراجعة المحتوى 2026-10-28

في هذه الصفحة

أهداف الدرس

اشرح use client كحد لرسم الوحدات لا إعداد تفويض.
راجع الاعتمادات والخصائص للأسرار والقيم غير المدعومة وكود المتصفح الزائد.

يجلب مدخل العميل رسم اعتماده المستورد

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

اعرض مكوناً تفاعلياً ضيقاً

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

tsx حد عميل صغير توضيحي

"use client";
import {useState} from "react";
export function Counter({initial}:{initial:number}) {
  const [count,setCount]=useState(initial);
  return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

الحالة عرض محلي ولم يشغل تصيير أو حدث أو إماهة.

تسلسل React عقد لا JSON وحدها

تستخدم الخصائص قيماً يدعمها عقد تسلسل React، وهو أغنى من JSON وحدها، لكن لا تمرر دالة عشوائية أو مقبض مصدر كبيانات. مراجع Server Functions آلية منفصلة لا إذن بكل رد نداء. فضل نموذج عرض ضيقاً بمعرف وقيم مجال. لا تمرر رمز وصول أو سجلاً سرياً أو خطأ داخلياً لأنه قابل للتسلسل تقنياً؛ تحتاج السلامة جمهوراً ومعنى مقصودين. يوضح ذلك الفرق بين فشل المترجم لقيمة غير مدعومة وتسرب قيمة مدعومة كان ينبغي أن تبقى داخل الخادم، ولكل منهما فحص مختلف.

اختبر سطح الخصائص المختار مستقلاً

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

javascript إسقاط خصائص محلي كامل

function counterProps(record) {return {label:record.title,initial:Math.min(record.publicCount,99)};}
const props=counterProps({title:"Courses",publicCount:120,sourceToken:"private-lab-token"});
console.assert(props.initial === 99 && props.label === "Courses");
console.assert(!Object.hasOwn(props,"sourceToken"));

تختار label وinitial فقط ولا تختبر حمولة React أو تفوض المصدر.

عالج عمل المتصفح دون كسر الخرج الأولي

لا تتاح localStorage وwindow بتقييم الخادم. اعزلهما بدورة العميل ولا تغير أول عرض بفحص window فتنتج HTML مخالفة. تعمل Effects بعد الالتزام ولتزامن خارجي لا لتكرار جلب الخادم بلا سبب. نظف المستمع والاشتراك. يشغل المقرر المصنع فقط دون حزمة أو متصفح أو effect أو إماهة. يحتاج الدمج اختباراً معزولاً لإصداري Next وReact ودورتهما. لا تعتبر وجود use client إذناً باستعمال window في كل موضع وقت الاستيراد، فقد يظل جزء من المسار يقيّم قبل توفر المتصفح.

الأخطاء الشائعة وإصلاحها

يتضمن استيراد العميل وحدة مصدر خاصة

لماذا يحدث؟: عبر رسم استيراد مكون العميل الحد الذي يفصل وحدات الخادم فقط.
كيف تصلحه؟: افصل الوصول إلى البيانات ومرر نموذج عرض ضيقاً معتمداً.
كيف تتجنب تكراره؟: استخدم فحوص حدود البناء وراجع رسم الاعتمادات.

يرسل سر قابل للتسلسل كخاصية

لماذا يحدث؟: اختلطت قابلية التسلسل التقنية بالإذن بكشف القيمة للمستدعي.
كيف تصلحه؟: طبق سياسة الجمهور واختر خصائص الإخراج صراحة.
كيف تتجنب تكراره؟: أكد غياب الحقول السرية من النتيجة العامة.

يفشل window أثناء التصيير

لماذا يحدث؟: افترض أن وسم المكون عميلاً يمنع تقييمه في الخادم.
كيف تصلحه؟: انقل دمج واجهات المتصفح إلى دورة حياة مناسبة لها.
كيف تتجنب تكراره؟: تحقق من HTML الأولية وإخراج المكون بعد الإماهة.

اختبر فهمك

1. هل يطابق حد خصائص React القيم التي تدعمها JSON.stringify تماماً؟

اعرض الحل المشروح

لا. تعرف React قيم التسلسل المدعومة وسلوك مراجع Server Functions بعقد خاص بها. حافظ على نموذج بيانات ضيق ومقصود وراجع ذلك العقد. قد يفيد اتفاق محلي يقتصر على JSON، لكنه ليس قاعدة React الكاملة ولا إذناً بكشف كل قيمة يستطيع الإطار نقلها تقنياً.

2. لماذا يعيد الخادم فحص الفعل حتى إذا عطلت الواجهة زر تنفيذه؟