Suspensed parts of page and moving styles to top

[KoderFPV]

Hi,

We want to introduce streaming rendering and suspended components to our application.
And we cannot handle the hydration process well.

The library's documentation mentions the strategy of moving styles to head just before hydration. However in the case of suspended/streamed components, we are already in the hydration process, so how we can move those styles if even its possible?

Thanks

[theKashey]

There could be an option to inject a little piece of script after every injected style to move it to the top, but it likely will only cause extra re-renders and make things slow.

AFAIK streaming response should still wait for the stream to end before starting hydration as "opened tags should be closed".
If you are talking about React 18's "late hydration", then it's not based on pure HTML this library can handle.

[KoderFPV]

> There could be an option to inject a little piece of script after every injected style to move it to the top, but it likely will only cause extra re-renders and make things slow.

That might be the only option. I want to try. Fortunately, still, some of the styles will still be moved to the head from non-streamed/non-suspended part of the application before hydration.
@theKashey could you guide me a little bit, how can I do it? Do you think should I modify the createCriticalStyleStream function inside of the library, or can I modify the stream somehow during rendering? At the beginning, I would like to add after any injected <style>, single tag <script> with any JS, later I will put correct code to move styles.

AFAIK streaming response should still wait for the stream to end before starting hydration as "opened tags should be closed".
If you are talking about React 18's "late hydration", then it's not based on pure HTML this library can handle.

I mean components inside with async logic inside. We looking for INP (interaction to next paint) improvements. We wanna push the header, footer, and some other parts of the page, to be interactive (and move styles before hydration) and not be blocked for the heavier part of the app rendered later, after hydration.

• https://dev.to/roggc/react-18-streaming-ssr-with-suspense-and-data-fetching-on-the-server-how-to-39jh
• https://hackernoon.com/how-lesssuspense-greater-and-components-streaming-works-in-nextjs

[KoderFPV]

The solution was simpler than we though.
Each streamed component inside suspense has its hydration process, exactly as explained in the documentation for the whole application.

So, each streamed component, outside of lifecycle (means ever render/re-render) checks if any styles to move exist, if so, it moves them to head. If don't, do nothing.

We still developing streaming rendering so it's not tested on production yet, but so far so good ;)

beforeReactHydration launches after the component finally renders on the client.

[theKashey]

Wondering what calls the code that calls beforeReactHydration.