مستوى المقال: مبتدئ. لو لسه بادئ في الويب وعمرك ما لمست هيدرات الـ HTTP، ده مكانك. هنشرح من الصفر بمثال بسيط الأول، وبعدين نرجع للتعريف العلمي الدقيق.
Cache-Control و ETag: تخلّي المتصفح يبطّل يسأل السيرفر على نفس الملف
أول مكسب هتاخده من المقال ده: تقدر تنزّل عدد الطلبات اللي بتوصل للسيرفر بتاعك بنسبة توصل 73% بإضافة سطر واحد في الإعدادات. من غير ما تغيّر سطر كود واحد في التطبيق.
المشكلة باختصار
كل ما زائر يفتح موقعك، المتصفح بيطلب اللوجو، وملف الـ CSS، وملفات الـ JavaScript، والخطوط. الملفات دي مش بتتغير كل يوم. لكن من غير إعداد كاش، المتصفح بيرجع يطلبها من السيرفر في كل مرة. النتيجة: السيرفر بيشتغل آلاف المرات علشان يرجّع نفس الملف اللي مرجّعه قبل كده بالظبط.
تخيّل المكتبة الأول
تخيّل إنك بتروح مكتبة عامة كل يوم علشان تقرا نفس الكتاب. كل مرة بتقطع الطريق، بتقف في الطابور، وبتستنى الموظف يجيبهولك. ده مجهود متكرر بدون فايدة.
الحل البديهي: تاخد نسخة من الكتاب وتحطها في مكتبتك في البيت. تاني يوم تقراها على طول من غير ما تتحرك. لكن فيه شرط: لازم تعرف إمتى الكتاب يطلع له طبعة جديدة علشان ترجع تجيبها.
ده بالظبط اللي بيعمله الكاش. Cache-Control هو القاعدة اللي بتقول للمتصفح "احتفظ بالنسخة دي في بيتك كذا يوم". وETag هو الطريقة اللي بيها المتصفح يسأل "هو الكتاب اتغير ولا لسه نفسه؟" من غير ما ينزّله كامل تاني.
التعريف العلمي الدقيق
دلوقتي بعد ما فهمت الفكرة، نرجع للتعريف الصح. Cache-Control هيدر HTTP استجابة (response header) بيحدّد سياسة التخزين المؤقت للمورد. أهم قيمتين فيه:
max-age: عدد الثواني اللي يُسمح فيها للمتصفح يستخدم النسخة المخزّنة من غير ما يسأل السيرفر خالص. ده اسمه fresh.immutable: بيقول للمتصفح إن الملف ده مش هيتغير أبدًا طول مدة الـ max-age، فبلاش حتى تسأل عنه.
ETag (Entity Tag) بصمة قصيرة بيولّدها السيرفر لكل نسخة من الملف، غالبًا hash للمحتوى. لما الـ max-age يخلص، المتصفح بيبعت الـ ETag في هيدر اسمه If-None-Match. لو الملف ما اتغيرش، السيرفر بيرد بـ 304 Not Modified من غير جسم استجابة. يعني رد فاضي حجمه بايتات قليلة بدل ما يبعت الملف كامل تاني.
التطبيق: سطور قابلة للنسخ
الفكرة الذهبية اللي بيشتغل بيها المحترفون: الملفات اللي ليها بصمة في اسمها (زي app.4f3a9c.js اللي بيولّدها Webpack أو Vite) خلّيها كاش لمدة سنة كاملة مع immutable، لأن أي تغيير في المحتوى بيغيّر الاسم نفسه. أما ملفات الـ HTML خلّيها بـ ETag بس علشان تتحدّث فورًا.
في NGINX: