React DOM Server

Juhi Sinha
Last Updated: May 13, 2022

Introduction

Server-side rendering (SSR) is a technique for loading JavaScript from website onto the server. The ReactDOMServer object enables you to render components to static markup. Typically, it’s used on a Node server.

 

When a page is requested by humans or search engine web crawlers, the SPA continues to function normally while the client's JavaScript bundle takes over. Even crawlers that don't use JavaScript code can parse the content of a server-side rendered app. This helps in Search Engine Optimization as well as the delivery of metadata to social media platforms. 

 

So, let’s learn about ReactDOMServer in detail.

What is ReactDOMServer?

We can render components to static markup using the ReactDOMServer object (typically used on node server). This object is basically used for rendering on the server.
 

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

 

Usage of ReactDOMServer on the browser and the server

In the browser:

 

ar React = require('react');
const ReactDOM = require('react-dom');
class Blog extends React.Component
{
render()
{
return <div>Hello</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>Hello</div>;
}
}
ReactDOMServer.renderToString(<Blog/>);

 

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!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think