التخزين المؤقت للطلبات وتحسين أداء جلب البيانات

HTTP CachingPerformance OptimizationResponse MemoizationSingleton Services

جدول مرجعي سريع

طريقة الجلب (`Fetching Method`)	مصدر جلب البيانات	سرعة الاستجابة وتوفير الموارد
الطلب المباشر المتكرر	إرسال طلب جديد للخادم في كل مرة ينتقل فيها المستخدم للمكون	بطيء ويستهلك بيانات الإنترنت وموارد الخادم بلا داعٍ
التخزين المؤقت (`Caching`)	الاحتفاظ بنسخة الاستجابة وإرجاعها فوراً من ذاكرة المتصفح المؤقتة	فوري، فائق السرعة، ويوفر استهلاك النطاق الترددي للشبكة

الشرح

إرسال نفس طلبات الشبكة مراراً وتكراراً عند تنقل المستخدم بين صفحات التطبيق يمثل استنزافاً غير مبرر لموارد الخادم والشبكة. يتيح لك بناء نظام التخزين المؤقت (HTTP Caching) حفظ نتائج الاستجابات السابقة مؤخراً في الذاكرة (Memory Cache)، وإرجاعها فوراً للمستخدم دون الحاجة لإعادة الاتصال بالخادم، مما يرفع من سرعة وأداء التطبيق بشكل مذهل.

تفصيل فلسفة وعمل التخزين المؤقت

التحقق من الذاكرة المحلية:

قبل إرسال أي طلب شبكي جديد، تفحص خدمة الكاش ما إذا كانت الاستجابة محفوظة مسبقاً لإرجاعها فوراً دون تحميل الشبكة.

الاستفادة من الخدمات الفردية (Singleton Services):

يُبنى نظام التخزين المؤقت داخل خدمة مركزية مزودة بـ providedIn: 'root' لضمان بقاء البيانات المخزنة متاحة وثابتة طوال فترة عمل التطبيق.

بناء خدمة تخزين مؤقت متقدمة

خدمة التخزين المؤقت للبيانات (http-cache.service.ts)

typescript

1	import { Injectable, inject } from '@angular/core';
2	import { HttpClient } from '@angular/common/http';
3	import { Observable, of } from 'rxjs';
4	import { tap } from 'rxjs/operators';
5
6	@Injectable({
7	providedIn: 'root'
8	})
9	export class HttpCacheService {
10	private http = inject(HttpClient);
11	private cache = new Map<string, any>();
12
13	getWithCache<T>(url: string): Observable<T> {
14	// التحقق مما إذا كانت البيانات مخزنة مسبقاً في الذاكرة
15	if (this.cache.has(url)) {
16	console.log(`[Cache Hit] استرجاع البيانات الفورية من الذاكرة المؤقتة للرابط: ${url}`);
17	return of(this.cache.get(url));
18	}
19
20	console.log(`[Cache Miss] إرسال طلب شبكي حقيقي وجلب البيانات للخادم: ${url}`);
21	return this.http.get<T>(url).pipe(
22	tap(response => {
23	// تخزين الاستجابة في الذاكرة لاستخدامها لاحقاً
24	this.cache.set(url, response);
25	})
26	);
27	}
28
29	clearCache(): void {
30	this.cache.clear();
31	console.log('تم تفريغ ذاكرة التخزين المؤقت بنجاح.');
32	}
33	}

⚠️ تحذير

تذكر أن التخزين المؤقت في الذاكرة المحلية غير مناسب للبيانات الحساسة أو التي تتغير بشكل لحظي ومتكرر! استخدام الكاش مع بيانات متغيرة باستمرار سيتسبب في عرض معلومات قديمة وغير محدثة للمستخدم.

نصائح احترافية

—استخدم التخزين المؤقت حصرياً للبيانات الثابتة نسبياً التي لا تتغير باستمرار!
—مثل قوائم التصنيفات العامة أو الإعدادات الثابتة، واحرص على توفير آلية واضحة لتفريغ الكاش عند تنفيذ عمليات التعديل أو الحذف.

الدرس السابق

تتبع تقدم عمليات الرفع والتحميل

الدرس التالي

إعداد نظام المسارات وتكوينه في التطبيقات الحديثة باستخدام provideRouter

طريقة الجلب (`Fetching Method`)

مصدر جلب البيانات

سرعة الاستجابة وتوفير الموارد

الطلب المباشر المتكرر

إرسال طلب جديد للخادم في كل مرة ينتقل فيها المستخدم للمكون

بطيء ويستهلك بيانات الإنترنت وموارد الخادم بلا داعٍ

التخزين المؤقت (`Caching`)

الاحتفاظ بنسخة الاستجابة وإرجاعها فوراً من ذاكرة المتصفح المؤقتة

فوري، فائق السرعة، ويوفر استهلاك النطاق الترددي للشبكة

تفصيل فلسفة وعمل التخزين المؤقت

التحقق من الذاكرة المحلية:

الاستفادة من الخدمات الفردية (Singleton Services):

بناء خدمة تخزين مؤقت متقدمة

خدمة التخزين المؤقت للبيانات (http-cache.service.ts)

typescript

1	import { Injectable, inject } from '@angular/core';
2	import { HttpClient } from '@angular/common/http';
3	import { Observable, of } from 'rxjs';
4	import { tap } from 'rxjs/operators';
5
6	@Injectable({
7	providedIn: 'root'
8	})
9	export class HttpCacheService {
10	private http = inject(HttpClient);
11	private cache = new Map<string, any>();
12
13	getWithCache<T>(url: string): Observable<T> {
14	// التحقق مما إذا كانت البيانات مخزنة مسبقاً في الذاكرة
15	if (this.cache.has(url)) {
16	console.log(`[Cache Hit] استرجاع البيانات الفورية من الذاكرة المؤقتة للرابط: ${url}`);
17	return of(this.cache.get(url));
18	}
19
20	console.log(`[Cache Miss] إرسال طلب شبكي حقيقي وجلب البيانات للخادم: ${url}`);
21	return this.http.get<T>(url).pipe(
22	tap(response => {
23	// تخزين الاستجابة في الذاكرة لاستخدامها لاحقاً
24	this.cache.set(url, response);
25	})
26	);
27	}
28
29	clearCache(): void {
30	this.cache.clear();
31	console.log('تم تفريغ ذاكرة التخزين المؤقت بنجاح.');
32	}
33	}

⚠️ تحذير