الـ HTTP Caching والـ Compression: أسرع request هو اللي ما بيوصلش

// client.js: بنطلب زي browser، وبنعدّ الـ bytes اللي اتنقلت فعلًا على الـ network
import http from "node:http";

const get = (path, headers = {}) => new Promise((resolve, reject) => {
  http.get({ host: "localhost", port: 3000, path, headers }, (res) => {
    let bytes = 0;
    res.on("data", (c) => (bytes += c.length));
    res.on("end", () => resolve({ status: res.statusCode, bytes, h: res.headers }));
  }).on("error", reject);
});
const show = (label, r) => console.log(`${label.padEnd(26)} ${r.status} ${String(r.bytes).padStart(6)} bytes | encoding ${r.h["content-encoding"] ?? "-"} | cache-control: ${r.h["cache-control"] ?? "-"}`);
const AE = { "Accept-Encoding": "br, gzip" };

for (const p of ["/products", "/assets/app.3f9a1c.js", "/me"]) {
  const first = await get(p, AE);
  show(`${p}`, first);
  if (first.h.etag) show(`${p} (تاني مرة بـ ETag)`, await get(p, { ...AE, "If-None-Match": first.h.etag }));
}
show("/products (gzip بس)", await get("/products", { "Accept-Encoding": "gzip" }));
show("/products (من غير compression)", await get("/products"));

$ node server.js & S=$!; sleep 1; node client.js; kill $S
on 3000
/products                  200  66248 bytes | encoding - | cache-control: -
/products (تاني مرة بـ ETag) 304      0 bytes | encoding - | cache-control: -
/assets/app.3f9a1c.js      200 157688 bytes | encoding - | cache-control: -
/assets/app.3f9a1c.js (تاني مرة بـ ETag) 304      0 bytes | encoding - | cache-control: -
/me                        200     44 bytes | encoding - | cache-control: -
/me (تاني مرة بـ ETag)     304      0 bytes | encoding - | cache-control: -
/products (gzip بس)        200  66248 bytes | encoding - | cache-control: -
/products (من غير compression) 200  66248 bytes | encoding - | cache-control: -

// http-cache.js: Cache-Control و ETag و 304 و compression
import { createHash } from "node:crypto";
import { promisify } from "node:util";
import zlib from "node:zlib";

const gzip = promisify(zlib.gzip), brotli = promisify(zlib.brotliCompress);

export function cacheControl({ noStore, private: priv, noCache, maxAge, sMaxAge, staleWhileRevalidate, immutable } = {}) {
  if (noStore) return "no-store"; // ولا browser ولا CDN يحفظ أي حاجة
  const parts = [priv ? "private" : "public"];
  if (noCache) parts.push("no-cache"); // احفظ، بس اسأل الـ server قبل كل استخدام
  if (maxAge !== undefined) parts.push(`max-age=${maxAge}`);
  if (sMaxAge !== undefined && !priv) parts.push(`s-maxage=${sMaxAge}`); // للـ CDN بس
  if (staleWhileRevalidate) parts.push(`stale-while-revalidate=${staleWhileRevalidate}`);
  if (immutable) parts.push("immutable");
  return parts.join(", ");
}

// weak ETag: نفس المحتوى، حتى لو الـ encoding مختلف (gzip أو br أو من غير)
export const etagOf = (body) => `W/"${createHash("sha256").update(body).digest("base64url").slice(0, 27)}"`;

// If-None-Match: ممكن يبقى * أو list. المقارنة weak: من غير W/
const bare = (t) => t.trim().replace(/^W\//, "");
export function isFresh(ifNoneMatch, etag) {
  if (!ifNoneMatch) return false;
  if (ifNoneMatch.trim() === "*") return true;
  return ifNoneMatch.split(",").some((t) => bare(t) === bare(etag));
}

// Accept-Encoding: "gzip, br;q=0.8" ← بنختار br لو مسموح، وبعدين gzip. q=0 يعني ممنوع
export function pickEncoding(header = "") {
  const q = new Map();
  for (const part of header.split(",")) {
    const [raw, ...params] = part.toLowerCase().split(";");
    const name = raw.trim();
    if (!name) continue;
    const qp = params.map((p) => p.trim()).find((p) => p.startsWith("q="));
    q.set(name, qp ? Number(qp.slice(2)) : 1);
  }
  const allowed = (e) => (q.has(e) ? q.get(e) > 0 : (q.get("*") ?? 0) > 0);
  return ["br", "gzip"].find(allowed) ?? null;
}

const COMPRESSIBLE = /^(text\/|application\/(json|javascript)|image\/svg)/;
// send: ETag على المحتوى الأصلي، و 304 لو الـ client عنده نفس النسخة، و compression لو يستاهل
export async function send(req, res, body, { type = "application/json", cache = {}, minSize = 1024 } = {}) {
  const buf = Buffer.isBuffer(body) ? body : Buffer.from(typeof body === "string" ? body : JSON.stringify(body));
  const etag = etagOf(buf);
  res.set("Cache-Control", cacheControl(cache));
  res.set("Vary", "Accept-Encoding"); // الـ CDN لازم يحفظ نسخة لكل encoding
  if (!cache.noStore) res.set("ETag", etag);
  if (!cache.noStore && isFresh(req.get("If-None-Match"), etag)) return res.status(304).end();
  res.type(type);
  const enc = buf.length >= minSize && COMPRESSIBLE.test(type) ? pickEncoding(req.get("Accept-Encoding")) : null;
  // res.end مش res.send: res.send بيعمل 304 لوحده بقواعد Express، وإحنا عايزين قواعدنا
  if (!enc) return res.end(buf);
  const out = enc === "br"
    ? await brotli(buf, { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 5 } }) // جودة م
…

$ node server.js & S=$!; sleep 1; node client.js; kill $S
on 3000
/products                  200  11223 bytes | encoding br | cache-control: public, max-age=60, s-maxage=300, stale-while-revalidate=600
/products (تاني مرة بـ ETag) 304      0 bytes | encoding - | cache-control: public, max-age=60, s-maxage=300, stale-while-revalidate=600
/assets/app.3f9a1c.js      200  42194 bytes | encoding br | cache-control: public, max-age=31536000, immutable
/assets/app.3f9a1c.js (تاني مرة بـ ETag) 304      0 bytes | encoding - | cache-control: public, max-age=31536000, immutable
/me                        200     44 bytes | encoding - | cache-control: no-store
/products (gzip بس)        200  11052 bytes | encoding gzip | cache-control: public, max-age=60, s-maxage=300, stale-while-revalidate=600
/products (من غير compression) 200  66248 bytes | encoding - | cache-control: public, max-age=60, s-maxage=300, stale-while-revalidate=600

// server.js: كل route ليه سياسة caching على قده، و compression للحاجات الكبيرة
import express from "express";
import { products, bundle, bundleName } from "./data.js";
import { send } from "./http-cache.js";

const app = express();
app.set("etag", false); // الـ ETag بنعمله إحنا في send
app.get("/products", (req, res) =>
  send(req, res, products, { cache: { maxAge: 60, sMaxAge: 300, staleWhileRevalidate: 600 } }));
app.get(`/assets/${bundleName}`, (req, res) =>
  send(req, res, bundle, { type: "application/javascript", cache: { maxAge: 31536000, immutable: true } }));
app.get("/me", (req, res) =>
  send(req, res, { email: "[email protected]", balance: 1250 }, { cache: { noStore: true } }));
app.listen(3000, () => console.log("on 3000"));

// data.js: catalog و JavaScript bundle للتجربة (أرقام بـ seed، فكل مرة نفس النتيجة)
let seed = 7;
const rand = () => ((seed = (seed * 1103515245 + 12345) % 2147483648) / 2147483648);
const words = ["شحن", "سريع", "ضمان", "أصلي", "خامة", "مقاس", "لون", "خصم", "جديد", "مستورد", "قطن", "جلد", "معدن", "خفيف", "كبير"];
const sentence = (n) => Array.from({ length: n }, () => words[Math.floor(rand() * words.length)]).join(" ");
const id = () => Math.floor(rand() * 1e9).toString(36);

export const products = Array.from({ length: 300 }, (_, i) => ({
  id: i + 1,
  sku: `SKU-${id()}`,
  name: `${sentence(2)} ${i + 1}`,
  price: Math.round(50 + rand() * 900),
  stock: Math.floor(rand() * 200),
  category: ["tech", "bags", "clothes", "books"][i % 4],
  description: sentence(12),
}));
export const bundle = Array.from({ length: 1500 }, (_, i) => `export function w_${id()}(p) { const v${i} = p.${id()} ?? ${Math.floor(rand() * 1000)}; return h("${id()}", { k: "${id()}" }, v${i}); }`).join("\n");
export const bundleName = "app.3f9a1c.js"; // الـ hash في الاسم: أي تغيير في الـ code ← اسم جديد

import http from "node:http";
import zlib from "node:zlib";
import { cacheControl, etagOf, isFresh, pickEncoding } from "./http-cache.js";
import { products, bundle } from "./data.js";

let ok = 0, all = 0;
const check = (name, cond, extra = "") => { all++; if (cond) ok++; console.log(cond ? "✅" : "❌", name, extra); };

check("cacheControl: public و max-age و s-maxage و swr", cacheControl({ maxAge: 60, sMaxAge: 300, staleWhileRevalidate: 600 }) === "public, max-age=60, s-maxage=300, stale-while-revalidate=600");
check("cacheControl: immutable", cacheControl({ maxAge: 31536000, immutable: true }) === "public, max-age=31536000, immutable");
check("cacheControl: noStore لوحده بس", cacheControl({ noStore: true, maxAge: 60 }) === "no-store");
check("cacheControl: private بيشيل s-maxage، و no-cache", cacheControl({ private: true, noCache: true, maxAge: 0, sMaxAge: 60 }) === "private, no-cache, max-age=0");
const e1 = etagOf("hello");
check("etagOf: weak ومتقفل بـ quotes", /^W\/"[\w-]+"$/.test(e1));
check("etagOf: نفس المحتوى ← نفس الـ ETag، ومحتوى تاني ← مختلف", etagOf(Buffer.from("hello")) === e1 && etagOf("hello!") !== e1);
check("isFresh: نفس الـ ETag، و من غير W/، و في list", isFresh(e1, e1) && isFresh(e1.slice(2), e1) && isFresh(`"x", ${e1}`, e1));
check("isFresh: * ← true، وفاضي أو مختلف ← false", isFresh("*", e1) && !isFresh(undefined, e1) && !isFresh('W/"nope"', e1));
check("pickEncoding: br أحسن من gzip", pickEncoding("gzip, deflate, br") === "br");
check("pickEncoding: br;q=0 ← gzip", pickEncoding("gzip;q=1.0, br;q=0") === "gzip");
check("pickEncoding: * و identity وفاضي", pickEncoding("*") === "br" && pickEncoding("identity") === null && pickEncoding("") === null && pickEncoding() === null);
check("pickEncoding: الحروف الكبيرة والمسافات", pickEncoding(" GZIP ; q=0.5 ") === "gzip");

const get = (path, headers = {}) => new Promise((resolve, reject) => {
  http.get({ host: "localhost", port: 3000, path, headers }, (res) => {
    const chunks = [];
    res.on("data", (c) => chunks.push(c));
    res.on("end", () => resolve({ status: res.statusCode, body: Buffer.concat(chunks), h: res.headers }));
  }).on("error", reject);
});
const raw = Buffer.from(JSON.stringify(products));
const br = await get("/products", { "Accept-Encoding": "br, gzip" });
check("server: products بـ br، وأصغر من ربع الحجم", br.h["content-encoding"] === "br" && br.body.length < raw.length / 4, `${br.body.length} من ${raw.length}`);
check("server: بعد الـ decompress نفس الـ JSON بالضبط", zlib.brotliDecompressSync(br.body).equals(raw));
const gz = await get("/products", { "Accept-Encoding": "gzip" });
check("server: gzip بس ← gzip وصح", gz.h["content-encoding"] === "gzip" && zlib.gunzipSync(gz.body).equals(raw));
const plain = await get("/products");
check("server: من غير Accept-Encoding ← من غير compression", !plain.h["content-encoding"] && plain.body.equals(raw));
check("server: Vary فيه Accept-Encoding", /accept-encoding/i.test(br.h.vary ?? ""));
check("server: نفس الـ ETag
…