Cache

Stored copy of data for faster access.

html

<div class="cch cch--hit" role="img" aria-label="Cache hit for GET /api/user/42">
  <p class="cch__key">GET /api/user/42</p>
  <div class="cch__flow">
    <span class="cch__node">Client</span>
    <span class="cch__arrow">&rarr;</span>
    <span class="cch__node cch__node--cache" style="--a:#A8E6C1;">Cache</span>
    <span class="cch__arrow cch__arrow--origin">&rarr;</span>
    <span class="cch__node cch__node--origin">Origin</span>
  </div>
  <p class="cch__result cch__result--hit">HIT &mdash; served from cache, 4ms</p>
  <p class="cch__result cch__result--miss">MISS &mdash; fetched from origin, cache populated, 210ms</p>
  <p class="cch__result cch__result--stale">STALE &mdash; served stale, revalidating in background, 4ms</p>
</div>
<style>
.cch { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.cch__key { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }
.cch__flow { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.cch__node { flex: 1; text-align: center; padding: 10px 4px; border-radius: 8px; background: #24143010; font-size: 11px; font-weight: 700; }
.cch__arrow { color: #24143060; }
.cch__arrow--origin { opacity: .2; }
.cch--miss .cch__arrow--origin, .cch--stale .cch__arrow--origin { opacity: .2; }
.cch--miss .cch__arrow--origin { opacity: 1; }
.cch__node--cache { position: relative; }
.cch--hit .cch__node--cache, .cch--stale .cch__node--cache { background: var(--a); }
.cch--miss .cch__node--origin { background: var(--a); }
.cch__result { display: none; margin: 0; font-size: 12px; font-weight: 600; }
.cch--hit .cch__result--hit, .cch--miss .cch__result--miss, .cch--stale .cch__result--stale { display: block; }
</style>

tailwind

<div class="cchtw cchtw--hit font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border" role="img" aria-label="Cache hit for GET /api/user/42">
  <p class="m-0 mb-3 font-mono text-[11px] text-[#24143099]">GET /api/user/42</p>
  <div class="flex items-center gap-1.5 mb-3">
    <span class="flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-bold">Client</span>
    <span class="text-[#24143060]">&rarr;</span>
    <span class="cchtw__cache flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-bold" style="--a:#A8E6C1;">Cache</span>
    <span class="cchtw__arrow-origin text-[#24143060] opacity-20">&rarr;</span>
    <span class="cchtw__origin flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-bold">Origin</span>
  </div>
  <p class="cchtw__result cchtw__result--hit hidden m-0 text-xs font-semibold">HIT &mdash; served from cache, 4ms</p>
  <p class="cchtw__result cchtw__result--miss hidden m-0 text-xs font-semibold">MISS &mdash; fetched from origin, cache populated, 210ms</p>
  <p class="cchtw__result cchtw__result--stale hidden m-0 text-xs font-semibold">STALE &mdash; served stale, revalidating in background, 4ms</p>
</div>
<style>
.cchtw--hit .cchtw__cache, .cchtw--stale .cchtw__cache { background: var(--a); }
.cchtw--miss .cchtw__origin { background: var(--a); }
.cchtw--miss .cchtw__arrow-origin { opacity: 1; }
.cchtw--hit .cchtw__result--hit, .cchtw--miss .cchtw__result--miss, .cchtw--stale .cchtw__result--stale { display: block; }
</style>

react

export function Cache({
  keyName = "GET /api/user/42",
  state = "hit",
  accent = "#A8E6C1",
  showLatency = true,
}) {
  const results = {
    hit: `HIT \u2014 served from cache${showLatency ? ", 4ms" : ""}`,
    miss: `MISS \u2014 fetched from origin, cache populated${showLatency ? ", 210ms" : ""}`,
    stale: `STALE \u2014 served stale, revalidating in background${showLatency ? ", 4ms" : ""}`,
  };
  const node = (active) => ({ flex: 1, textAlign: "center", padding: "10px 4px", borderRadius: 8, fontSize: 11, fontWeight: 700, background: active ? accent : "#24143010" });
  return (
    <div role="img" aria-label={`Cache ${state} for ${keyName}`} style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>{keyName}</p>
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 12 }}>
        <span style={node(false)}>Client</span>
        <span style={{ color: "#24143060" }}>&rarr;</span>
        <span style={node(state === "hit" || state === "stale")}>Cache</span>
        <span style={{ color: "#24143060", opacity: state === "miss" ? 1 : .2 }}>&rarr;</span>
        <span style={node(state === "miss")}>Origin</span>
      </div>
      <p style={{ margin: 0, fontSize: 12, fontWeight: 600 }}>{results[state]}</p>
    </div>
  );
}