Ability to await the allReady promise

[rmarscher]

I see React has an allReady promise that can be used to wait for all content to render instead of sending the shell as early as possible.

https://react.dev/reference/react-dom/server/renderToReadableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation

Maybe there can be a setting in the waku context that middleware can update to turn on awaiting the allReady promise from the response stream? The Waku streamFromPromise function makes it inaccessible. After const stream = await promise;, we need to put stream.allReady somewhere that it can be accessed. I tried this.allReady = stream.allReady but that didn't seem to work to set a prop that was accessible at ctx.res.body.allReady. Maybe it requires extending ReadableStream.

To reproduce the streaming behavior, take the default create-waku template, edit the layout to have a suspense boundary:

          <Suspense fallback={<p>Loading...</p>}>
            {children}
          </Suspense>

in pages/index.ts, change the render to 'dynamic' and add await new Promise((resolve) => setTimeout(resolve, 10000)); in getData.

Now if you run the dev server and open in your browser, you should see "Loading..." for about 10 seconds and then the normal content.

If you use curl (curl -N http://localhost:3000), you'll see it do the same thing.

Now edit node_modules/waku/dist/lib/utils/stream.js and put await stream.allReady; in streamFromPromise after the const stream = await promise; line and restart the dev server. You will see that the server waits to send all of the html.

What's really interesting is it actually replaces the suspense content in the html when we use await stream.allReady:

<!--$--><div><h1 class="text-4xl font-bold tracking-tight">Waku</h1><p>Hello world!</p><section class="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4"><div>Count: <!-- -->0</div><button class="rounded-sm bg-black px-2 py-0.5 text-sm text-white">Increment</button></section><a class="mt-4 inline-block underline" href="/about">About page</a></div><!--/$-->

without awaiting, the html has this:

<!--$?--><template id="B:0"></template><p>Loading...</p><!--/$-->

[dai-shi]

The Waku streamFromPromise function makes it inaccessible.

Maybe it was a bad idea. Let me change the signature.

Found this comment too. It's better to not wrap ReadableStream on our end.

https://github.com/facebook/react/blob/6907aa2a309bdc47dc3504683159cb50b590eed8/packages/react-dom/src/server/ReactDOMFizzServerEdge.js#L193

[dai-shi]

Well, we need to wrap it anyways for some cases.

[dai-shi]

#1083