Client-Side-Rendering : Server-Side-Rendering

Table of content

• Introduction
• What is SSR?
• What is CSR?
• Pros-Cons?
• When to use CSR?
• When to use SSR?

Introduction

Earlier, the website was used for content and text-based information generally. Most websites showed only static content, like companies' products, tools, jobs, and sales leads. The Server Side rendering was the only way to get the HTML page rendered on the browser. The servers were to make these HTML Documented pages available to the user whenever the user wants and thus need to load complete information again and again for each new request.

Nowadays, Web Development is gone to another level and consumed maximum Tech market as many application and web-based and as per the requirement and availability is converted into a mobile application using the same tech isn't it amazing? Sever application builds over the web for shopping, social media, banking solutions, online streaming platforms.

What is Server-Side-Rendering?

In SSR, when a user makes a request for the webpage, the server prepares an HTML page by fetching user request-specific data and sends it to the user's browser over the internet. the Browser then Render the HTML page and compile the javascript for the web page.

This entire work by the server and the browser can take up to several milliseconds. But there is a problem in the whole process as it makes slow user Interactions with the website, as a user when requesting for another page within the same website server repeats the whole and it sucks.

This results in increased load on the server and bandwidth consumption over the internet.

What is Client-Side Rendering?

Client-Side-Rendering is a New Approach to rendering the web pages of the website by the use of javascript and is faster than SSR in some aspects. May javascript Frameworks like React, Angular have out-of-the-box CSR facility.

In CSR, the javascript file is responsible for rendering the DOM elements of the website and the fun and the most amazing part is that without re-rendering the entire DOM Tree the CSR re-renders or update only updated Dom Elements inside the DOM Tree.

They use Virtual DOM, where the only state updated DOM elements are only re-rendered not the complete webpages' DOM Tree.

Today, Angular and React.js are some of the best examples of libraries used in client-side rendering.

Pros-Cons?

SSR PROS and CONS:

• PROS

  • Better SEO
  • Faster initial Page Load
  • Great for static sites.

• CONS

  • Slow rendering
  • Complete Re-rendering
  • Not God User Interactions

CSR PROS and CONS:

• PROS

  • Rich User Interaction
  • Fast Rendering
  • No Repeted Re-rendering ( Virtual DOM )

• CONS

  • Not Good SEO
  • Time to load initially.
  • Lot of dependency on other libraries.

When to use CSR?

This is an important aspect of any tech stack that when to use what?

• SSR can be used where the need for the User-Interface is low or demands static pages.
• Less Dynamic Content.
• Need for Rich SEO usually for blogs and information.
• Documentation instead of complex user interaction and information transfering.

When to use SSR?

• An application has a very complex UI with many features and functionalities.
• An application has large and dynamic data.
• Write preference of the site is more than reading.
• The focus is on rich sites and a huge number of users.

Make your decision wisely.

Thanks for Reading the Blog.
Hope you Like it.
Happy Coding!

Comments

[Thorsten Hirsch]

Actually there are also things in-between CSR and SSR like partial SSR for fast re-rendering.