Link to the code that reproduces this issue

https://github.com/G3EORG3E/multi-tenant

To Reproduce

1. build app
2. start app
3. see that resulting styles for page includes also styles of components that is not rendered in page

Current vs. Expected behavior

I am trying to implement multi tenant app. And each app instance can have different component depending on its configured theme. For example we can see I have a parent <Header/> server component that imports <MinimalisticHeader/> and <ModernHeader/> and decides which component to render depending on app theme.

Currently the page includes styles of both <MinimalisticHeader/> and <ModernHeader/> but only <ModernHeader/> is rendered in server component.

I would expect that the page would have styles only for components that are actually rendered in server component (at least when they are dynamically imported there) otherwise its not possible to build such apps with Next.js, its unacceptable to have styles for every theme loaded.

Edit: Additionally, I observed that the client components are also being added to the bundle. A mechanism to prevent this inclusion is necessary. This is unusable for bigger more complex apps.

Provide environment information

Not related to environment

Which area(s) are affected? (Select all that apply)

Lazy Loading, Webpack

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

No response