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


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.


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

  • You need to import React-dom-server
<script src=""></script>
<script src=""></script>
<script src=""></script>
  • The definition of Welcome tag in Jsx
function Welcome(props) {
  return <h1>Hello, {}</h1>;
const myPage = <Welcome name="Hallo World" />;
const staticMarkup  = ReactDOMServer.renderToStaticMarkup(myPage);
  • The output has no react attribute (clean) (and cannot be hydrated).
  • Output:

Discover More
React - Server Side Rendering (SSR) - DOM Server

This page is server side rendering (SSR) in React as opposed to the browser rendering. The server side rendering (SSR) functionality in React can output two types of pages: (that will become dynamic...
React - Static Web Site Generation

How to generate a static pages from a React App.

Share this page:
Follow us:
Task Runner