It's similar to what https://github.com/FormidableLabs/react-ssr-prepass and others like https://github.com/kmoskwiak/useSSE rely on (e.g. a real or simulated pre-render pass to hoist certain work and then actually send it already digested into SSR as initial props)

In general, this kind of pattern should become even more of an edge-case, as with RSC you could fetch/do async stuff anywhere and Next.js would attempt to deduplicate the requests.

However, if you do need to render something static (as your example shows, but not pre-rendering your own app itself), you might be able to work around it by dynamically importing ReactDOMServer (see forked stackblitz).

// app/precompile.js
const getData = async (component) => {
  const ReactDOMServer = (await import('react-dom/server')).default;
  const staticMarkup = ReactDOMServer.renderToStaticMarkup(component);
  return staticMarkup;
};

export default getData;

// app/page.js
const STATIC_COMPONENT = <p>Static Component</p>;

export default async function TestPage() {
  // this works OK
  const prerenderStaticComponent = await getData(STATIC_COMPONENT);

  // this does not work (error)
  /**
   * Error: Objects are not valid as a React child (found: object with keys {$$typeof, filepath, name, async}). * If you meant to render a collection of children, use an array instead.
   */
  // const prerenderAClientComponent = await getData(PageWrapperClient);

  // this does not work (warning)
  /**
   * Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
   */
  // const prerenderAServerComponent = await getData(PageWrapperServer);

  return (
    <PageWrapperClient>
      <h3>This is a page with static markup</h3>
      <div dangerouslySetInnerHTML={{ __html: prerenderStaticComponent }} />
    </PageWrapperClient>
  );
}

But trying to render your actual tree of components will likely fail as they'll be client or server components and both cases will error out (not quite sure how Next.js internally is handling this to be able to render these new trees, if there's any webpack work involved and why it doesn't just work on its own)

Same problem here. My use case is rendering a page with various components into a static RSS feed using ReactDOMServer.renderToStaticMarkup.

I found this while trying to render a react component svg in a route.tsxhandler:

export async function GET(req: NextRequest): Promise<NextResponse> {
  const ReactDOMServer = (await import('react-dom/server')).default
  const component = <ReactComponent />
  const svg = Buffer.from(ReactDOMServer.renderToString(component))
  const png = await sharp(svg).flatten({ background: 'white' }).png().toBuffer()

  return new NextResponse(png, {
    status: 200,
    headers: { 'Content-Type': 'image/png' },
  })
}

Importing ReactDOMServer dynamically does fix this. So thank you – just wanted to share my usecase :-)

Thanks, dynamic import worked for me! My use case is to convert mdx to text to prepare my content for meilisearch, I think that use case is legitimate. Had to do something like this:

export async function toMeilisearch(markdown: string | undefined) {
	const { renderToString } = await import('react-dom/server')

	// from @mdx-js/mdx
	const content = await _evaluate(markdown ?? '', {
		...runtime,
		Fragment,
		remarkPlugins: [remarkGfm, remarkFrontmatter],
		development: false,
	})

	const rendered = renderToString(createElement(content.default))
	
	// from html-to-text
	return convert(rendered, {
		selectors: [
			{
				selector: 'a',
				options: {
					ignoreHref: true,
					uppercaseHeaderCells: false,
				},
			},
		],
	})
}

I was able to import

import ReactDOMServer from "react-dom/server.browser";

and use it on the server

Same problem building a sitemap.xml with dynamic urls imported from a database is my use case.

I have the same problem

#57631

Here's my solution to render jsx to string on both client and server on NextJS > 13 without having server component issue in import

// render-client.js

import ReactDom from "next/dist/compiled/react-dom/cjs/react-dom-server-legacy.browser.production";
export function renderToStringClient(element) {
  return ReactDom.renderToString(element);
}

// render-server.ts

export function renderToStringServer(element: any) {
  const ReactDOMServer = require("react-dom/server");
  const html = ReactDOMServer.renderToString(element);

  return html;
} 

// index.tsx

import { renderToStringClient } from "./render-client";

export function renderToString(JSXElement: JSX.Element) {
  const isServer = typeof window === "undefined";
  if (isServer) {
    const { renderToStringServer } = require("./render-server");
    // do your server stuff here
    return renderToStringServer(JSXElement);
  }
  // do your client stuff here
  return renderToStringClient(JSXElement);
}

chemiadel

wow

"use client";
// @ts-ignore
import ReactDom from "next/dist/compiled/react-dom/cjs/react-dom-server-legacy.browser.production";
import { SiRootme } from "react-icons/si";

export default function TestPage({}) {
  const html = ReactDom.renderToStaticMarkup(<SiRootme />);

  const json = JSON.stringify(["SiRootme", html]);

  console.log({ icon: json });
  return <></>;
}

I found this while trying to render a react component svg in a route.tsxhandler:

export async function GET(req: NextRequest): Promise<NextResponse> {
  const ReactDOMServer = (await import('react-dom/server')).default
  const component = <ReactComponent />
  const svg = Buffer.from(ReactDOMServer.renderToString(component))
  const png = await sharp(svg).flatten({ background: 'white' }).png().toBuffer()

  return new NextResponse(png, {
    status: 200,
    headers: { 'Content-Type': 'image/png' },
  })
}

Importing ReactDOMServer dynamically does fix this. So thank you – just wanted to share my usecase :-)

It does not work now: fails with the following message: Error: react-dom/server is not supported in React Server Components.

I found this while trying to render a react component svg in a route.tsxhandler:

export async function GET(req: NextRequest): Promise<NextResponse> {
  const ReactDOMServer = (await import('react-dom/server')).default
  const component = <ReactComponent />
  const svg = Buffer.from(ReactDOMServer.renderToString(component))
  const png = await sharp(svg).flatten({ background: 'white' }).png().toBuffer()

  return new NextResponse(png, {
    status: 200,
    headers: { 'Content-Type': 'image/png' },
  })
}

Importing ReactDOMServer dynamically does fix this. So thank you – just wanted to share my usecase :-)

This solution from @abiriadev worked for me.