هندسة جهاز توجيه تطبيق الإنتاج في Next.js: حيث يلتقي الخادم بالعميل
دليل عملي لمكونات الخادم، وقطاعات المسار، والتخزين المؤقت، وحدود العميل في تطبيقات الإنتاج الحقيقية - وليس العروض التوضيحية للعبة.
علي مرتضوي
مؤسس بارادايس كود
جهاز توجيه التطبيق هو عقد عرض، وليس إعادة تسمية للمجلد
تتعامل معظم الفرق مع جهاز توجيه التطبيقات كمجلدات الصفحات الجديدة. من الناحية العملية، يقوم كل ملف في "التطبيق" بتشفير قرار العرض والتخزين المؤقت وملكية البيانات. تحافظ مكونات الخادم الافتراضية على البيانات بالقرب من المصدر، وتقلص سطح HTML/JS الأولي، وتنمي حزمة العميل فقط في حالة وجود التفاعل. إذا تجاهلت هذا العقد، فإنك ترسم "استخدام العميل" في كل مكان وتعيد إنشاء دين SPA القديم تحت اسم جديد.
السؤال الصحيح في عملية الإنتاج ليس "هل يمكن أن يكون هذا أحد مكونات العميل؟" ولكن "هل يحتاج هذا إلى حالة المتصفح أو المستمعين أو واجهات برمجة تطبيقات المتصفح؟" إذا لم يكن الأمر كذلك، فاحتفظ به على الخادم. هذه القاعدة الواحدة تحول الهندسة المعمارية من الذوق إلى سياسة قابلة للمراجعة.
طبقات المسار: التخطيطات والقوالب وقطاعات البيانات
تمتلك التخطيطات أغلفة متينة: التنقل، والموضوع، والمصادقة ذات المستوى الأعلى، والموفرون الذين يغلفون شجرة فرعية بالفعل. تكون القوالب مهمة عندما تحتاج إلى إعادة التحميل عند التنقل، أدخل الرسوم المتحركة أو عمليات إعادة تعيين النموذج. الفشل الشائع هو الجلب الثقيل في تخطيط الجذر؛ ثم تدفع كل عملية تنقل مقابل البيانات المشتركة في المكان الخطأ.
تنظيم الشرائح حول وحدات المنتج، وليس ملفات واجهة المستخدم. يجب أن يمتلك `/dashboard/billing` بيانات الفوترة بدلاً من السماح لكل أداة بالوصول إلى واجهة برمجة التطبيقات الخاصة بها. الملكية الواضحة تجعل `loading.tsx` و`error.tsx` ذا معنى: الهياكل العظمية والإخفاقات التي تم تحديدها لتلك الوحدة.
التخزين المؤقت المتعمد: ثابت، وإعادة التحقق، ولا توجد ذاكرة تخزين مؤقت عرضية
يعد التخزين المؤقت غير المقصود أكثر خطورة من عدم وجود ذاكرة تخزين مؤقت. المحتوى التسويقي مع ``إعادة التحقق`` الطويلة، ولوحات معلومات المستخدم التي تحتوي على ذاكرة تخزين مؤقت قصيرة أو لا تحتوي على ذاكرة تخزين مؤقت، والقراءات الحساسة مع ``بدون متجر`` — قم بتسمية هذه الأوضاع بشكل صريح. الفرق التي تكتب كل جلب بنفس الطريقة إما أن تشحن حالة قديمة أو تحرق الأصل.
بالنسبة للمحتوى شبه الديناميكي، قم بتوصيل ISR/`revalidateTag` إلى أحداث العمل: نشر المقالة وتغيير السعر وتحديث المخزون. يجب أن تكون العلامات عبارة عن أسماء نطاقات (`product:42`)، وليست أسماء مكونات، بحيث يظل إبطال الصلاحية غير متوافق مع واجهة المستخدم ويقوم بتحديث صفحات متعددة بشكل صحيح.
لا تقم بتحويل Route Handlers إلى واجهة برمجة تطبيقات منتجك الداخلي إلا إذا لزم الأمر. قراءة بيانات الصفحة مباشرة في مكونات الخادم. معالجات الاحتياطية لخطافات الويب أو التحميلات أو العقود الخارجية بحيث تظل سياسة سطح الهجوم وذاكرة التخزين المؤقت منفصلة.
حدود العميل: قليلة، صريحة، قريبة من التفاعل
ادفع حدود العميل لأسفل حتى تصبح الأدوات التفاعلية فقط هي "استخدام العميل": الوسائط، والمرشحات المباشرة، والمحررين، والرسوم البيانية. أبقِ أولياء الأمور على الخادم حتى تصل الدعائم الأولية من RSC ويظل الماء في حده الأدنى. عادةً ما يقوم الموفر العملاق على مستوى التطبيق بتضخيم حجم الحزمة وإعادة العرض مجانًا.
بالنسبة للحالة المشتركة، تفضل عنوان URL والخادم أولاً: عوامل التصفية في معلمات البحث، وعلامات التبويب في المسار، والبيانات الأولية من RSC. يمكنك الوصول إلى السياق أو متجر العميل فقط للتفاعل متعدد الأدوات قصير الأمد. يمنع هذا الأمر اختلال الهيدرات وأخطاء عدم التطابق.
البث والتشويق كعقد UX
البث المباشر ليس خدعة منارة؛ إنه عقد أولوية المحتوى. أرسل الصدفة والمحتوى الموجود في الجزء العلوي مبكرًا؛ قم بإيقاف الكتل البطيئة (التوصيات والتعليقات والأدوات الجانبية) خلف التشويق. يجب أن يشعر المستخدمون بأن "الصفحة وصلت" في أقل من ثانية حتى أثناء استمرار حل الأجزاء.
قم بتصميم احتياطيات حقيقية لكل حد، وليس أداة دوارة عامة. الارتفاع الثابت أو الهياكل العظمية المطابقة تمنع CLS. إذا كان أحد الأقسام بطيئًا دائمًا، فهذه مشكلة في بنية البيانات: قم بإصلاحه باستخدام ذاكرة التخزين المؤقت أو استعلام منفصل أو نقطة نهاية أخف.
حدود الأمان والخادم في جهاز توجيه التطبيقات
يوجد رمز الخادم بجوار رمز العميل، لذا فإن عبارة "لم يتم استيراد الملف" ليست نموذجًا أمنيًا. احتفظ بالأسرار في بيئة الخادم فقط، وفرض التفويض في وظائف الخادم أو طبقة البيانات، وأرسل للعملاء الحد الأدنى من الحقول المطلوبة. لا تقم مطلقًا بتمرير مستندات قاعدة البيانات الكاملة إلى مكونات العميل.
تعتبر إجراءات الخادم ممتازة للطفرات على شكل نموذج، ولكنها آمنة مثل واجهات برمجة التطبيقات: التحقق من صحة الإدخال، وعمليات التحقق من CSRF/الأصل لنموذجك، وحدود المعدل، وسجلات التدقيق. الإجراء بدون عقد أمان هو مجرد RPC مخفي.
قائمة مراجعة الهندسة المعمارية قبل القياس
قبل نمو حركة المرور أو الفريق، قم بتأمين هذه العناصر: خريطة القطاعات ومالكي البيانات، ومخزون علامات ذاكرة التخزين المؤقت، وقواعد حدود العميل قيد المراجعة، وميزانيات الحزمة للمسارات الرئيسية. بدونها، يضيف جهاز توجيه التطبيقات التعقيد فقط.
الهندسة المعمارية المستقرة تعني أن المسار الجديد لا يعيد فتح النقاش حول مكان الجلب. عندما يستمر هذا العقد، ترتفع سرعة الميزة وجودة الإنتاج معًا - وهو النمط الذي تتقارب فيه منتجات Next.js الجادة.
الأسئلة الشائعة
هل يجب أن تظل كل صفحة مكونًا للخادم؟
بشكل افتراضي، نعم. قم بإنشاء قطع تفاعلية حقيقية فقط من جانب العميل؛ اترك الباقي على الخادم للتحكم في تكلفة الحزمة والترطيب.
متى يجب أن نستخدم معالج الطريق بدلاً من الجلب في RSC؟
بالنسبة للعقود الخارجية أو خطافات الويب أو التحميلات أو عندما يتعين على عميل آخر الاتصال بـ HTTP بشكل مستقل. لعرض الصفحة، اقرأ البيانات مباشرة على الخادم.
هل revalidateTag أفضل من إعادة التحقق المستندة إلى الوقت؟
بالنسبة للمحتوى الذي يحركه الحدث، تفوز العلامات. تتناسب عملية إعادة التحقق المستندة إلى الوقت مع إيقاعات التغيير التي يمكن التنبؤ بها عندما يكون الجمود القصير مقبولاً.
كيف نمنع حدود العميل من الانفجار؟
اطلب سبب تفاعل لكل ``استخدام العميل'' في مراجعة العلاقات العامة، وحدد مقدمي الخدمات العالميين، وفضل حالة عنوان URL للمرشحات.
المعرفة والمقالات
تحتاج تطبيق هذه المفاهيم في منتجك؟
بارادايس كود معك من الاستشارة حتى التسليم الكامل.