CSS for non-rendered components gets added to the bundle
Unanswered
Serbian Tricolour Hound posted this in #help-forum
Serbian Tricolour HoundOP
Hi everyone! We're currently trying to move our project to NextJs with App directory.
We're using dynamic routing, because our site is highly modular, rendering different components in a single page based on the data from db.
We are styling each component by importing SCSS modules, and in parent components, we conditionally choose whether to render a component or not based on the data we got from the request. All of the components in question are rendered server-side and we would like to keep it that way.
The issue is, the css styles from components get added to the client bundle, even if they are not actually rendered. As soon as we import the component at the top, we can locate the CSS classes when inspecting the page, although the component itself is not in the markup.
(Example JSX:
CSS for both components gets sent to the client even if it wasn't rendered on the server at all)
Our site is highly performance-dependent, so we would like to send as little of unused CSS to the client as possible.
What we tried:
1. using dynamic(), lazy(), or Suspense on the component - all of those only work on client components, so applying those had no effect.
2. use CSS Hooks instead of modules - this has another issue for us, because all the components are added to the __next.push() script part of the page (for hydration, as I understand), it means that all the inline styles would get copied there as well, as many times as we are using the component, which bloats the html size significantly.
3. CSS-In-JS is currently also only supported for client components.
Can anyone please suggest a way for us to only send to client the CSS of the components that were actually rendered on the server?
We're using dynamic routing, because our site is highly modular, rendering different components in a single page based on the data from db.
We are styling each component by importing SCSS modules, and in parent components, we conditionally choose whether to render a component or not based on the data we got from the request. All of the components in question are rendered server-side and we would like to keep it that way.
The issue is, the css styles from components get added to the client bundle, even if they are not actually rendered. As soon as we import the component at the top, we can locate the CSS classes when inspecting the page, although the component itself is not in the markup.
(Example JSX:
{!!condition ? <Component1> : <Component2>}CSS for both components gets sent to the client even if it wasn't rendered on the server at all)
Our site is highly performance-dependent, so we would like to send as little of unused CSS to the client as possible.
What we tried:
1. using dynamic(), lazy(), or Suspense on the component - all of those only work on client components, so applying those had no effect.
2. use CSS Hooks instead of modules - this has another issue for us, because all the components are added to the __next.push() script part of the page (for hydration, as I understand), it means that all the inline styles would get copied there as well, as many times as we are using the component, which bloats the html size significantly.
3. CSS-In-JS is currently also only supported for client components.
Can anyone please suggest a way for us to only send to client the CSS of the components that were actually rendered on the server?