Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST
Start learning

React 19+ · Function

renderToStaticMarkup

Renders a non-interactive React tree to an HTML string, typically on the server. Its output cannot be hydrated, so use it for static markup rather than interactive applications.

How it works

Call this server API with a React node to synchronously produce an HTML string. The result is intended for non-interactive output, so it cannot later be hydrated; for interactive server-rendered applications, use streaming or the renderToString and hydrateRoot combination instead.

Syntax

const html = renderToStaticMarkup(reactNode, options?)

Parameters

NameTypeDescription
reactNodeReactNodeA React node to render as HTML, such as a JSX element like <Page />.
optionsobjectOptional server-rendering options. The documented option is identifierPrefix, a string prefix for IDs generated by useId.

Returns

An HTML string.

Key points

  • Converts a React tree into static HTML text rather than a DOM tree or interactive application.
  • The function accepts the React node first and an optional server-rendering options object second.
  • Pass JSX such as a page component instance as the input React node.
  • The return value is the serialized HTML produced from the supplied React tree.
  • Use identifierPrefix to distinguish generated IDs when multiple React roots share a page.
  • Configure a distinct ID prefix per root when static output contains useId-generated identifiers.
  • Use it in server code when the response needs initial, non-interactive markup.

Common mistakes

  • The generated markup is permanently non-interactive; do not use it as the HTML shell for an app that must attach client behavior.
  • If a component suspends, the function immediately emits the nearest Suspense fallback as HTML.
  • Avoid calling it for browser rendering; render into a DOM node when browser-side HTML is needed.

Example: Render a static page to HTML

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

function Page() {
  return <main><h1>About</h1><p>Static content.</p></main>;
}

const html = renderToStaticMarkup(<Page />);
console.log(html);

Renders a non-interactive page component into an HTML string for a server response or other static output.

When to use it

Server-rendered static pages

Generate static HTML for a server response.

Non-interactive HTML

Produce markup for content that does not need client-side React behavior.

Multiple-root output

Render multiple roots while preventing useId collisions.

  • renderToString
  • hydrateRoot
  • useId
  • renderToPipeableStream
  • renderToReadableStream

Source: renderToStaticMarkup – React. Checked 2026-10-15.