React - Static Markup (renderToStaticMarkup)
Table of Contents
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.
- You use React as a simple Static Web Generator.
- You can also create static page with dynamic content by pre-rendering server-rendered markup.
Articles Related
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: