React - Static Markup (renderToStaticMarkup)

About

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.

Example

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:

Powered by ComboStrap