ماذا يوفر Angular SSR (Universal)؟

Question

Accepted Answer

**Angular SSR** (الذي كان يُطلق عليه تاريخياً Angular Universal) يعرّض HTML التطبيق **على الخادم** للطلب الأولي، بدلاً من شحن صفحة فارغة يجب على المتصفح ملؤها بـ JavaScript. يحسّن هذا محركات البحث (SEO)، الأداء المدركة، وأول رسم.) ## المشكلة التي يحلها SSR ```text Client-side rendering (default SPA): Server sends empty + JS bundle → browser downloads & runs Angular → THEN content appears → slow first paint; crawlers/social bots may see a blank page Server-side rendering: Server runs Angular, sends fully-rendered HTML → content visible immediately → Angular "hydrates" it for interactivity ``` مع SSR، ينتج الخادم HTML كاملة بحيث يحصل المستخدمون ومحركات البحث على المحتوى الفعلي على الفور؛ ثم يعلق Angular محاولات الأحداث (hydration) لجعله تفاعلياً. ## إعداده ```bash ng add @angular/ssr # adds server rendering to an existing app ``` هذا ينشئ خادم Node/Express يعرّض Angular على الخادم ويخدم HTML المعروضة مسبقاً. ## ما يوفره SSR ```text ✓ Better SEO — crawlers get full content (critical for content/marketing sites) ✓ Faster First Contentful Paint — visible content before JS loads ✓ Better social sharing — link previews see real meta tags/content ✓ Improved performance on slow devices/networks ``` ## Hydration — تجنب إعادة العرض ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` **hydration غير التدميرية** الحديثة في Angular تعيد استخدام DOM المعروضة من الخادم بدلاً من رميها وإعادة عرضها — تجنب الوميض وتحسين الأداء. ## الأمر الذي يتعلق به: SSG (prerendering) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` يدعم Angular أيضاً **prerendering** (SSG) لمسارات في وقت البناء لأسرع تسليم ممكن للمحتوى الثابت. ## تحذيرات ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## لماذا يهمّ هذا للمواقع الغنية بالمحتوى، أو التجارة الإلكترونية، أو أي تطبيق حيث **محركات البحث والعرض الأول السريع مهمان**، فإن Angular SPA القائم على العميل فقط لا يكفي — تحصل محركات البحث والمستخدمون على صفحة فارغة حتى ينفذ JS. يحل SSR (مع hydration) هذه المشكلة بتسليم HTML حقيقي مقدماً، و SSG يذهب أبعد من ذلك للمحتوى الثابت. معرفة متى يكون SSR يستحق تعقيداً إضافياً — والتحذيرات من API المتصفح — هي الحكم المعماري الرئيسي.