React DOM Server

Working of DOM Server in React

The following are the different ReactDOMServer methods that can use in the browser and on the server:

renderToString()

The React element is rendered to HTML. React returns a string. renderToString() method generates HTML onto the server and sends markup for quicker loading of pages. It also helps the search engines 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.  ReactDOM.hydrate() is similar to render(), except it is used to hydrate a container whose HTML content was rendered by ReactDOMServer. React will attempt to add event listeners to the markup that already exists. React attaches event handlers to it, which aids in the application's performance on the very first page load ReactDOMServer.renderToString(element)

ReactDOMServer.renderToString(element)

renderToStaticMarkup()

The difference between this method and renderToString() is that this one does not create the additional DOM attributes that React uses. When we use React as a static page generator, it helps. As a bonus, removing the undesirable attributes saves memory. We shouldn't use this method to make the markup more interactive on the client by putting React on it. In this case, the server uses renderToString() and the client uses ReactDOM.hydrate().

ReactDOMServer.renderToStaticMarkup(element)

Disadvantages of Server Side Rendering 

• It is quite expensive.
• It requires a lot of human resources for its setup. 
• It becomes difficult to implement. 
• Universal libraries are needed to enable SSR for the websites that use javascript framework.

Frequently Asked Questions

Q1) What is server-side rendering?

Ans: An application’s ability to convert HTML files on the server into a fully rendered HTML page for the client is known as server-side rendering (SSR). The web browser sends a request for information to the server, which respond immediately by sending the client a fully rendered page.
 

Q2) Why do we need a server?

Ans: A server is necessary to provide all of the services required across a network, whether for large organizations or individual internet users. Servers have a fantastic ability to centrally store all files and allow different users on the same network to access them at any time.

Q3) How does ReactDOM work?

Ans: ReactDOM is a top-level object that exposes a set of APIs for interacting with the browser DOM. It provides DOM-specific methods that can be used at the top level of your application and an escape hatch that you need to leave the React model.
 

Q4) Why is React server-side rendering?

Ans: React is server-side rendering because create-react-app (not just create-react-app, but any app that doesn't have SSR) renders your app on the client-side, which means the built .js file is downloaded first before the rest of the page is loaded. This slows down the initial load time and prevents some web crawlers from indexing the site. This is where React's server-side rendering comes in.

Key Takeaways

In this article, we learn the concept of ReactDOMServer and its uses for different requirements. We have also seen the methods to work on the ReactDOMServer.

If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here. 

Thank you for reading!