2.6 KiB
title, canary
| title | canary |
|---|---|
| renderToHTML | true |
renderToHTML renders a React tree to non-interactive HTML.
const stream = renderToHTML(reactNode, options?)
Reference {/reference/}
renderToHTML(reactNode, options?) {/rendertohtml/}
You can call renderToHTML to render a non-interactive tree of React components to HTML.
By default, it supports shared components and built-in components.
Server Components are only allowed if used in a React Server environment (e.g. in Server Actions).
You can also use it during Client-Side Rendering but only without Server Components.
When a <html> tag is rendered, renderToHTML will automatically add <!DOCTYPE html> doctype.
import { experimental_renderToHTML as renderToHTML } from 'react-dom/server';
const markup = await renderToHTML(<App />);
Parameters {/parameters/}
-
reactNode: A React node you want to render to HTML. For example, a JSX element like<App />. -
optional
options: An object for server render.- optional
identifierPrefix: A string prefix React uses for IDs generated byuseId. Useful to avoid conflicts when the markup is embedded in or combined with other markup that is rendered by React. - optional
onError: A callback that fires whenever there is a server error. By default, this only callsconsole.error. If you override it to log crash reports, make sure that you still callconsole.error. This is different to the rejection reason of the created Promise since it'll include the parent component stack. - optional
signal: An abort signal that lets you abort rendering. The original Promise will reject.
- optional
Returns {/returns/}
renderToHTML returns a Promise that will resolve with the HTML string of the rendered React tree.
Caveats {/caveats/}
- Will throw when Client APIs (e.g.
useStateoruseEffect) are used.
Usage {/usage/}
Rendering a React tree as an Email {/rendering-a-react-tree-as-an-email/}
Await the call of renderToHTML :
import { experimental_renderToHTML as renderToHTML } from 'react-markup';
import EmailTemplate from './my-email-template-component.js'
async function action(email, name) {
"use server";
// ... in your server, e.g. a Server Action...
const htmlString = await renderToHTML(<EmailTemplate name={name} />);
// ... send e-mail using some e-mail provider
await sendEmail({ to: email, contentType: 'text/html', body: htmlString });
}