Inline client components inside the initial document request

[blittle]

Before any client script tags are downloaded, the full document has to finish streaming. And a separate script tag has to download and execute. We should explore ways to examine the RSC stream (regex or buffer?) to inline preload script tags, so that they can immediately start being downloaded by the browser.

[frandiox]

In theory, this should be already happening because we use bootstrapScripts and bootstrapModules from React to send our entry-client.tsx logic early in the stream. Then, that logic should be reading the flight response inlined in the document and start preloading client components asap. This might be broken in practice, though.

Inspecting the response, these are the detected modules passed to React SSR streaming (in dev):

{
  bootstrapModules: [ '/@vite/client', '/@shopify/hydrogen/entry-client' ],
  bootstrapScripts: []
}

However, I see that React is still streaming a bunch of SSR first, then these script tags, and then anything async that comes from the rest of RSC:

...</body></html><script type="module" src="/@vite/client" async=""></script><script type="module" src="/@shopify/hydrogen/entry-client" async=""></script><meta data-flight="J13:[&quot;$&quot.......

I would have expected that the bootstrapModules are sent even earlier, but perhaps they have good reasons to delay it?