| جانب المقارنة المعمارية | العرض من جهة العميل (`CSR`) | العرض من جهة الخادم (`SSR`) |
|---|---|---|
| مكان توليد صفحة الHTML الفعلي | يتم التوليد بالكامل داخل متصفح المستخدم عبر جافاسكريبت | يتم التوليد المسبق للصفحة داخل بيئة الخادم (`Node.js`) |
| ظهور المحتوى الأولي وأداء محركات البحث (`SEO`) | بطيء في الإقلاع الأولي وضعيف نسبياً في أرشفة محركات البحث | فوري وسريع للغاية، مع دعم كامل وممتاز لمحركات البحث والأرشفة |
عد اختيار استراتيجية العرض قراراً حاسماً يؤثر على أداء التطبيق وتحسنه لمحركات البحث (SEO). يعتمد العرض من جهة العميل (CSR) على تنزيل صفحة HTML فارغة تقريباً يتم ملؤها بالمتصفح عبر جافاسكريبت، بينما يقوم العرض من جهة الخادم (SSR) بتوليد الصفحة كاملة وجاهزة على الخادم قبل إرسالها للمستخدم، مما يسرع الظهور الأولي ويدعم محركات البحث بكفاءة مذهلة.
يمنح الـ SSR المستخدم محتوى مرئياً فورياً دون انتظار تحميل حزم جافاسكريبت الضخمة وتنفذيها في المتصفح.
تستطيع روبوتات محركات البحث قراءة النصوص والبيانات الوصفية بسهولة تامة من صفحات الـ SSR دون الحاجة لتشغيل محركات تحويل البرمجيات.
| 1 | import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; |
| 2 | import { provideServerRendering } from '@angular/ssr'; |
| 3 | import { appConfig } from './app.config'; |
| 4 | |
| 5 | const serverConfig: ApplicationConfig = { |
| 6 | providers: [ |
| 7 | provideServerRendering() |
| 8 | ] |
| 9 | }; |
| 10 | |
| 11 | export const config = mergeApplicationConfig(appConfig, serverConfig); |
| 1 | import { bootstrapApplication } from '@angular/platform-browser'; |
| 2 | import { AppComponent } from './app/app.component'; |
| 3 | import { config } from './app/app.config.server'; |
| 4 | |
| 5 | const bootstrap = () => bootstrapApplication(AppComponent, config); |
| 6 | |
| 7 | export default bootstrap; |
⚠️ تحذير
تذكر أن كود التطبيق في بيئة الـ SSR يُنفذ مرتين (مرة على الخادم ومرة على المتصفح)! تجنب استخدام كائنات المتصفح المباشرة مثل window أو document أو localStorage بشكل مباشر داخل المكونات لتجنب حدوث انهيار في عملية البناء على الخادم.