Updated April 11, 2023
Introduction to ReactDOMServer
Server side rendering (SSR) is a famous technique which renders a client side single page app onto a server and after this it sends the complete page which was rendered earlier to the client. The SPA operates normally while the JavaScript bundle of the client takes over. Even the crawlers which don’t use JavaScript code can crawl between the contents of the app which uses server side rendering. This helps with the Search Engine Optimization and delivering the meta data onto the social media platforms. Rendering components to the static mark-ups is allowed by the ReactDOMServer object. Generally ReactDOMServer is used at the Node server.
import ReactDOMServer from 'react-dom/server';
var ReactDOMServer = require('react-dom/server');Usage of ReactDOMServer at the browser and the server:
In the browser:
var React = require('react');
var ReactDOM = require('react-dom');
class Blog extends React.Component
{
render()
{
return <div>EduCBA Trainings</div>;
}
}
ReactDOM.render(<Blog />, node);On the server:
var React = require('react');
var ReactDOMServer = require('react-dom/server');
class Blog extends React.Component {
render() {
return <div>EduCBA Trainings</div>;
}
}
ReactDOMServer.renderToString(<Blog />);The methods stated below are used at the browser and the servers:
- renderToStaticMarkup()
- renderToString()
There are some additional methods which are only used at the server and cannot be used at the browser environment. These methods are depending over a stream which is only present at the server.
- renderToStaticNodeStream()
- renderToNodeStream()
Working of Dom Server in React
Given below are the different methods of ReactDOMServer which can be used at the browser and the server:
1. renderToString()
ReactDOMServer.renderToString(element)The React element is rendered to HTML. A string is returned by React. renderToString() method is used for generating HTML onto server and sending mark-ups for quicker loading of pages. It also helps the search engines to crawl between the pages for Search Engine Optimization related work. When we call ReactDOM.hydrate() method on the node which has server rendered mark-up. React attaches the event handlers to it which helps in the better performance of the application at the very first page load.
2. renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)This method is just like renderToString, the only difference is that the additional DOM attributes are not created which is used internally by React. It helps when we use React like a Static Page Generator. The removal of the unwanted attributes saves memory. We should not use renderToStaticMarkup() method, when we are looking to enhance the mark-up to become more interactive by using React onto the client. In this case, renderToString() is used at the server and the ReactDOM.hydrate() at the client.
Examples of ReactDOMServer
Given below are the examples of ReactDOMServer:
Example #1
renderToString() method.
We have made 2 classes in index.js file “circle circle–greencircle” and “circle circle–cyancircle”.
<div
className="circle circle--greencircle"
style={{ "--someColor": "#ccff73" }}
/>
<div
className="circle circle--cyancircle"
style={{ "--some-color": "#3ef7eb" }}
/>
</div>And the styling of the content of these classes is taken care through styles.css file. The code generated by ReactDOMServer is also displayed in the output.
ReactDOM is imported using:
import ReactDOM from "react-dom";ReactDOMServer is imported using:
import ReactDOMServer from "react-dom/server";The files used to generate the code below:
index.js
import React from "react";
import ReactDOM from "react-dom";
import ReactDOMServer from "react-dom/server";
import "./styles.css";
const Examples = () => {
return (
<div>
<div
className="circle circle--greencircle"
style={{ "--someColor": "#ccff73" }}
/>
<div
className="circle circle--cyancircle"
style={{ "--some-color": "#3ef7eb" }}
/>
</div>
);
};
const Main = () => {
return (
<div>
<h1>Example of ReactDOMServer: </h1>
<div> (It is an example of renderToString() method)</div>
<Examples />
<hr />
<h1>ReactDOMServer is used to Generate the Code Below: </h1>
{ReactDOMServer.renderToString(<Examples />)}
</div>
);
};
ReactDOM.render(<Main />, document.getElementById("root"));styles.css
:root {
--pad: 2px;
}
body {
padding: var(--pad);
}
.circle {
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
width: 201px;
height: 201px;
margin-bottom: var(--pad);
}
.circle--greencircle {
background-color: var(--someColor);
}
.circle--cyancircle {
background-color: var(--some-color);
}Output:
Example #2
renderToStaticMarkup() method.
Render is imported using:
import { render } from "react-dom";ReactDOMServer is imported using:
import ReactDOMServer from "react-dom/server";Styling of the content in output is maintained through:
const styles = {
fontFamily: "Times",
textAlign: "center"
};The text that appears on clicking button-1 (i.e., Click to use render()) is maintained through:
document.getElementById("button-1").onclick = () => {
render(
<App message="It is Rendered using render()." />,
document.getElementById("root-1")
);
};And the text that appears on clicking button-2 (i.e. Click to use renderToStaticMarkup()) is maintained through:
document.getElementById("button-2").onclick = () => {
const element = ReactDOMServer.renderToStaticMarkup(
<App message="It is Rendered using renderToStaticMarkup()." />
);
document.getElementById("root-2").innerHTML = element;
};The content displayed on the button is maintained in index.html file through:
<button id="button-1">Click to use render()</button>
<div id="root-1"></div>
<button id="button-2">Click to use renderToStaticMarkup()</button>
<div id="root-2"></div>The files used to implement the code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React Based App</title>
</head>
<body>
<noscript>
Enable JavaScript to run application.
</noscript>
<button id="button-1">Click to use render()</button>
<div id="root-1"></div>
<button id="button-2">Click to use renderToStaticMarkup()</button>
<div id="root-2"></div>
</body>
</html>index.js
import React from "react";
import { render } from "react-dom";
import ReactDOMServer from "react-dom/server";
const styles = {
fontFamily: "Times",
textAlign: "center"
};
const App = props => (
<div style={styles}>
<h2>
{props.message} {"\u2725"}
</h2>
</div>
);
document.getElementById("button-1").onclick = () => {
render(
<App message="It is Rendered using render()." />,
document.getElementById("root-1")
);
};
document.getElementById("button-2").onclick = () => {
const element = ReactDOMServer.renderToStaticMarkup(
<App message="It is Rendered using renderToStaticMarkup()." />
);
document.getElementById("root-2").innerHTML = element;
};Output:
Conclusion
On the basis of the above article, we saw the concept of ReactDOMServer and how to use it for different requirements. We went through the ways to work on the ReactDOMServer and the examples described would help in the application of ReactDOMServer.
Recommended Articles
This is a guide to ReactDOMServer. Here we discuss the introduction to ReactDOMServer, working of dom server in react along with examples. You may also have a look at the following articles to learn more –
