How to render React on the Server (SSR) in Static Markup (renderToStaticMarkup)?

About

This page shows you how to render React in a static HTML page (known in React as static markup) - ie only HTML element without any React properties or React library.

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

Example

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

• You need to import React-dom-server

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom-server.js"></script>

• The definition of Welcome tag in Jsx

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

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

console.log(staticMarkup);

• Output: