renderToStaticMarkupLink for this heading

January 6, 2025 · View on GitHub

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

const html = renderToStaticMarkup(reactNode, options?)

Reference
- renderToStaticMarkup(reactNode, options?)
Usage
- Rendering a non-interactive React tree as HTML to a string

Reference Link for Reference

`renderToStaticMarkup(reactNode, options?)`Link for this heading

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

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

const html = renderToStaticMarkup(<Page />);

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

See more examples below.

Parameters Link for Parameters

reactNode: A React node you want to render to HTML. For example, a JSX node like <Page />.
optional options: An object for server render.
- optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when using multiple roots on the same page.

Caveats Link for 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.

Usage Link for Usage

Rendering a non-interactive React tree as HTML to a string Link for 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.

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.

PreviousrenderToReadableStream

NextrenderToString

no uwu plz

uwu?

Logo by@sawaratsuki1004