SSR

Server-Side Rendering.

html

<div class="ssr ssr--rendering" role="img" aria-label="SSR for /product/42, stage rendering">
  <p class="ssr__page">/product/42</p>
  <div class="ssr__timeline">
    <span class="ssr__step ssr__step--requesting">Browser requests page<small>0ms</small></span>
    <span class="ssr__step ssr__step--rendering" style="--a:#F5C2E0;">Server fetches data + renders HTML<small>~180ms</small></span>
    <span class="ssr__step ssr__step--delivered" style="--a:#F5C2E0;">Full HTML delivered<small>~200ms</small></span>
  </div>
  <div class="ssr__screen">
    <span class="ssr__preview ssr__preview--requesting">&nbsp;</span>
    <span class="ssr__preview ssr__preview--rendering">&#9696;</span>
    <span class="ssr__preview ssr__preview--delivered" style="color:#F5C2E0;">Full page content</span>
  </div>
</div>
<style>
.ssr { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 320px; box-sizing: border-box; }
.ssr__page { margin: 0 0 10px; font: 11px ui-monospace, monospace; color: #24143099; }
.ssr__timeline { display: flex; gap: 6px; margin-bottom: 14px; }
.ssr__step { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; background: #24143010; font-size: 10px; font-weight: 600; opacity: .4; }
.ssr__step small { display: block; font-weight: 400; color: #24143099; margin-top: 3px; }
.ssr--requesting .ssr__step--requesting, .ssr--rendering .ssr__step--rendering, .ssr--delivered .ssr__step--delivered { opacity: 1; background: var(--a, #24143010); }
.ssr__screen { height: 56px; display: grid; place-items: center; background: #ffffff; border: 1.5px dashed #24143020; border-radius: 8px; font-size: 20px; font-weight: 700; }
.ssr__preview { display: none; }
.ssr--requesting .ssr__preview--requesting, .ssr--rendering .ssr__preview--rendering, .ssr--delivered .ssr__preview--delivered { display: block; }
</style>

tailwind

<div class="ssrtw ssrtw--rendering font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[320px] box-border" role="img" aria-label="SSR for /product/42, stage rendering">
  <p class="m-0 mb-2.5 font-mono text-[11px] text-[#24143099]">/product/42</p>
  <div class="flex gap-1.5 mb-3.5">
    <span class="ssrtw__step ssrtw__step--requesting flex-1 text-center py-2 px-1 rounded-lg bg-[#24143010] text-[10px] font-semibold opacity-40">Browser requests page<small class="block font-normal text-[#24143099] mt-0.5">0ms</small></span>
    <span class="ssrtw__step ssrtw__step--rendering flex-1 text-center py-2 px-1 rounded-lg bg-[#24143010] text-[10px] font-semibold opacity-40" style="--a:#F5C2E0;">Server fetches data + renders HTML<small class="block font-normal text-[#24143099] mt-0.5">~180ms</small></span>
    <span class="ssrtw__step ssrtw__step--delivered flex-1 text-center py-2 px-1 rounded-lg bg-[#24143010] text-[10px] font-semibold opacity-40" style="--a:#F5C2E0;">Full HTML delivered<small class="block font-normal text-[#24143099] mt-0.5">~200ms</small></span>
  </div>
  <div class="h-14 grid place-items-center bg-white border border-dashed border-[#24143020] rounded-lg text-xl font-bold">
    <span class="ssrtw__preview ssrtw__preview--requesting hidden">&nbsp;</span>
    <span class="ssrtw__preview ssrtw__preview--rendering hidden">&#9696;</span>
    <span class="ssrtw__preview ssrtw__preview--delivered hidden" style="color:#F5C2E0;">Full page content</span>
  </div>
</div>
<style>
.ssrtw--requesting .ssrtw__step--requesting, .ssrtw--rendering .ssrtw__step--rendering, .ssrtw--delivered .ssrtw__step--delivered { opacity: 1; background: var(--a, #24143010); }
.ssrtw--requesting .ssrtw__preview--requesting, .ssrtw--rendering .ssrtw__preview--rendering, .ssrtw--delivered .ssrtw__preview--delivered { display: block; }
</style>

react

export function Ssr({
  pageTitle = "/product/42",
  stage = "rendering",
  accent = "#F5C2E0",
  showTimes = true,
}) {
  const steps = [
    { id: "requesting", label: "Browser requests page", time: "0ms" },
    { id: "rendering", label: "Server fetches data + renders HTML", time: "~180ms" },
    { id: "delivered", label: "Full HTML delivered", time: "~200ms" },
  ];
  const previews = { requesting: "\u00A0", rendering: "\u25F0", delivered: "Full page content" };
  return (
    <div role="img" aria-label={`SSR for ${pageTitle}, stage ${stage}`} style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 320, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 10px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>{pageTitle}</p>
      <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
        {steps.map((s) => (
          <span key={s.id} style={{ flex: 1, textAlign: "center", padding: "8px 4px", borderRadius: 8, fontSize: 10, fontWeight: 600, opacity: s.id === stage ? 1 : .4, background: s.id === stage ? accent : "#24143010" }}>
            {s.label}
            {showTimes && <small style={{ display: "block", fontWeight: 400, color: "#24143099", marginTop: 3 }}>{s.time}</small>}
          </span>
        ))}
      </div>
      <div style={{ height: 56, display: "grid", placeItems: "center", background: "#ffffff", border: "1.5px dashed #24143020", borderRadius: 8, fontSize: 20, fontWeight: 700, color: stage === "delivered" ? accent : "#241430" }}>{previews[stage]}</div>
    </div>
  );
}