ISR

Incremental Static Regeneration.

html

<div class="isr isr--stale" role="img" aria-label="/blog/launch, stale, revalidate every 60s">
  <p class="isr__title">/blog/launch <span class="isr__revalid">revalidate: 60s</span></p>
  <div class="isr__served" style="--a:#D9C8F0;">Served from static HTML</div>
  <p class="isr__note isr__note--fresh">Within the revalidate window &mdash; served as-is, no rebuild needed.</p>
  <p class="isr__note isr__note--stale">Window expired &mdash; this stale copy is served <em>while</em> a rebuild is triggered.</p>
  <p class="isr__note isr__note--regenerating">Rebuilding in the background; the next visitor gets the fresh HTML.</p>
</div>
<style>
.isr { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.isr__title { margin: 0 0 10px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.isr__revalid { font-size: 9px; font-weight: 400; color: #24143099; }
.isr__served { padding: 12px; border-radius: 8px; background: #24143010; text-align: center; font-weight: 600; margin-bottom: 10px; }
.isr--stale .isr__served, .isr--regenerating .isr__served { background: var(--a); }
.isr__note { display: none; margin: 0; font-size: 10px; color: #24143099; }
.isr--fresh .isr__note--fresh, .isr--stale .isr__note--stale, .isr--regenerating .isr__note--regenerating { display: block; }
</style>

tailwind

<div class="isrtw isrtw--stale font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border" role="img" aria-label="/blog/launch, stale, revalidate every 60s">
  <p class="m-0 mb-2.5 font-bold flex justify-between items-center text-xs">/blog/launch <span class="text-[9px] font-normal text-[#24143099]">revalidate: 60s</span></p>
  <div class="isrtw__served p-3 rounded-lg bg-[#24143010] text-center font-semibold mb-2.5" style="--a:#D9C8F0;">Served from static HTML</div>
  <p class="isrtw__note isrtw__note--fresh hidden m-0 text-[10px] text-[#24143099]">Within the revalidate window &mdash; served as-is, no rebuild needed.</p>
  <p class="isrtw__note isrtw__note--stale hidden m-0 text-[10px] text-[#24143099]">Window expired &mdash; this stale copy is served <em>while</em> a rebuild is triggered.</p>
  <p class="isrtw__note isrtw__note--regenerating hidden m-0 text-[10px] text-[#24143099]">Rebuilding in the background; the next visitor gets the fresh HTML.</p>
</div>
<style>
.isrtw--stale .isrtw__served, .isrtw--regenerating .isrtw__served { background: var(--a); }
.isrtw--fresh .isrtw__note--fresh, .isrtw--stale .isrtw__note--stale, .isrtw--regenerating .isrtw__note--regenerating { display: block; }
</style>

react

export function Isr({
  pageTitle = "/blog/launch",
  revalidateSeconds = 60,
  stage = "stale",
  accent = "#D9C8F0",
}) {
  const notes = {
    fresh: "Within the revalidate window \u2014 served as-is, no rebuild needed.",
    stale: <>Window expired &mdash; this stale copy is served <em>while</em> a rebuild is triggered.</>,
    regenerating: "Rebuilding in the background; the next visitor gets the fresh HTML.",
  };
  const highlighted = stage === "stale" || stage === "regenerating";
  return (
    <div role="img" aria-label={`${pageTitle}, ${stage}, revalidate every ${revalidateSeconds}s`} style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 10px", fontWeight: 700, display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12 }}>{pageTitle} <span style={{ fontSize: 9, fontWeight: 400, color: "#24143099" }}>revalidate: {revalidateSeconds}s</span></p>
      <div style={{ padding: 12, borderRadius: 8, textAlign: "center", fontWeight: 600, marginBottom: 10, background: highlighted ? accent : "#24143010" }}>Served from static HTML</div>
      <p style={{ margin: 0, fontSize: 10, color: "#24143099" }}>{notes[stage]}</p>
    </div>
  );
}