Pros and Cons of Client-Side Rendering

Dec 19, 2019 • 6 Minute Read

Introduction

In this guide, I'll walk you through client-side rendering (CSR) in React.

A client-side rendered element is HTML content created by JavaScript. A few years back, JavaScript was used to do some basic DOM manipulations. Therefore, libraries like jQuery came into existence. But now it has become so powerful that we can build a complete UI system.

Today we can write HTML and CSS in JavaScript and render the page on demand, all thanks to client-side rendering.

Playing with React

React is one of the great JavaScript libraries used in the frontend. A React application consists only of one HTML page, which is index.html, and to create other HTML content, we use JSX. React moves all the content into one HTML file. This is known as Single Page Application, or SPA, where JavaScript handles the rendering logic. Every SPA framework uses its own routing to display HTML content on different pages or routes.

But if we talk about JSX, then a question arises.: "How does it work internally?"

JSX is first converted into plain JavaScript because browsers support only JavaScript. After that, JavaScript creates the HTML content and renders it on the user's screen.

I'll give you a brief idea of the internal structure of React in the following section, which will give you clarity on CSR.

Creating HTML with JavaScript

Below is a sample code which will give you an idea of how to create an HTML element with JavaScript.

      function elt(type, props, ...children) {
  let dom = document.createElement(type);
  if (props) Object.assign(dom.props);

  for (let child of children) {
    if (typeof child != string) dom.appendChild(child);
    else dom.appendChild(document.createTextNode(child));
  }
  return dom;
}
    

In the above snippet, I have written a function with three arguments: type, props, and children, with rest operator that will send any number of children.

The createElement() method of the document creates an element on the DOM.

      document.createElement("input");

The above piece of code will generate an input tag in HTML.

The appendChild() method of the document appends the created element to the block.

      let dom = document.crateElement("div");
let dom1 = document.createElement("input");
dom.appenChild(dom1);
    

The above code will output the following HTML content :

      <div>
  <input />
</div>
    

Now you can see perfectly how to create one tag under another tag using appendChild() method.

The createTextNode() method of the document helps you generate a string label on the DOM.

      let dom = document.crateElement("div");
let label = docuemnt.createTextNode("Name:");
dom.appenChild(label);
let dom1 = document.createElement("input");
dom.appenChild(dom1);
    

The above code generates the HTML, as follows :

      <div>Name:<input /></div>

Now you're ready to learn about the elt() method. You can generate the same HTML of the name label and <input /> under the <div> using elt() method.

      elt(
  "div",
  {},
  "Name",
  elt("input", {
    type: text,
    value: ""
  })
);
    

Output:

      <div>Name:<input /></div>

This is how to create an HTML element using JavaScript. Let's now take a look at the pros and cons of client-side rendering.

Pros of CSR

High Performance

CSR generates on-demand HTML. It will not refresh or re-render the whole page, as with regular HTML pages. It is just pretending to be a separate page, but it renders the content on a single page. This saves a lot of both computation power and RAM, so it gets quicker results than server-side rendering (SSR).

Speed

CSR generates the HTML required to be displayed. This means DOM only contains enough code which is expected to be displayed by the HTML content. So DOM can easily handle a chunk of elements with the hide and show events. Although DOM has to handle more code, it doesn't take much time to render. Due to lazy loading, CSR becomes much faster than server-side rendering.

Reusable components

With CSR, we can reuse UI components across multiple pages or routes without having to request the server each time. This enhances usability and on-page performance.

But on the other hand, there are some disadvantages of CSR which we will discuss below.

Cons of CSR

Slow at First

CSR loads the whole JavaScript the first time, then calls for API to get the data from the database and generate the HTML as per data. But loading the data for the first time takes a bit more time than server-side rendering.

SEO problem

SEO stands for search engine optimization. CSR requires a two-wave process for JS rendering and indexing in a browser, generally by Google.

The first wave requests the source code, crawls, and then indexes the presented HTML. But in CSR we don't have much of the HTML because it takes time to convert from JavaScript to HTML.

In the second wave, after all resources become available, the browser returns the additional support and index to the search engine. This is not a problem with server-side rendering because in server-side rendering, the HTML is available for the first time itself.

Caching Issue

Since the HTML is not available in the initial render, browsers cannot cache the HTML structure of the page. One way to avoid this issue is to cache the JavaScript, but this may prove to be costly as JavaScript files can take up a lot of space in the browser's memory.

Conclusion

CSR has multiple benefits over SSR, but there are some pitfalls we can't deny. But after the first load, it becomes very smooth and user-friendly. It gives high performance and high speed and doesn't take much RAM to run.

I hope this guide was very informative and a gateway to your client-side crusades.