-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix interleaveWithNodeStream streaming flow to be compatible with React 18 api #4213
base: main
Are you sure you want to change the base?
Conversation
Thank you for working on this, I have no practical project for streaming testing at this point but I'd be happy to post a test release under a tag for people to try and report back |
Published under |
Oh, i really forgot about this pr. It's really unstable now. |
Of course! That's why it's a test build 👍 |
Hi @ignatiqq, I wrote a Transform stream implementation for handling server-side rendering of styled-components based on this PR. I noticed a couple issues with this PR due to updating the React 16 streaming approach to work with React 18 streaming:
I can submit my code as a separate PR, but these are the only three required changes to patch the bugs I noticed. |
@burnsdy You are right. This code is buggy. But the main reason i do not push any commits here. Becuase i find problem which i cant solve by myself here. The problem related to SSR error during new react 18 stream api. It means React will start hydrate page partially and we cant remove all "style" tags from server. After reading the instructions from React maintainers and paying attention to other CSS in JS libraries, the only solution that I could come up with at the moment is to use a script that moves the “style” tag behind the “root” component. But this solution is not perfect and has many trade-offs, such as: performance (both in the case of multiple tag styles, if there are not many "Suspense" on the page, and if there are many "Suspense" borders on the page, we will need to execute the script after processing the css every time and process it using the sc.rehydrate function) |
Do you have any solution for this yet @ignatiqq? |
@ignatiqq @quantizor #4327 should fix the empty styles and streaming seems to be mostly broken because of those |
As mentioned here - #3658
And here - #4211
New React "renderToPipeableStream" stream api decides how much HTML to send by itself and it’s not a fact that it can be valid, for example, the middle of the svg path, large base64 image or just a long text.
So in this pr I suggest you a solution to work compatible with the new react streaming api.