Engineering Core
ISB Vietnam's skilled software engineers deliver high-quality applications, leveraging their extensive experience in developing financial tools, business management systems, medical technology, and mobile/web platforms.
Besides SSR, we also have a newer concept, which is CSR. And today I will share about CSR (Client-Side Rendering).
This is also an important area of knowledge in web development.
The article will provide insights into how CSR works, its strengths, and its limitations.
Let's get started...
What is Client-side Rendering (CSR)
Client-side rendering (CSR) is a method in web development where the entire process of rendering the content of a webpage takes place in the user's browser (client) rather than on the server.
This means that when a user visits a website using CSR, the server only sends a basic HTML skeleton and the necessary JavaScript files to load the application.
The user's browser then takes responsibility for loading and rendering the actual content of the webpage.
This method is common in modern web applications, especially those using JavaScript frameworks like React, Angular, or Vue.js.
A SPA (Single-Page Application) is a type of web application that uses CSR.
How CSR Works:
1. Initial Request:
When a user visits a URL, the server sends back a simple HTML file, which typically contains just an empty <div> or <main> tag, along with the necessary CSS and JavaScript files.
This HTML page is usually very lightweight, as it doesn't contain much actual content.
The browser downloads these JavaScript files and then runs them.
2. Perform content fetching:
These JavaScript files are responsible for requesting additional data from the server (usually via an API) and rendering dynamic content into the DOM.
3. Render Content:
When the data is returned, JavaScript updates the Document Object Model (DOM) of the page, thereby rendering the content to be displayed to the user.
All processing and rendering of the web page takes place in the user's browser.
Advantages of CSR:
Smoother user experience.
Because the page does not need to be reloaded after each page transition, it helps improve user experience.
With the support of many UI Frameworks and smart designs of Designers such as loading, and skeleton animation. Helps users feel the website smoother.
Reduced Server Load.
By offloading rendering tasks to the client, CSR can reduce the processing burden on the server, as it does not need to generate the HTML for each request.
This solves the problem of cost and server load.
Disadvantages of CSR:
Less SEO.
CSR is not search engine friendly as search engine bots may not run JavaScript and therefore cannot render the content of the website.
Browser resource requirements.
Since rendering is done on the browser, it may require more resources from the user, especially on older or low-end devices.
Frameworks Using CSR:
-
- React.js is a JavaScript library developed by Facebook. It focuses primarily on building user interfaces (UI) through components.
- Vue.js is a JavaScript framework designed to simplify UI building.
- Angular is a framework developed by Google, you can use it to create SPA.
- Also Svelte, Ember.js, Backbone.js, Polymer.
Conclusion:
From the insights and knowledge gathered from various sources. I have told you what CSR is, its strengths and limitations.
With that knowledge, choose the right technology for your project.
Besides CSR and SSR, there are a few keywords related to this topic. Static Site Generation (SSG) and Incremental Static Regeneration (ISR).
With that knowledge, choose the right technology for your project.
Besides CSR and SSR, there are a few keywords related to this topic. Static Site Generation (SSG) and Incremental Static Regeneration (ISR).
Thank you and see you soon at the next post.