DPU · Suspense streaming #
Demo app for Chrome’s Declarative Partial Updates (DPU) — the experimental HTML platform feature that lets a server stream out-of-order patches (<?start?> / <?end?> ranges and <template for="…">) so the browser can replace Suspense fallbacks with resolved content without JavaScript.
React Suspense streaming normally relies on inline scripts to swap fallbacks. This app uses an experimental React build that emits native DPU markers instead. With Chrome’s flag on (and JS off), those markers are what make the loading UI resolve — not client-side React.
Requirements: Chrome DPU #
DPU is available for testing from Chrome 148+ behind an experimental flag:
- Open
chrome://flags/#enable-experimental-web-platform-features - Set Experimental Web Platform features to Enabled
- Relaunch Chrome
- Run this app and open it in that browser
Without the flag, fallbacks may never be replaced when JavaScript is disabled. With JS on, React can still hydrate and swap as usual.
See the Chrome for Developers post and the WICG explainer for the platform APIs (<?marker?>, range pending UI, <template for> patching).
Verify DPU (JS off) #
Every page includes a live probe in the layout (DpuSupportBanner):
- Disable JavaScript in Chrome
- Reload any route
- Wait a moment — “Checking DPU support…” should become “DPU works here”
If the loading text never changes, native DPU is not applying the stream in this environment.
Setup #
pnpm install
pnpm dev
Open the URL printed by Waku (usually http://localhost:3000) in a Chrome build with the flag above.
| Script | Description |
|---|---|
pnpm dev |
Dev server |
pnpm build |
Production build |
pnpm start |
Serve production build |
pnpm typegen |
Regenerate router types |
Examples #
The root layout uses render: 'dynamic' so every route streams HTML at request time. Example pages wrap async server components in <Suspense> so the stream can flush fallbacks, then patch in resolved UI via DPU.
| Route | What it shows |
|---|---|
/basic |
One boundary around a slow server component with a server-action counter |
/parallel |
Sibling boundaries that resolve independently |
/nested |
Outer shell streams, then inner content inside it |
/out-of-order |
Fast panel streams before a slower sibling finishes |
/suspense-list |
unstable_SuspenseList coordinating reveal order (revealOrder="forwards") |
Stack #
- Chrome Declarative Partial Updates (experimental web platform features)
- React (experimental CSB build that emits DPU markers /
unstable_SuspenseList) - Waku + Vite
- Tailwind CSS v4
- React Compiler (Babel preset)
The CSB React tarball omits some cjs/*react-server* / compiler-runtime files. pnpm install runs scripts/patch-react-fork.mjs to copy vendored shims into node_modules.