Next.js / الأساسي: المسارات وحدود التنفيذ / الدرس 1
تصيير App Router وحدود التطبيق
افصل تركيب المسار وتصيير الخادم وتفاعل المتصفح وسلطة المجال قبل اختيار حدود المكونات.
في هذه الصفحة
أهداف الدرس
- اشرح اختلاف هوية المكون الخادمي أو العميل عن التصيير الثابت أو الديناميكي.
- صف نمط المخبأ المختار وحد التحقق المحلي بصدق.
المسار تركيب عبر بيئات تنفيذ
يجمع App Router مكونات React واتفاقات الملفات وقدرات الخادم بشجرة مسارات. تنفذ Server Components عملاً خادمياً وتعيد وصفاً دون شحن تنفيذها للمتصفح، وتضيف Client Components الحالة والأحداث وواجهات المتصفح. ليس التقسيم بين قواعد آمنة وأخرى غير آمنة؛ يحتاج كل مدخل خادم تفويض المجال. تحفظ البوابة قراءة مقررات مؤهلة بطبقة خادمية وتمرر بطاقة ضيقة لتحكم تفاعلي صغير. ابدأ بملكية البيانات ومهمة المستخدم لا وسم التطبيق كله عميلاً. فصل التنفيذ لا يعفي الخدمة من التحقق مما يحق لهذا المستدعي قراءته أو تغييره.
حدد إعداد التصيير قبل بحث المخبأ
تختار الأمثلة الأساسية App Router مع تعطيل Cache Components، فتبدأ من إرشادات fetch ومخبأ المسار التقليدية. يفعل درس متقدم النموذج الآخر وPartial Prefetching منفصلين. لا تخلط تعليمات النمطين أو تفترض أن علامة تجريبية قديمة بالمعنى نفسه. الضبط توضيحي ولم ينفذ بناء. روجع التوثيق في 2026-10-28؛ ثبت Next وReact والمشغل قبل الدمج. هذا الاختيار ليس وصفاً لما تفعله كل مشاريع الإصدار افتراضياً، بل شرط تعليمي صريح يجعل تفسير المثال قابلاً للمراجعة ولا يتغير حسب إعداد مجهول.
import type { NextConfig } from "next";
const config: NextConfig = {cacheComponents:false};
export default config;تستخدم الأمثلة النموذج الموثق دون Cache Components ما لم يصرح الدرس بخلافه، ولم يطبق الضبط.
ميز عمل البناء والطلب والإماهة
لا يقيم Server Component بالضرورة مع كل طلب؛ يقرر التحضير والمخبأ إنتاجه أو استعماله. ولا يغيب Client Component بالضرورة عن HTML الأولية بالخادم. قد يسبق HTML إماهة السلوك التفاعلي ويتبادل التنقل حمولة RSC. تحتاج الإماهة خرجاً أولياً متسقاً. أبعد واجهة المتصفح عن تقييم الخادم ولا تجعل التصيير موضع أثر جانبي. فقد يحدث للبناء أو الجلب المسبق أو الإعادة لا بعد نقرة مرئية فقط. هذا الفرق يفسر لماذا لا يصلح تحديث عداد عمل دائم داخل مكون يظنه المطور مجرد عرض مرة واحدة.
اختبر الحد العام كدالة عادية
يحذف الإسقاط ملاحظة داخلية من سجل اصطناعي، وهو JavaScript كاملة بلا React أو Next. يثبت الخصائص المعادة لا تفويض المكون أو تسلسل RSC. مرر ما يقصد للعميل فقط واختر قيماً تدعمها React. قد يتسرب سر عبر النص أو الخصائص ولو كانت الوحدة خادمية؛ يحمي موضع التنفيذ الكود لا كل قيمة يعيدها. تجعل العينة شكل البطاقة مرئياً للمراجع، وتبقى قراءة السجل وأهليته وتوقيت تجديده حدوداً أخرى تحتاج أدلة مستقلة قبل عرضه لشخص حقيقي.
function publicCard(record) {return {id:record.id,title:record.title};}
const card=publicCard({id:"c1",title:"App Router",internalNote:"lab-only"});
console.assert(JSON.stringify(card) === '{"id":"c1","title":"App Router"}');
console.assert(!Object.hasOwn(card,"internalNote"));ينجح التأكيدان للسجل دون تصيير React أو إماهة أو مسار Next.
افصل ادعاء الإطار عن ادعاء التشغيل
يعتمد المقرر توثيق Next 16 ومفاهيم React مستقرة، ويطابق React المضمنة إصدار Next لا canary مستقلة عشوائية. تحتاج الأفعال والمسارات والبيانات عقود إدخال وصلاحية. وتختلف المنصات في المشغل وبقاء المخبأ. لا تثبت الدالة وJSON بناء أو متصفحاً أو مخبأ أو استضافة. تبقى الأجزاء runnable:false دون تثبيت أو خادم أو قاعدة أو سحابة أو عنوان حي. ينبغي أن يسمي التقرير الفحص المحلي بدقة، حتى لا يقرأ المتعلم نتيجة تأكيد حسابي كدليل على أن نشر Next سيحافظ على السلوك نفسه تحت إعداد مختلف.
الأخطاء الشائعة وإصلاحها
يفترض أن Client Component تعمل بالمتصفح فقط
- لماذا يحدث؟
- خلط حد المكون مع كيفية إنتاج HTML الأولية للتطبيق.
- كيف تصلحه؟
- صمم إخراجاً أولياً متسقاً واعزل واجهات المتصفح في دورة الحياة المناسبة.
- كيف تتجنب تكراره؟
- اختبر تصيير الخادم والإماهة بصورة منفصلة في دمج حقيقي مأذون.
يسرب Server Component حقولاً خاصة
- لماذا يحدث؟
- اعتبر تنفيذ الوحدة في الخادم ضماناً تلقائياً لخصوصية ما تعيده.
- كيف تصلحه؟
- فوض قراءات المصدر واختر البيانات المسموح بإخراجها فقط.
- كيف تتجنب تكراره؟
- راجع النص المصير والخصائص التي تمرر إلى مكونات العميل.
تتغير إرشادات المخبأ مع تفعيل علامة
- لماذا يحدث؟
- خلطت تعليمات نموذجين مختلفين للتصيير والتخزين المؤقت.
- كيف تصلحه؟
- سجل نمط الإعداد الدقيق قبل تطبيق إرشادات المخبأ.
- كيف تتجنب تكراره؟
- احتفظ بإعداد النموذج مع العينات التي تختبر سلوكه.
اختبر فهمك
1. هل يثبت نجاح تأكيد دالة اختيار الحقول أن صفحة المقرر آمنة؟
اعرض الحل المشروح
لا. يثبت فقط أن هذه الدالة تعيد مفتاحين لعينة البيانات المحددة. لم تختبر المصادقة أو أهلية الوصول إلى الكائن أو التوجيه أو التسلسل أو جمهور المخبأ. احتفظ بهذا الدليل المحدود، ثم تحقق مستقلاً من الحد الفعلي بين الخادم والعميل في مشروع معزول مأذون به. لا تعتبر وضع الكود في الخادم ضمان خصوصية كاملاً.
2. لماذا ينبغي ألا تنفذ الكتابات أثناء تصيير المكونات؟
اعرض الحل المشروح
قد يحدث التصيير وقت البناء أو أثناء الجلب المسبق، وقد يتكرر لأسباب تنفيذ لا ترتبط بقصد مستخدم مؤكد. قد يتكرر الأثر الجانبي فيه أو ينفذ في وقت غير متوقع. استخدم مدخل كتابة صريحاً يخضع للمصادقة والتحقق وقواعد تحمل الإعادة، واجعل دوال التصيير مشتقة للإخراج بدلاً من تنفيذ تغييرات دائمة.
أهم ما تعلمته
- بيئة التنفيذ وزمن التصيير وسياسة المخبأ أبعاد منفصلة.
- لا يستبدل الموضع الخادمي سياسة الإخراج والوصول.