Angular Academy · درس

مسارات الخادم وأنماط العرض

اضبط prerender وSSR وCSR لكل مسار

مسارات الخادم وأنماط العرض درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

مقاس واحد لا يناسب الجميع

لا ينبغي عرض كل مسار بالطريقة نفسها. يتيح لك Angular SSR تعيين نمط عرض لكل مسار: عرض من الخادم، أو عرض من العميل، أو عرض مسبق وقت البناء.

الأنماط الثلاثة

يعرض RenderMode.Server في كل طلب، بينما يعرض RenderMode.Client في المتصفح فقط (CSR)، وينشئ RenderMode.Prerender HTML ثابتاً وقت البناء (SSG).

إعداد مسارات الخادم

عرّف مصفوفة ServerRoute[] تربط المسارات بأنماط العرض، ثم مرّرها باستخدام provideServerRouting في إعدادات الخادم.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'dashboard', renderMode: RenderMode.Client },
  { path: '**', renderMode: RenderMode.Server }
];

توصيل الإعدادات

سجّل المسارات في إعدادات تطبيق الخادم كي يعرف محرك SSR كيفية التعامل مع كل مسار.

// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';

providers: [
  provideServerRendering(),
  provideServerRouting(serverRoutes)
]

متى تستخدم العرض المسبق

اختر Prerender للصفحات العامة المستقرة: الصفحة الرئيسية، وصفحة نبذة عنا، والتوثيق. تُبنى هذه الصفحات مرة واحدة في HTML، وتُقدَّم فوراً من شبكة CDN، من دون تكلفة خادم لكل طلب.

متى تستخدم الخادم

اختر Server للصفحات التي يتغير محتواها حسب الطلب أو المستخدم، لكنها لا تزال تحتاج إلى تحسين محركات البحث أو عرض أول سريع، مثل صفحة منتج بمخزون مباشر.

متى تستخدم العميل

اختر Client للصفحات الخاصة عالية التفاعلية التي لا تهم فيها كثيراً عوامل تحسين محركات البحث والعرض الأول، مثل لوحة معلومات للمستخدمين الموثّقين. يرسل الخادم هيكلاً أولياً ويتولى المتصفح العرض.

العرض المسبق للمعلمات الديناميكية

بالنسبة إلى المسارات ذات المعلمات، يجب أن تخبر أداة العرض المسبق بالمعلمات التي ينبغي إنشاؤها، وذلك بإرجاع قائمة باستخدام getPrerenderParams.

{
  path: 'product/:id',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    const ids = await fetchProductIds();
    return ids.map(id => ({ id }));
  }
}

البديل للعرض المسبق

يمكن للمعلمات التي لم تُعرَض مسبقاً الرجوع إلى العرض من الخادم أو العميل وقت التشغيل، وبذلك تعرض العناصر الشائعة مسبقاً وتعرض العناصر الأقل شيوعاً عند الطلب.

الرؤوس وحالات الاستجابة لكل مسار

يمكن لمسارات الخادم تعيين رؤوس الاستجابة ورموز الحالة، وهو أمر مفيد لسياسة التخزين المؤقت أو لإرجاع 404 من معالج مسار غير موجود.

{
  path: 'old-page',
  renderMode: RenderMode.Server,
  headers: { 'Cache-Control': 'no-store' }
}

مزج الأنماط بذكاء

يمزج التطبيق الحقيقي بين الأنماط: اعرض صفحات التسويق مسبقاً، واعرض الصفحات الديناميكية المهمة لتحسين محركات البحث من الخادم، واعرض التطبيق خلف تسجيل الدخول من العميل. وهكذا تحسّن التكلفة والأداء معاً.

تحقق سريع

اختبر معرفتك بأنماط العرض.

مراجعة

ضبطتَ العرض لكل مسار باستخدام ServerRoute[] وprovideServerRouting: استخدمتَ Prerender للصفحات العامة المستقرة، وServer للصفحات الديناميكية المهمة لتحسين محركات البحث، وClient للصفحات الخاصة التفاعلية، بما في ذلك معلمات العرض المسبق للمسارات الديناميكية.

الأسئلة الشائعة

هل درس «مسارات الخادم وأنماط العرض» مجاني؟

نعم — نص درس «مسارات الخادم وأنماط العرض» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «مسارات الخادم وأنماط العرض»؟

اضبط prerender وSSR وCSR لكل مسار تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «مسارات الخادم وأنماط العرض»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy