what is reactdom server?

In server-side rendering (SSR), a client-side app is rendered on a server and then sent to the client as a complete page. During the JavaScript bundle of the client, the Single Page Application operates normally. Crawlers that do not use JavaScript code can crawl between the contents of an app that uses server side rendering. By doing this, Search Engine Optimization and meta data can be delivered to social media platforms. The ReactDOMServer object allows components to be rendered to static markups. At Node servers, ReactDOMServer is generally used.

import ReactDOMServer from 'react-dom/server';
var ReactDOMServer = require('react-dom/server');

Browser and server use of ReactDOMServer:

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 />);

In the browser and on the server, the following methods are used:

renderToStaticMarkup()
renderToString()

There are some additional methods that can only be used on the server and cannot be used in the browser. The methods depend on a stream that exists only on the server.

renderToStaticNodeStream()
renderToNodeStream()

Working of Dom Server in React

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(Hypertext Markup Language) onto server and sending mark-ups for quicker loading of web pages. It also useful for  the search engines(SEO) to crawl between the web pages for Search Engine Optimization(SEO) related the work. When we  are call ReactDOM.hydrate() method on the node which has server rendered mark-up. React attaches the react event handlers to it which helps in the best performance of the web application at the very first web page load.

2.renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

This method is just like react renderToString, the only difference is that the additional react DOM( Document Object Model ) attributes are not created which is used internally by React. It useful when we use React like a Static web Page creating. The removing of the unwanted react attributes saves memory. We can should do not use react renderToStaticMarkup() function, when we are looking to enhance the mark-up to become more interactive by using React onto the client. In this case, react renderToString() function is used at the server and the react ReactDOM.hydrate() function at the client.

Conclusion

we saw the concept of react ReactDOMServer and how to use it for different requirements. We went through the ways to work on the react ReactDOMServer and described how it would help in the application of react ReactDOMServer.