Lesson 16 / الدرس 16

Caching: the request that never happens / التخزين المؤقت: الطلب الذي لا يحدث

The fastest request is the one nobody makes. Browsers keep copies of what they fetched, and two headers decide how long — which is also why a change you deployed is invisible to you.

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

The second visit to a site is almost always faster than the first, and not because anything improved. The browser kept what it fetched — the stylesheet, the fonts, the logo — and on the next page it uses its own copy instead of asking again. That store is the cache, and the server controls it.

Two questions, two headers

Cache-Control: max-age=31536000, immutable    ← keep it a year, it will never change
Cache-Control: max-age=300                     ← keep it five minutes
Cache-Control: no-store                        ← never keep this at all
ETag: "a91f3c"                                 ← a fingerprint of this exact version

The first header answers "may I keep this, and for how long". The second answers a different question: when the time is up, has it actually changed? The browser sends the fingerprint back and the server replies 304 Not Modified — the code from lesson 8 — with no body at all if it still matches.

الترويسة الأولى تجيب "أيجوز لي الاحتفاظ بهذا، وكم مدة". والثانية تجيب سؤالًا مختلفًا: حين تنقضي المدة، أتغيّر فعلًا؟ فيعيد المتصفح البصمة ويرد الخادم 304 Not Modified — رمز الدرس 8 — بلا متن إطلاقًا إن كانت ما تزال مطابقة.

What is being asked for	Sensible policy	Reason
The HTML page	no-cache, or a few minutes	Its content changes; it names everything else
A stylesheet or script	A year, with a version in the filename	The name changes when the file does
A photo or logo	Weeks to a year	Rarely changes, and large
A logged-in page	no-store	It must never sit in a shared cache
A price or a stock count	no-store	A stale answer here is a wrong answer

The second row is the pattern behind everything else. Cache the parts that are named precisely, and keep the page that names them fresh.

Why the deploy you just made is invisible

You change the stylesheet, upload it, reload, and nothing happens. The browser is not broken and neither is the server: you told the browser a year ago — in cache terms — that style.css was good for a year, and it is honouring that. The file on the server changed; the instruction about it did not.

تغيّر ملف التنسيق وترفعه وتعيد التحميل فلا يحدث شيء. والمتصفح ليس معطلًا ولا الخادم: بل قلت للمتصفح قبل سنة — بلغة الذاكرة المؤقتة — إن style.css صالح لسنة، وهو يفي بذلك. فقد تغيّر الملف على الخادم؛ ولم تتغير التعليمة عنه.

<link rel="stylesheet" href="/assets/css/site.css">           <!-- a year of guessing -->
<link rel="stylesheet" href="/assets/css/site.css?v=27">      <!-- a new address, so a new file -->

The standard fix, and it is a trick worth recognising: change the address whenever the file changes. A different address is a different resource as far as the cache is concerned, so it fetches it and you still get a year of caching on the version before it. This very site does exactly that.

ولا تخزّن أبدًا صفحة تعرض لشخص بياناته هو. فالذاكرة المؤقتة بينك وبين الزائر — في شركة أو عند مزوّد أو في خدمة كتلك التي في الدرس 19 — قد تسلّم نسخة مخزّنة لأول من يطلب العنوان نفسه بعده. والترويسة لأي شيء شخصي هي no-store، وهي ليست اختيارية.

Check yourself / اختبر نفسك

1. You uploaded a new stylesheet but the site looks unchanged. Most likely reason?

2. What does a 304 response contain?

ماذا تحوي استجابة 304؟

3. Which of these must never be cached?