<p dir="auto">Duplicate of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="976209179" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/22152" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/22152/hovercard" href="https://github.com/facebook/react/issues/22152">#22152</a></p>
<p dir="auto"><em>Originally posted by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/eps1lon">@eps1lon</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="981356869" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/22188" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/22188/hovercard?comment_id=907351596&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/22188#issuecomment-907351596">#22188 (comment)</a></em></p>
<p dir="auto">This is sort of a feature request, mostly because I haven't been able to make the current react tooling do what I need it to do.</p>
<p dir="auto">I have a massively huge article up on <a href="https://pomax.github.io/bezierinfo" rel="nofollow">https://pomax.github.io/bezierinfo</a> that consists of a single page of React-managed content, of which the bulk is "passive" HTML content. Paragraphs, headings, that kind of stuff. However, there are also active components with JS interaction bindings, and so I was trying to figure out a way to turn this article into a "react-managed by the client" into a "thin ui managed by the client, react-built offline" solution.</p>
<p dir="auto">I had a look at ReactDOMServer.renderToStaticMarkup, but while this generates all the HTML nicely, it also loses any and all JS bindings that are necessary to keep the UI working. As this is an ~800kb article not counting static assets (there's some 1.6MB of images on top of that), the notion of first loading the plain markup content and then loading the react bundle on top of that, to hook into the preloaded markup would be a terrible experience for people in the slightly-less-wealthy parts of the world.</p>
<p dir="auto">Is there some way to, or would there be a sense in developing a way to render React content to HTML "as much as possible" while preserving React's management of interactive UI components? Essentially, a solution in between <code class="notranslate">renderToString</code> and <code class="notranslate">renderToStaticMarkup</code>, to prevent as much data duplication between the pregenerated HTML and the react application itself? It seems that the heavy payload (in bytes, but certainly in client-side processing as well) incurred by using a fully react-managed bundle could be relieved significantly if "content that is guaranteed passive, regular HTML" could be serialized out as HTML with React hooking back into that code only for elements that require active management.</p>
<p dir="auto">(I have no idea how much work that would be, but I'm pretty sure it would help bring down the average page size down again, which on a global scale would save quite a lot of time and money, while allowing content to be loaded by people for whom parts of the internet are currently inaccessible due to load time and byte cost)</p>