Streaming

The 2-second result appears before the 5-second result even though it is written second. These delays are intentionally artificial. Loading fallbacks must be synchronous and cannot contain another Boundary.

import { Boundary } from "renku";

async function Result({ seconds }: { seconds: number }) {
  // A deliberate wait for this demo. Your data work goes here.
  await new Promise(resolve => setTimeout(resolve, seconds * 1000));
  return @{ <p>Ready after {seconds} seconds.</p> };
}

export default function Streaming() @{
  <section>
    <Boundary fallback={<p>Waiting for 5 seconds…</p>}
              error={<p>This result could not load.</p>}>
      <Result seconds={5} />
    </Boundary>
    <Boundary fallback={<p>Waiting for 2 seconds…</p>}
              error={<p>This result could not load.</p>}>
      <Result seconds={2} />
    </Boundary>
  </section>
}

Each patch has a following completion marker. The browser coordinator waits until the entire patch is parsed, replaces its fallback, and activates any complete client roots inside it. Nested boundaries publish after their parent becomes visible.

Existing client roots are disposed before their fallback is replaced.

If deferred rendering fails, the server sends the error representation. With JavaScript disabled, the shell and loading fallbacks remain; deferred content is not installed. Put essential documentation, navigation and recovery instructions directly in the shell.

Keep boundaries outside text-only elements such as textarea and title, inert templates, and foreign svg/math markup. The compiler and renderer reject unsupported parsing contexts rather than publish malformed regions. Open the timed streaming demo to inspect loading, arrival order and replay.