[Next.js 14 / React 18] How to migrate from renderToStaticMarkup method on the Client side?

[BorysShulyak]

Summary

Based on the React documentation, version 18 has limited renderToStaticMarkup api.

We use this method on the client side for emails rendering and it doesn't work after upgrading to Next.js v14.x.x. So it is blocker for the package updates.

Here we have a well described related issue. It is already closed, but many people still could not deal with replacing this method on the client side.

Could you provide the migration guide for renderToStaticMarkup method on the client side, please?

Additional information

Related questions:
- https://github.com/reactwg/react-18/discussions/22#discussioncomment-1153918
- https://github.com/vercel/next.js/issues/57669#issuecomment-1810105432

Example

https://codesandbox.io/p/sandbox/busy-bohr-xyz6rn?file=%2Fapp%2Fpage.tsx%3A15%2C1

[mattiaz9]

if it could help, this is how I fixed renderToString:

async function simpleRenderToString(element: React.ReactElement) {
  const container = document.createElement("div")
  const root = ReactDOM.createRoot(container)
  root.render(element)

  return new Promise<string>(resolve => {
    setTimeout(() => {
      resolve(container.innerHTML)
    }, 100)
  })
}

[abraao31]

Yeah, it worked for me too. thx

[BorysShulyak]

I’ll try, thank you!

[icyJoseph]

While it is not always possible, you can use portals for most cases I think.

"use client";

import { useEffect, useState } from "react";
import { createPortal } from "react-dom";

export default function Home() {
  const [host, setHost] = useState<HTMLElement | null>(null);

  useEffect(() => {
    const element = document.createElement("div");

    setHost(element);
  }, []);

  return (
    <div>
      {host && createPortal(<p>Hello world</p>, host)}

      <button
        onClick={() => {
          console.log(host?.innerHTML);
        }}
      >
        Print HTML to console
      </button>
    </div>
  );
}

[hughlv]

This works for me:

  const renderToString = async (element: React.ReactElement) => {
    const container = document.createElement('div');
    ReactDOM.render(element, container);
    await new Promise(resolve => setTimeout(resolve, 100)); // wait for the rendering to complete
    const html = container.innerHTML;
    root.unmount();
    return html;
  };

The solution I mentioned in previous issue #57669 does not work well.

[yakovenkomax]

// clientRenderToString.tsx

export const clientRenderToString = (element: React.ReactElement): Promise<string> =>
    new Promise(resolve => {
        const container = document.createElement('div');
        const renderCallback = () => {
            resolve(container.firstElementChild?.innerHTML || '');
        };
        
        ReactDOM.createRoot(container).render(<div ref={renderCallback}>{element}</div>);
    });

// useClientRenderToString.ts

type UseClientRenderToString = (
    input: React.ReactElement | React.ReactElement[],
    deps?: any[]
) => string[];

export const useClientRenderToString: UseClientRenderToString = (input, deps = []) => {
    const [htmlStringList, setHtmlStringList] = useState<string[]>([]);
    const elementList = Array.isArray(input) ? input : [input];
    
    useEffect(() => {
        (async () => {
            const markupPromises = elementList.map(clientRenderToString);
            const markup: string[] = await Promise.all(markupPromises);
            
            if (!setHtmlStringList) {
                return;
            }
            
            setHtmlStringList(markup);
        })();
    }, deps);
    
    return htmlStringList;
};

// usage

// single element
const [singleElementMarkup] = useClientRenderToString(<Text value="world" />);

// multiple elements
const multipleElements = ["some", "other", "text"].map((text) => (
    <Text value={text} />
));
const multipleElementsMarkup = useClientRenderToString(multipleElements);

Example:

https://codesandbox.io/p/sandbox/clientrendertostring-lw8zkc

[cmdcolin]

this (and other answers) appears to try to not use flushSync, but https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code recommends doing so

[cmdcolin]

random other note: the method from https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code puts > and stuff in place of > due to reading innerHTML from dom. so, there could be reasons for not using that...

[yakovenkomax]

this (and other answers) appears to try to not use flushSync, but https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code recommends doing so

From docs:

The flushSync call is necessary so that the DOM is updated before reading its innerHTML property.

In my solution I use ref callback to make sure the innerHTML is accessed after the render, so it should work the same way. Unfortunately, I can't recall why flushSync didn't work for me, but you can easily modify the solution to use it instead.

[yakovenkomax]

random other note: the method from https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code puts > and stuff in place of > due to reading innerHTML from dom. so, there could be reasons for not using that...

I guess this is connected to the MDN article on innerHTML, but it was from an example about setting innerHTML, not reading.