RSC styles blink when Next is streaming
https://github.com/user-attachments/assets/3909fd1b-825f-40bf-a49a-62a74a79ce33
It's hard to see in the video without going frame by frame, but I understand what is happening.
This is on a very slow network, Nextjs with cacheComponents. Next is streaming in the HTML. As style tag are now right next to the component, you'd think this will work well. But what is happening, is that the last instance of a component will get the style tag. Making all other components unstyled until the last one comes in.
For example, in this video, my Container component adds padding around the page. There's one all the way at the bottom, thats where the style tag is. The video shows my page jumping all over the place, because (along others) the Container not being styled for a long time.
Source: styled-components/styled-components