Learn about Server-Side Rendering (SSR) and Client-Side Rendering (CSR)

Tram Ho

1. Introduction

Hello guys, there are many rendering technologies in the world today such as: Server-side Rendering, Client-side Rendering, Pre-Rendering, Dynamic Rendering. Today, you and I will learn about Server-side Rendering and Client-side Rendering.

2. Concepts

Server-side Rendering:

Server-side Rendering is a way of rendering web applications on a server and then sending responses and content back to the user. This means that when a user opens a web application, a request is sent to the server that returns a response along with the content i.e. HTML, CSS, JavaScript and other content needed to render the page for the user. user. Here’s what will happen:

  1. User submits a request to a website
  2. The server inspects the resource, compiles, and prepares the HTML content after traversing the server-side scripts located in the page.
  3. This compiled HTML is sent to the client’s browser for rendering and rendering.
  4. The browser downloads the HTML and displays the web page to the user
  5. Then the browser downloads the Javascript (JS) and when it executes the JS it makes the page interactive

Client-side Rendering:

Client-side Rendering is a way of rendering web application content on the client (browser) side. That means when the user makes the initial request, the server returns a blank page or loading screen with some script. Here’s what will happen:

  1. The user submits a request to access web content on the browser.
  2. The server delivers static files (CSS and HTML) to the client’s browser upon the client’s first request to the web page.
  3. The client browser will download the HTML content first and then the JavaScript. These HTML files bind JavaScript.
  4. After the browser downloads the JavaScript, the content is dynamically generated on the client’s browser.
  5. Web content will be visible as customers navigate and interact with the website.

Advantages and disadvantages:

1. Server-side Rendering:

Advantages:

  1. Faster initial page load time
  2. Good for SEO
  3. Runs on most browsers, even disabling JavaScript works fine

Disadvantages:

  1. Frequent server requests: every user request must be sent back to the server for processing, which leads to performance issues.
  2. Slower overall load times
  3. Each time the user switches the page, the site has to reload many times

2. Client-side Rendering:

Advantages:

  1. The page only loads once
  2. Logic is transferred to the Client, so the Server is offloaded
  3. Reduce bandwidth

Disadvantages:

  1. Not SEO friendly
  2. Slower initial page load time.
  3. In most cases, an external library is required

Conclude:

Through this article, we hope that you will choose the most suitable option in your project.

Refer:

https://www.solutelabs.com/blog/client-side-vs-server-side-rendering-what-to-choose-when

Share the news now