Generate initial HTML for an application response
Server-side rendering
React 19+ · Function
renderToString
Renders a React tree to an HTML string, typically on the server for the initial page response. Hydrate the resulting markup with hydrateRoot in the browser to make it interactive.
How it works
Call renderToString with a React node on the server to produce its initial HTML markup as a string. Send that markup in the server response, then use hydrateRoot in the browser to attach React behavior and make the generated HTML interactive.
Syntax
renderToString(reactNode, options?)Parameters
| Name | Type | Description |
|---|---|---|
reactNode | ReactNode | A React node to render as HTML, such as a JSX element like <App />. |
options | object | undefined | Optional server-rendering configuration object. |
options.identifierPrefix | string | undefined | Optional string prefix for IDs generated by useId; use the same value with hydrateRoot. |
Returns
An HTML string.
Key points
- It converts a React tree into serialized HTML suitable for inclusion in a server response.
- The intended workflow is server rendering followed by sending the resulting markup to the client.
- Hydration attaches React behavior to the server-produced markup rather than generating the initial page again.
- The required reactNode argument can be any React node, including a JSX element such as <App />.
- Use identifierPrefix when multiple roots could otherwise create colliding useId-generated identifiers.
Common mistakes
- If a component suspends, React immediately emits its fallback as HTML instead of waiting for suspended content.
- Use this API for server rendering rather than as a normal client-side rendering mechanism.
- When supplying identifierPrefix, reuse the identical prefix during hydration to keep useId-generated IDs consistent.
Example: Render and hydrate an application
import { renderToString } from 'react-dom/server';
import { hydrateRoot } from 'react-dom/client';
import App from './App';
const html = renderToString(<App />);
// Server: include `html` in the response body.
// Client entry point:
hydrateRoot(document, <App />);Renders the initial server HTML, then hydrates the same application in the browser to make it interactive.
When to use it
Send usable markup before client JavaScript finishes loading
Progressive enhancement
Prevent useId collisions with identifierPrefix
Multiple roots
Related
hydrateRootrenderToPipeableStreamrenderToReadableStreamprerenderresume