I did look through the similar questions and found this one, but the answer there isn't, at least by itself, dynamic enough for my needs.
Similar to that question, I am attempting to put together a multi-tenant application with a different skin per property. However, the answer given in the above question assumes that the various skin resources can be hard-coded into the application. That would be fine if we were talking about 2 or 3 skins, but my application will need to support dozens at launch and probably tens of thousands in its lifetime (each property can create multiple skins for different campaigns).
I have an API where I can request the skin, which is currently a long string of HTML with a token embedded indicating where the application contents should be rendered into the skin (e.g. {{body}}).
One of the things I'll need to do is inject some <link> tags into the <Head> element to pull in some external CSS. If React.Fragment supports attributes (like __dangerouslySetInnerHTML), I haven't been able to figure out how. If it's possible, that might be one way.
I'll run into the same problem when I want to inject some pre-application and post-application content into the body of the page, too.
Since I want the skin to be rendered server-side on the first request and then be static until the tab is closed, it makes sense to do this in pages/_document.js. After that, I'm kind of lost for what to do next. Parsing the string that contains the skin content is easy enough, but how do I intermingle that raw HTML with React components?