Scribd
Upload
11 views4 pages

renderToStaticMarkup - React

The document provides an overview of the React API function `renderToStaticMarkup`, which renders a non-interactive React tree to an HTML string. It describes the function's usage, parameters, and limitations, including that the output cannot be hydrated and has limited support for Suspense. The document emphasizes that this method is suitable for generating static content, while interactive applications should use `renderToString` instead.

Uploaded by

dungeon.dad87
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views4 pages

renderToStaticMarkup - React

The document provides an overview of the React API function `renderToStaticMarkup`, which renders a non-interactive React tree to an HTML string. It describes the function's usage, parameters, and limitations, including that the output cannot be hydrated and has limited support for Suspense. The document emphasizes that this method is suitable for generating static content, while interactive applications should use `renderToString` instead.

Uploaded by

dungeon.dad87
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

20/02/2025, 19:15 renderToStaticMarkup – React

v19

API REFERENCE SERVER APIS

renderToStaticMarkup
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

renderToStaticMarkup(reactNode, options?)

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] 1/4
20/02/2025, 19:15 renderToStaticMarkup – React

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.

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.

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


[Link]('/', (request, response) => {
const html = renderToStaticMarkup(<Page />);
[Link](html);

[Link] 2/4
20/02/2025, 19:15 renderToStaticMarkup – React

});

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.

PREVIOUS

renderToReadableStream

NEXT

renderToString

Copyright © Meta Platforms, Inc

uwu?

Learn React API Reference

[Link] 3/4
20/02/2025, 19:15 renderToStaticMarkup – React

Quick Start React APIs

Installation React DOM APIs

Describing the UI

Adding Interactivity

Managing State

Escape Hatches

Community More

Code of Conduct Blog

Meet the Team React Native

Docs Contributors Privacy

Acknowledgements Terms

[Link] 4/4

You might also like