Streaming Suspense

Async generators yielding JSX flow as chunks through bext's renderToStream. Each yielded fragment hits the wire as soon as it's produced — open the network tab to watch the response trickle in over ~1s.

Live stream

starting…

chunk 1 @ 14:04:56

chunk 2 @ 14:04:56

chunk 3 @ 14:04:56

chunk 4 @ 14:04:57

done.

Source

// 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.
async function* slowChunks() {
                yield starting…;
                for (let i = 1; i <= 4; i++) {
                                await new Promise(r => setTimeout(r, 200));
                                yield chunk {i};
                }
                yield done.;
}
export default function Page() {
                return (
                                
                                                Live stream
                                                {slowChunks()}
                                
                );
}