Client components are not loaded until all suspenses resolve in SSR

[hex2f]

Currently the framework implements streaming SSR which is then re-hydrated by fetching RSC from the __marz endpoint. I think ideally that I'd want to skip streaming SSR and instead render a single "frame" on the server, so the client still gets a server rendered HTML frame that is then hydrated by RSC. Not sure on this though, so if anyone else has any better suggestions please share in this thread!

[hex2f]

Example: if we have a component that simply awaits a 1 second timeout, and wrap it in , both the initial SSR stream and RSC stream will take 1s to finish, as shown in this waterfall image:

[hex2f]

For now, I came up with a workaround where I immediately cancel rendering after starting. This seems to work okay but it's definitely not ideal. Need to look into how other frameworks accomplish this 🤔 Perhaps start by rendering the RSC, then render it to HTML?

marz/framework/server/worker.tsx

Lines 81 to 84 in 3ea0f88

	// TODO: this is a temporary hack to only render a single "frame"
	const abortController = new AbortController()
	const ssr = await renderToReadableStream(mount, { signal: abortController.signal, onError() {} })
	abortController.abort()

[lubieowoce]

hey, i made this RSC framework thing, i might be able to help with something :)

one question - you mention "frames" in a bunch of places, wdym by that?

also:

[...] which is then re-hydrated by fetching RSC from the __marz endpoint.

AFAIK: ideally you wouldn't need a second request to do hydrate. the usual strategy for this (in both Next and MFNG, which i've copied for Tangle) is to inject the chunks of the RSC payload into the SSR stream, generally via inline <script> tags, then collect those into a ReadableStream on the client and do createFromReadableStream off of that. this gives you an element you can pass to ReactDOM.hydrate. it's a bit tricky but it lets you do it all in one request while maintaining streaming.