Streaming Time-sliced Rendering (STR)

[prince205927]

Goals

Deliver first paint 18–25 % faster on 3G by flushing HTML every 5 ms of server CPU.
Reduce server CPU by ~40 % on early exits (user navigates away before page finishes).
Provide a zero-breaking-change, opt-in rendering mode inside Next.js.
Ship a runtime < 2 kB that hydrates only the DOM ranges it receives, preventing double work.
Maintain full SEO compatibility (Google accepts chunked HTML; Bing fallback available).

Non-Goals

No response

Background

Current Next.js streaming waits for React Suspense boundaries. This leaves the browser idle while the server works. React’s renderToReadableStream already supports streaming; we only need a scheduler that yields every fixed CPU slice. Prior art includes React’s own unstable_scheduleCallback and Marko’s “async out-of-order” streaming, but no mature Node.js framework offers fine-grained time-slicing.

Proposal

Add experimental.str?: boolean and experimental.strBudget?: number to next.config.js.
Implement a new server renderer (packages/next/src/server/str-renderer.ts) that re-uses React’s streaming API but flushes on time budget instead of Suspense.
Each chunk carries a DOM-range ID so the client runtime can hydrate exactly the new subtree.
Cancellation wired to req.on('close') and Edge AbortSignal.
Estimated 300 LoC; gated behind the flag, fully tree-shaken when off.
I (GitHub @prince205927) am willing to author the code, tests, and docs.