Leaking client-components in multi-tenant websites

[jens-duttke]

I have several customers whose websites with different domains are all based on predefined components. The most of the components can be easily shared between the different websites.
However, there are also customised components that are only used on specific websites.

I have now realised that the customer-specific (client-)components are also present in the JavaScript bundle of the other websites.
During my research, I realised that all Platforms Starter Kit based (and Next.js) pages have the same problem.

Even the example pages mentioned on https://demo.vercel.pub/platforms-starter-kit have this problem:

There is the "globe" icon in the social media bar on the https://akoskm.com/ website:

It is not present on https://eda.hashnode.dev/:

However, if you search for the SVG code here, you will find that it is nevertheless included in the JavaScript code:

The same with the "Newsletter", this is present on the first website, but not on the others, but the code is still there:

Or another example:
Here, in the guides, the "Demo site" (demo.vercel.pub) and "Another site" (steven.vercel.pub) is linked as example using the demo platforms app.
While demo.vercel.pub has this banner:

It is not available on steven.vercel.pub, but the code for that is there:

This may not be a problem with such small, almost identical websites with a small number of components, but if I have relatively complex websites, like mine, with many customer-specific components, I see the problem that unnecessary code is transferred to the client, which causes unnecessary traffic and JavaScript processing on the client.

Pure client-side rendering with dynamically loaded components (similar to microfrontends) is out of the question for me, because the components should also be pre-rendered on the server side.

Does anyone have an idea how to prevent such leaking components?
Or is Next.js and the Platforms Starter Kit not suitable for larger multi-tenant sites?