Provide a way to pass context to renderToStaticMarkup on the client

[gaearon]

See #14287 (comment) and #14182 (comment). This accidentally worked for a few releases but was a bug. However we might want to consider actually supporting this with an opt-in API.

[gaearon]

Generally, using SSR methods on the client is discouraged. Instead, it's better to render into a DOM node and then read innerHTML from it, for example. This also solves the context issue.

[nomcopter]

@gaearon what are the advantages of that approach? Does the browser provide some normalization or other advantage?

[gaearon]

It's unfortunate to bundle a whole server renderer on the page just to produce HTML since you can already produce HTML just with React DOM. Additionally, if you do it in your component, you still have the context etc, which is what the original complaint was about.

[sneko]

@gaearon using renderToStaticMarkup is pretty easy but I get the point of not bundling backend stuff. I tried the following function but unfortunately the container.innerHTML is always empty probably because the render() method is async (I deduce that since when looking at my browser console I can see the container element having content then).

What would be the best way to keep it simple to wait for the render? Should I use a MutationObserver or is there something simpler?

function frontendRenderToStaticMarkup(component: JSX.Element): string {
  const container = document.createElement('div');
  const root = createRoot(container);
  root.render(component);

  console.log(container.innerHTML);
  console.log(container.outerHTML);

  const html = container.innerHTML;

  console.log(container);
  console.log(html);
  console.log(root);

  // root.unmount();

  return html;
}

Thank you,

EDIT: note in my case I don't want it to be displayed to the user, that's why I try to do things isolated. Maybe a solution would be to mount my component into the page while being display: none but it looks hacky. Also, it needs some processing on variables so it would be kind of useless calculation if hidden. Maybe I could set a rendering condition, but I guess I would need to use useEffect() to know when I can really consider the DOM to be updated.

In my case I just wanted to reuse the JSX templating with some context like translations to generate HTML to be put into the clipboard.

EDIT2: I ended with a boolean state on the parent component to display the child, and within the child a useEffect getting the HTML from the top element thanks to a reference (the top element is hidden by default). Once done I call a callback so the parent can remove it from the DOM.