Is styled-components rehydration costly?

user_1965607 0
Viewed 671

I'm using nextjs for SSR. I'm using this technique to render styles on server side. So when DOM is downloaded it not just gets HTML but also all the CSS it needs to paint in a style tag.

Once the HTML is parsed it starts painting - good so far, the problem starts once JS is downloaded and parsed. Especially _app.js, styled-components deletes existing styles, reference.

How does this affect performance?

My consensus:

  • FCP and LCP will be delayed because of the repaint
  • With browser busy painting and repainting, main thread is blocked and might be unable to process user interaction, eventually resulting in framerate drop.

Does the same thing happen when route changes because it'll pull new JS files and compile and set styles. Is this the cost we have for styled-components?

styled-components next.js reactjs performance
1 Answers

Using Styled Components comes with its costs, its great for statically generated websites/applications but server side rendering is definitely not its forte. every update they try to enhance their performance in SSR by a few percents. This is definitely a known issue and the Companies like Atlassian are working to get over this bottleneck. Its the sole reason they are working on Compiled a CSS-in-JS that is focused on removing this issue by smartly accessing your code on compile time. Check out the official Documentation

and also checkout this wonderful article by Nathan on LogRocket dev about compiled and its origin

user_101621880
Related