محتويات الدورة

Angular / المتقدم / الدرس 17

العرض بالخادم وحدود التهيئة في العميل

اختر استراتيجية العرض عمدًا واحفظ البنية الأولية المتطابقة وأبقِ موارد المتصفح وحالة الطلب عند مالكيها.

وقت القراءة التقريبي: 3 دقيقةتاريخ مراجعة المحتوى
في هذه الصفحة

أهداف الدرس

  • تمييز عرض العميل والخادم والمسبق والتهيئة اللاحقة.
  • تجنب كائنات المتصفح خلال تنفيذ الخادم.
  • اختبار فصل الطلبات واتساق البداية مستقلًا عن النماذج المحلية.

تحل أنماط العرض مسائل تسليم مختلفة

يبني العميل العرض بالمتصفح ويولده الخادم للاستجابة ويُنتج المسبق HTML قبل الطلبات. تعيد التهيئة استخدام بنية الخادم المتوافقة. تختلف الحداثة والاستضافة والموارد والأمان؛ فلا تصير صفحة شخصية ثابتة عامة لصحة قالبها. اختر إعداد 20 الموثق. لا تبدأ الأمثلة خادم SSR أو تدعي قياس الظهور أو الأداء.

عدم مشاركة حالة مستخدم متغيرة بين الطلبات

قد يبقى كائن على مستوى الوحدة ويسرب حالة مستخدم لطلب آخر. ينشئ المصنع إشارتين ويعدل واحدة ليفحص الفصل المحلي لا SSR كاملة. قيّد المزود والبيانات المسلسلة بالطلب واختبر فاعلين. يتبع عمر الجذر الإقلاع ولا تفترض مستخدمًا واحدًا للعملية. افصل المخزن العام من البيانات الموثقة عمدًا.

typescript نموذج محلي مكتمل لفصل حالة طلبين
import { signal } from "@angular/core";
function createRequestState() { return signal<string | null>(null); }
const first = createRequestState();
const second = createRequestState();
first.set("Draft");
console.log(first(), second() ?? "none");
الناتج المتوقع
Draft none

تحوي الأولى Draft وتبقى الثانية غائبة دون طلب خادم أو محرك SSR أو مستخدم موثق.

تمكين التهيئة ضمن عقد SSR مكتمل

يضيف الإعداد تهيئة وإعادة أحداث لتطبيق يملك SSR مدعومة ولا ينشئ مدخل الخادم أو السياسة أو الاستضافة. تحفظ الإعادة تفاعلات مدعومة مبكرة لا كل حدث أو سكربت خارجي. وافق البداية بين الطرفين. المقطع غير مستقل لغياب التطبيق، وتحتاج التجربة HTML والارتباط والتفاعل بعده.

typescript إعداد مزود تهيئة سياقي
import { ApplicationConfig } from "@angular/core";
import { provideClientHydration, withEventReplay } from "@angular/platform-browser";
export const appConfig: ApplicationConfig = {
  providers: [provideClientHydration(withEventReplay())]
};

ضمن تطبيق SSR مهيأ تختار المزودات السلوك، ولا يُنفّذ عرض خادم أو تهيئة متصفح هنا.

حفظ البنية التي تتوقعها التهيئة

تحتاج التهيئة DOM متوافقًا وعقد Angular وHTML صحيحة. قد يفسدها إدراج مباشر أو تعشيق أو فرع حسب المنصة. لا تتاح window وdocument دائمًا بالخادم. ضع العمل الخاص بالمتصفح عند حد مناسب ولا تغير الشجرة لإخفاء خطأ. قد تختلف العشوائية والوقت واللغة والبيانات؛ فمرر بداية حتمية أو سياسة نقل وتحديث صريحة.

اختبار صحة الارتباط وفصل البيانات

قارن البنية والتشخيص واللوحة والتركيز بتجربة SSR معزولة، واختبر طلبين وغياب الحقول الخاصة من HTML والنقل. لا يثبت المصنع المحلي ذلك. افحص المسار المباشر والمفقود والخطأ والمكتبة الخاصة بالمتصفح. لا تخف الاختلاف بتجاوز واسع دون خطة، وصرّح بأنماط الاختبار ولا تعرض حساب Node كدليل نشر SSR.

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

يفشل الخادم عند window أو document.

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

تبلغ التهيئة اختلافًا بنيويًا.

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

يرى طلب اختيار مستخدم آخر.

لماذا يحدث؟
حُفظت حالة الطلب بمالك خادم مشترك.
كيف تصلحه؟
قيّد الحالة والتسلسل بالطلب.
كيف تتجنب تكراره؟
اختبر سياقَي طلب معًا.

اختبر فهمك

1. انقل الإشارة خارج المصنع لتشترك الدعوتان. ما التغير والخطر للبيانات الحساسة؟

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

تغير الأولى قراءة الثانية لوحدة المالك، وقد يخلط الخادم الطويل الطلبات. قيّد حالة المستخدم بالعمر الفعلي وافحص SSR؛ فلا تجعل صحة النوع الإشارة العامة خاصة بطلب.

2. يعرض القالب هوية عشوائية جديدة عند تهيئة الخادم والمتصفح. اشرح الخطر والبديل.

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

قد يختلف النص أو السمة فيفسد التطابق. استخدم هوية مجال ثابتة أو انقل قيمة بداية واحدة ثم حدث المتصفح بدورته. افحص HTML والعرض لا التعبيرات فقط.

أهم ما تعلمته

  • اختر النمط وفق التسليم.
  • احفظ توافق البداية وDOM.
  • افصل الطلب وراع منصة عمل المتصفح.

المراجع الرسمية