إعداد Angular SSR
أضف SSR باستخدام Angular CLI
إعداد Angular SSR درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
إضافة SSR
أسرع طريقة لتمكين SSR هي المخطط ng add @angular/ssr. فهو يهيئ بناء الخادم، وخادماً قائماً على Express، والإماهة نيابةً عنك.
// terminal
// ng add @angular/ssrالمشروعات الجديدة
عند إنشاء تطبيق جديد، يمكنك الاشتراك مباشرة باستخدام علامة SSR، ليبدأ المشروع جاهزاً لـ SSR.
// ng new my-app --ssrما الذي يضيفه المخطط
يضيف ملف server.ts (خادم Express)، وتهيئة main.server.ts، وملف app.config.server.ts، ويحدّث angular.json بخيارات الخادم، ويمكّن الإماهة في إعدادات التطبيق.
provideServerRendering
توفر إعدادات تطبيق الخادم محرك SSR عبر provideServerRendering()، مع دمجها بإعدادات المتصفح.
// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';
const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);الإماهة على العميل
تمكّن إعدادات المتصفح الإماهة، كي يعيد العميل استخدام HTML الخاص بالخادم بدلاً من إعادة عرضه. ويضيف المخطط ذلك تلقائياً.
// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig = {
providers: [provideClientHydration()]
};خادم Express
ينشئ server.ts تطبيق Express يقدّم الأصول الثابتة ويفوّض عرض HTML إلى محرك Angular SSR لجميع المسارات الأخرى.
// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
angularApp.handle(req).then(response =>
response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
);
});خادم التطوير
أثناء التطوير، يشغّل ng serve SSR تلقائياً باستخدام منشئ التطبيق، لذلك ترى مخرجات معروضة من الخادم وإماهةً من دون خطوات إضافية.
// ng serveالبناء للإنتاج
ينتج بناء الإنتاج حزمة browser وحزمة server. وتشغّل نقطة إدخال خادم Node لتقديم SSR في بيئة الإنتاج.
// ng build
// node dist/my-app/server/server.mjsواجهات برمجة التطبيقات الخاصة بالمتصفح
تُشغَّل التعليمات البرمجية على الخادم أيضاً، حيث لا وجود لـ window وdocument وlocalStorage. احمِ عمليات الوصول إليها، وإلا فسيتعطل SSR.
import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';
const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }عناوين URL مطلقة لـ HTTP
لا تملك عناوين API النسبية أصلاً على الخادم. استخدم عناوين URL مطلقة أو اضبط أساساً كي تُحلّ استدعاءات HttpClient من جانب الخادم بشكل صحيح.
التحقق من عمل SSR
للتأكد من SSR، اطلب صفحة وافحص الاستجابة الأولية (باستخدام curl مثلاً). يجب أن ترى المحتوى المُعرَض في HTML، لا مجرد جذر تطبيق فارغ.
// curl http://localhost:4000/ | grep "<h1>"تحقق سريع
اختبر معرفتك بإعداد SSR.
مراجعة
أعددتَ SSR باستخدام ng add @angular/ssr: إذ يضيف خادم Express وprovideServerRendering() وإماهة العميل. تذكّر حماية واجهات برمجة التطبيقات الخاصة بالمتصفح، واستخدام عناوين URL المطلقة من جانب الخادم، والتحقق من HTML المُعرَض في الاستجابة الأولية.
الأسئلة الشائعة
هل درس «إعداد Angular SSR» مجاني؟
نعم — نص درس «إعداد Angular SSR» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «إعداد Angular SSR»؟
أضف SSR باستخدام Angular CLI تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «إعداد Angular SSR»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.