Next.js Route Handlers — caching across versions playground

<div class="pg">
    <h1 class="pg-title">🎮 Route Handler caching: Next.js 14 vs 16</h1>
    <p class="pg-sub">
      This is a <strong>model</strong> of the documented rules, not a live Next.js server: every
      response below is <strong>simulated</strong>. Pick a version, configure <code>GET /api/products</code>,
      change the price in the "database", and watch whether the response keeps up.
    </p>

<div class="banner info show" role="note">
      Simulated. Revalidation is simplified: here an invalidation makes the <em>next</em> request regenerate.
      Real Next.js revalidation can serve one stale response first while it refreshes in the background.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>

<div class="addr">
        <span class="dots"><span></span><span></span><span></span></span>
        <code id="addrText">GET /api/products</code>
      </div>

<div class="wrap-controls">
        <div class="field">
          <span class="ctl-label">Version / caching model</span>
          <div class="seg" id="modelSeg">
            <button aria-pressed="true" data-model="v14">Next.js 14</button>
            <button aria-pressed="false" data-model="default">16 · default model</button>
            <button aria-pressed="false" data-model="cc">16 · cacheComponents</button>
          </div>
        </div>
        <div class="field">
          <span class="ctl-label">HTTP method</span>
          <div class="seg" id="methodSeg">
            <button aria-pressed="true" data-method="GET">GET</button>
            <button aria-pressed="false" data-method="POST">POST</button>
          </div>
        </div>
      </div>

<div class="wrap-controls" style="margin-top:12px">
        <div class="field">
          <span class="ctl-label">Segment config export</span>
          <div class="seg" id="segSeg">
            <button aria-pressed="true" data-seg="none">none</button>
            <button aria-pressed="false" data-seg="force-static">dynamic = 'force-static'</button>
            <button aria-pressed="false" data-seg="force-dynamic">dynamic = 'force-dynamic'</button>
          </div>
        </div>
        <div class="field">
          <span class="ctl-label">Where the data comes from</span>
          <div class="seg" id="dataSeg">
            <button aria-pressed="true" data-data="async">async DB query</button>
            <button aria-pressed="false" data-data="sync">sync driver (better-sqlite3)</button>
            <button aria-pressed="false" data-data="const">a constant</button>
          </div>
        </div>
      </div>

<div class="btn-row" style="margin-top:12px">
        <label class="toggle">
          <input type="checkbox" id="readsReq" /><span class="switch"></span>
          <span>Handler reads the request: <code>cookies()</code>, <code>headers()</code> or <code>request.url</code></span>
        </label>
      </div>

<div class="sub-controls" id="ccControls" style="margin-top:8px" hidden>
        <label class="toggle">
          <input type="checkbox" id="useCache" /><span class="switch"></span>
          <span>Data comes from a helper marked <code>"use cache"</code> with <code>cacheTag("products")</code></span>
        </label>
      </div>

<div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="send">Send request</button>
        <button class="btn" id="changePrice">Change DB price to $35</button>
        <button class="btn" id="invalidate">Invalidate</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>

<div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="bug14">14: the $40 bug</button>
        <button class="btn sm" data-preset="plain16">16 default: same file</button>
        <button class="btn sm" data-preset="static16">16 default: force-static</button>
        <button class="btn sm" data-preset="ccQuery">cacheComponents: DB query</button>
        <button class="btn sm" data-preset="ccCache">cacheComponents: "use cache"</button>
        <button class="btn sm" data-preset="ccSync">cacheComponents: sync driver</button>
        <button class="btn sm" data-preset="ccLeftover">cacheComponents + leftover force-dynamic</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What happens (simulated)</div>
      <div class="flow" id="flow">
        <div class="box" id="boxBuild"><span class="ico">🏗️</span>next build<span class="sub" id="buildSub">not run yet</span></div>
        <div class="box" id="boxHandler"><span class="ico">🧩</span>Route Handler<span class="sub" id="handlerSub">waiting</span></div>
        <div class="box" id="boxOutcome"><span class="ico">📦</span>Response<span class="sub" id="outcomeSub">waiting</span></div>
      </div>

<div class="stats">
        <div class="stat">DB price now<span class="big-num" id="dbPrice">$40</span></div>
        <div class="stat" id="respStat">Price in the response<span class="big-num" id="respPrice">—</span></div>
        <div class="stat">Handler runs at request time<span class="big-num" id="runCount">0</span></div>
      </div>

<div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready. Pick a preset, or configure the handler and send a request.</span>
      </div>
      <p class="hint" id="hint">Try the "14: the $40 bug" preset: send, change the price, send again.</p>

preview

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