Scribd
Upload
13 views

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
13 views

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
You are on page 1/ 4

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

https://react.dev/reference/react-dom/server/renderToStaticMarkup 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


app.use('/', (request, response) => {
const html = renderToStaticMarkup(<Page />);
response.send(html);

https://react.dev/reference/react-dom/server/renderToStaticMarkup 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

https://react.dev/reference/react-dom/server/renderToStaticMarkup 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

https://react.dev/reference/react-dom/server/renderToStaticMarkup 4/4

You might also like