renderToStaticMarkup

renderToStaticMarkup renders a non-interactive React tree to an HTML string.

const html = renderToStaticMarkup(reactNode)

Usage

Rendering a non-interactive React tree as HTML to a string

Call renderToStaticMarkup to render your app to an HTML string which you can send with your server response:

import { renderToStaticMarkup } from 'react-dom/server';

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
const html = renderToStaticMarkup(<Page />);
response.send(html);
});

This will produce the initial non-interactive HTML output of your React components.

Pitfall

This method renders non-interactive HTML that cannot be hydrated. This is useful if you want to use React as a simple static page generator, or if you’re rendering completely static content like emails.

Interactive apps should use renderToString on the server and hydrateRoot on the client.


Reference

renderToStaticMarkup(reactNode)

On the server, call renderToStaticMarkup to render your app to HTML.

const html = renderToStaticMarkup(<Page />);

It will produce non-interactive HTML output of your React components.

Parameters

  • reactNode: A React node you want to render to HTML. For example, a JSX node like <Page />.

Returns

An HTML string.

Caveats

  • renderToStaticMarkup output cannot be hydrated.

  • renderToStaticMarkup has limited Suspense support. If a component suspends, renderToStaticMarkup immediately sends its fallback as HTML.

  • renderToStaticMarkup works in the browser, but using it in the client code is not recommended. If you need to render a component to HTML in the browser, get the HTML by rendering it into a DOM node.