React - Static Markup (renderToStaticMarkup)

This page is about the creation of page with static markup - ie only HTML element without any React properties or react library.

This is then not a server-rendered markup and the page then doesn't need to be hydrated. This is same output than the server-rendered markup (the ToString function) but without any react attribute.

To generate static markup, the function ReactDOMServer.renderToStaticMarkup(element) is used.

• The definition of Welcome tag

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const myPage = <Welcome name="Nico" />;
const staticMarkup  = ReactDOMServer.renderToStaticMarkup(myPage);

• The output has no react attribute (clean) (and cannot be hydrated).

console.log(staticMarkup);

• Output: