What are the relevant configuration options when injecting a statically-rendered Vite page in another arbitrary page?
We have prototyped a statically-bundled microfrontend architecture based on Vite. I therefore want to establish the best possible Vite-bundling approach for our architecture to ensure we don't have problems down the road.
However I'm not confident of the vocabulary to describe issues and therefore identify the proper Vite feature sets to mitigate compatibility problems from our approach.
Vite experts: Can you help me correctly name the issues around embedding 'guest' Vite SSR output inline in a 'host' page? Can you indicate the relevant Vite configuration options and plugins we should consider to mitigate those issues?
ARCHITECTURAL APPROACH
We place 'guest' React-based HTML pages that were statically server-side-rendered by Vite straight in the body of a 'host' HTML page. The rest of the 'host' page, including the page's own javascript, is already templated and built through a different technology.
The Vite-bundled SSR string is functional as a (minimal HTML5) page on its own. It references its own bundled resources (JS, CSS, images) via inline tags using a predictable base URL. It can be previewed and tested fully independently. There is no requirement for it to share dependencies with its host page.
In our experiments so far, the minimal integration - placing that statically-rendered 'guest' HTML string inline in the 'host' page - works immediately as a microfrontend. The microfrontend looks and behaves just the same when injected in this way.
However, I expect Vite/Rollup experts can anticipate compatibility problems that we might be storing up for ourselves which we will only discover when we roll out to different hosts, or when have multiple such microfrontends in the same page.
This could be, for example, because of the way vite uses globals to manage javascript module namespaces, the way it names files, references React or other globals under the hood, or the way other frameworks' tooling is poorly scoped and likely to interfere unless we adopt the proper Vite config for our case.
Probably Vite expects to 'own' the page unless we instruct it otherwise, but I'm not sure what options we should use to tell it to uniquely and narrowly-scope everything it bundles.
We will integration-test every deployment of our microfrontend to the max, and can intervene to fix specific issues as we encounter them, but it would be best to use the most compatible Vite feature sets to start with.
SPECIFIC QUESTIONS
What obvious forms of failure should we anticipate from this static SSR injection strategy when bundling through Vite, especially from improperly-isolated javascript and other resources in the page? Or is this scenario already anticipated in defaults?
If there are anticipated issues, what Vite or Rollup options should we be considering to mitigate them - e.g. configuration or plugins that will bundle modules and DOM elements with suitable unique names and isolation in all the right places?
Is there established terminology for this embedding pattern and (therefore) a configuration we can use?