Next.js Cache Components — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Watch a route decide: shell, cache, or stream</h1>
    <p class="pg-sub">
      This is a <b>model</b> of how Next.js's Cache Components decide what goes in the prerendered static shell
      versus what streams at request time — not a running Next.js server. Pick a rendering model, then simulate
      a visit to a blog page with three pieces: a static header, a cached "recent posts" list, and a
      cookie-dependent "your theme" panel.
    </p>

<div class="banner info show">
      Simulated model — walks the documented rendering rules in plain JS. No real server, no real request. 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">Rendering model</span>
          <div class="seg" id="modelSeg">
            <button type="button" aria-pressed="true" data-val="cc">Cache Components (16.x)</button>
            <button type="button" aria-pressed="false" data-val="prev">Previous model</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶️ Simulate a visit</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <p class="hint" style="margin-top:8px">
        Both models render the same page: a static header, a "recent posts" list cached with <code>use cache</code>,
        and a "your theme" panel that reads <code>cookies()</code>.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Route: <code>/blog</code></div>
      <div class="route" id="route">
        <div class="block" data-block="header"><span class="ico">🧱</span>Header<div class="tag" data-tag="header">idle</div></div>
        <div class="block" data-block="posts"><span class="ico">📰</span>Recent posts<br><small>use cache</small><div class="tag" data-tag="posts">idle</div></div>
        <div class="block" data-block="theme"><span class="ico">🍪</span>Your theme<br><small>reads cookies()</small><div class="tag" data-tag="theme">idle</div></div>
      </div>

<div class="clock">
        <span>Shell reaches the browser: <b id="tShell">—</b></span>
        <span>Full page done: <b id="tFull">—</b></span>
      </div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a model and simulate a visit.</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.