Angular Academy · درس

نقل الحالة إلى العميل

تجنّب الطلبات المكررة باستخدام نقل الحالة

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

مشكلة جلب البيانات مرتين

أثناء SSR، يجلب الخادم البيانات لعرض HTML. ومن دون مساعدة، يجلب العميل البيانات نفسها مرة أخرى بعد الإماهة، مما يهدر طلباً ويخاطر بحدوث وميض في المحتوى.

الحل مع TransferState

تُسلسل TransferState في Angular البيانات على الخادم داخل HTML، ثم يقرأها العميل بدلاً من إعادة جلبها. وتنتقل البيانات داخل وسم script في الاستجابة.

كيفية انتقال البيانات

تُضمَّن الحالة المخزنة على الخادم بصيغة JSON داخل الصفحة. وعند بدء التشغيل، يفك العميل تسلسلها، لذلك يستخدم العرض الأول البيانات نفسها التي استخدمها الخادم.

<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>

استخدام makeStateKey

أنشئ مفتاحاً ذا نوع باستخدام makeStateKey، ثم اقرأ أو اكتب عبر خدمة TransferState.

import { makeStateKey, TransferState } from '@angular/core';

const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);

نمط القراءة ثم الجلب

على الخادم والعميل معاً: إذا كان المفتاح موجوداً في TransferState، فاستخدمه؛ وإلا فاجلب البيانات. يجلب الخادم البيانات ويخزنها، ثم يعثر العميل على القيمة المخزنة ويتجاوز الاستدعاء.

const state = inject(TransferState);
if (state.hasKey(USERS)) {
  this.users = state.get(USERS, []);
} else {
  this.http.get<User[]>('/api/users')
    .subscribe(u => { this.users = u; state.set(USERS, u); });
}

ينفذ HttpClient ذلك تلقائياً

يؤدي استدعاء provideClientHydration(withHttpTransferCacheOptions()) (المفعّل افتراضياً مع الإماهة) إلى جعل HttpClient يخزّن استجابات GET الخاصة بالخادم في TransferState، بحيث تُخدم طلبات العميل المطابقة من ذاكرة التخزين المؤقت دون مفاتيح يدوية.

provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))

تجنب الوميض

بما أن العميل يعيد استخدام البيانات المنقولة، تطابق الواجهة التي تمت إماهتها HTML الخاص بالخادم تماماً، مما يمنع الوميض الذي يختفي فيه المحتوى ثم يُعاد تحميله.

ملاحظة أمنية

تُضمَّن الحالة المنقولة في HTML العام. لا تضع أبداً في TransferState أسراراً أو رموزاً أو بيانات خاصة بالمستخدم لا ترغب في كشفها ضمن مصدر الصفحة.

اليدوي مقابل التلقائي

تغطي ذاكرة التخزين المؤقت لنقل HTTP معظم عمليات جلب البيانات المعتمدة على GET تلقائياً. استخدم makeStateKey يدوياً للحالة المحسوبة غير المعتمدة على HTTP التي تريد نقلها من الخادم إلى العميل.

نطاق التخزين المؤقت

تكون ذاكرة التخزين المؤقت لنقل HTTP خاصة بكل طلب، ويستهلكها العميل مرة واحدة. وبعد أن يقرأها أول طلب مطابق من العميل، تتجه الاستدعاءات اللاحقة إلى الشبكة كالمعتاد.

التحقق من عملها

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

تحقق سريع

اختبر معرفتك بنقل الحالة.

مراجعة

تعلمتَ نقل البيانات من الخادم إلى العميل باستخدام TransferState وmakeStateKey، واستخدام ذاكرة التخزين المؤقت التلقائية لنقل HTTP، وتجنب عمليات الجلب المزدوجة والوميض، وإبقاء البيانات الخاصة خارج الحالة المضمّنة للعامة.

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

هل درس «نقل الحالة إلى العميل» مجاني؟

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

ماذا ستتعلم في «نقل الحالة إلى العميل»؟

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

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

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

كم من الوقت يستغرق درس «نقل الحالة إلى العميل»؟

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

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

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

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

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