I am working on a 2-year-old project that uses TS, Nextjs and styled components. We have around 120 components, most of them using dynamic styling using interpolation functions, and made sure we followed all the instructions outlined both in the NextJS and styled-components documentation in order to support SSR, such as this one (creating a custom document file, and declaring styled components outside the class/functional component itself).
However, we've been having a poor development experience, especially after compiling the project and loading the app onto the browser for the first time. Almost every page takes in average more than 30s to load (the amount of time is really inconsistent though, after many reloads the least I could get was roughly 15s).
After running the profiler many times, I noticed there was a really high number of calls to the insertRule and insertBefore functions from the styled components library. (green and bisque color at the bottom of the image). Sometimes adding up to a staggering 40+s of scripting time.
I am not quite sure if this is expected in dev mode, and we can put up with this for now since this happens only when we reload the page directly. However we have the feeling that this is probably an error in our implementation or configuration. So far, I have not found anything similar to this situation except for github issues closed 2 years ago and performance issues on styled-components already addressed as well.
Is there a way to improve this loading time?
NOTE I am not posting code snippets just yet since I am not sure what files could be relevant. If you need to take a look at specific files let me know and I will be more than happy to share them with you.
EDIT I left the project around 1 month ago and I can no longer provide code snippets nor give further updates on this issue. I am leaving this question here anyway in case someone else finds it useful or comes up with a good solution (for the workaround we took, please see comments below).