You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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?
Beta Was this translation helpful? Give feedback.
All reactions