updateTag vs revalidateTag — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Publish a post, then watch three readers land</h1>
    <p class="pg-sub">
      This is a <b>model</b> of what each cache-invalidation call does after a write — not a running
      Next.js server. Pick a call and a calling context, publish, then watch how the next three
      requests to a <code>posts</code>-tagged page are treated.
    </p>

<div class="banner info show">
      Simulated model — walks the documented behavior of each call in plain JS. No real server, no real cache. Timings are illustrative only.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px;">
        <div class="field">
          <span class="ctl-label">Invalidation call</span>
          <div class="seg" id="callSeg">
            <button type="button" aria-pressed="true" data-val="bare">revalidateTag(tag)</button>
            <button type="button" aria-pressed="false" data-val="max">revalidateTag(tag, "max")</button>
            <button type="button" aria-pressed="false" data-val="zero">revalidateTag(tag, {expire:0})</button>
            <button type="button" aria-pressed="false" data-val="update">updateTag(tag)</button>
          </div>
        </div>
        <div class="field">
          <span class="ctl-label">Called from</span>
          <div class="seg" id="ctxSeg">
            <button type="button" aria-pressed="true" data-val="action">Server Action</button>
            <button type="button" aria-pressed="false" data-val="route">Route Handler (webhook)</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶️ Publish a post</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <p class="hint" id="callHint" style="margin-top:8px">
        The deprecated one-argument call: still legal in plain JS, but now documented to behave like <code>{ expire: 0 }</code>.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Next three requests tagged <code>posts</code></div>
      <div class="visitors" id="visitors">
        <div class="visitor" data-v="a"><span class="ico">🧑</span>Reader A<div class="tag" data-tag="a">idle</div></div>
        <div class="visitor" data-v="b"><span class="ico">🧑‍🦱</span>Reader B<div class="tag" data-tag="b">idle</div></div>
        <div class="visitor" data-v="c"><span class="ico">🧑‍🦰</span>Reader C<div class="tag" data-tag="c">idle</div></div>
      </div>

<div class="clock">
        <span>Write completed: <b id="tWrite">—</b></span>
        <span>Reader A's response: <b id="tFirst">—</b></span>
      </div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a call and a context, then publish.</span>
      </div>
      <p class="hint" id="caption">Nothing has run yet.</p>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.