Streaming par générateur asynchrone
Les générateurs asynchrones qui produisent du JSX s'écoulent en chunks à travers le renderToStream de bext. Chaque fragment produit est envoyé sur le réseau dès qu'il est disponible — ouvrez l'onglet réseau pour observer la réponse s'écouler sur environ 1 s.
Astuce
Déclarez renderingMode = "streaming" lorsque le composant racine est synchrone mais que ses enfants sont des générateurs asynchrones — le détecteur automatique ne voit pas les générateurs imbriqués. Si votre page utilise <Suspense>, l'import suffit à activer le streaming sans déclaration explicite.
Flux en direct
starting…
chunk 1 @ 17:00:48
chunk 2 @ 17:00:48
chunk 3 @ 17:00:48
chunk 4 @ 17:00:48
done.
// Async generator yields JSX chunks. When the JSX
// runtime sees an AsyncIterable in a child position it
// streams each chunk to the response without buffering.
// Explicit opt-in: root component is sync so the auto-classifier
// doesn't fire — generators in child position aren't detected.
export const renderingMode = "streaming";
async function* slowChunks() {
yield <p>starting…</p>;
for (let i = 1; i <= 4; i++) {
await new Promise(r => setTimeout(r, 200));
yield <p>chunk {i} @ {new Date().toISOString().slice(11, 19)}</p>;
}
yield <p>done.</p>;
}
export default function Page() {
return (
<div>
<h2>Live stream</h2>
<div>{slowChunks()}</div>
</div>
);
}