Nuxt SSR streaming — route rule & response-timeline playground

<div class="pg">
    <h1 class="pg-title">🎮 SSR streaming: who streams, who buffers</h1>
    <p class="pg-sub">
      A <b>model</b> of Nuxt's response timeline — there's no real server here — built from the
      documented fallback rules. The route picker underneath is real lookup logic: it checks each
      route's rules against the same six-rule list the article covers.
    </p>

<div class="panel-label"><span class="n">1</span> Pick a route and send the request</div>
    <table class="route-table" id="routeTable">
      <thead><tr><th>Route</th><th>routeRules</th><th>Result</th></tr></thead>
      <tbody>
        <tr data-route="/" data-rules="">
          <td>/</td><td>(none)</td><td><span class="pill pill-stream">streams</span></td>
        </tr>
        <tr data-route="/pricing" data-rules="cache">
          <td>/pricing</td><td><code>{ cache: {...} }</code></td><td><span class="pill pill-buffer">buffers</span></td>
        </tr>
        <tr data-route="/old-docs" data-rules="redirect">
          <td>/old-docs</td><td><code>{ redirect: '/docs' }</code></td><td><span class="pill pill-buffer">buffers</span></td>
        </tr>
        <tr data-route="/landing" data-rules="isr">
          <td>/landing</td><td><code>{ isr: 3600 }</code></td><td><span class="pill pill-buffer">buffers</span></td>
        </tr>
        <tr data-route="/catalog" data-rules="swr">
          <td>/catalog/**</td><td><code>{ swr: 300 }</code></td><td><span class="pill pill-buffer">buffers</span></td>
        </tr>
        <tr data-route="/print" data-rules="noScripts">
          <td>/print/**</td><td><code>{ noScripts: true }</code></td><td><span class="pill pill-buffer">buffers</span></td>
        </tr>
        <tr data-route="/legacy-app" data-rules="ssr-false">
          <td>/legacy-app/**</td><td><code>{ ssr: false }</code></td><td><span class="pill pill-buffer">buffers</span></td>
        </tr>
        <tr data-route="/checkout" data-rules="manual-off">
          <td>/checkout/**</td><td><code>{ streaming: false }</code></td><td><span class="pill pill-buffer">buffers (your choice)</span></td>
        </tr>
      </tbody>
    </table>
    <div class="btn-row" style="margin-top:10px;">
      <button class="btn primary" id="sendBtn">▶️ Send the request</button>
      <button class="btn" id="resetBtn">↺ Reset</button>
    </div>

<div class="panel-label" style="margin-top:14px;"><span class="n">2</span> Response timeline</div>
    <div class="timeline" id="timeline">
      <div class="bar shell" id="shellBar" style="width:0%">shell</div>
      <div class="bar body" id="bodyBar" style="width:0%"></div>
    </div>
    <div class="status" id="timelineStatus"><span class="dot info"></span><span>Pick a route above, then send the request.</span></div>

<div class="panel-label" style="margin-top:14px;"><span class="n">3</span> What if your own code sets a cookie late?</div>
    <p class="hint" style="margin-top:0">
      This models the real failure reported in
      <a href="https://github.com/manchenkoff/nuxt-auth-sanctum/issues/669" target="_blank" rel="noopener">nuxt-auth-sanctum issue #669</a>:
      an auth interceptor tries to set a cookie after the shell already flushed.
    </p>
    <div class="btn-row">
      <button class="btn bad" id="lateCookieBtn">Set a cookie after the shell flushes (streaming route)</button>
      <button class="btn good" id="earlyCookieBtn">Set the same cookie before render starts</button>
    </div>
    <div class="output" style="margin-top:10px;">
      <div class="log" id="cookieLog">Pick one of the two above (works on a streaming route — try "/" first).</div>
    </div>

<div class="hint" style="margin-top:12px;">
      This models response timing and the documented fallback rules — not a running Nuxt/Nitro
      server. Real millisecond values depend on your app and network.
    </div>
  </div>

preview

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

Nuxt SSR streaming — route rule &amp; response-timeline playground

Nuxt SSR streaming — route rule & response-timeline playground