Client Side Rendering (CSR) vs Server Side Rendering (SSR)

While developing a web application or website from scratch, a developer has to make many decisions that can significantly impact performance and user experience, especially how the content is rendered on the view.

First, let's understand what rendering is.

What is Rendering?

Rendering can be defined as the process of converting code into an HTML format for users to interact with. For example, in React, rendering means converting components into HTML that can be displayed on the screen.

There are different ways to perform rendering.

Different Rendering Techniques

1. Client-Side Rendering (CSR) - In CSR, the rendering process occurs on the client side, i.e., the user’s browser.

2. Server-Side Rendering (SSR) - In SSR, the rendering process takes place on the server. The server generates the full HTML code and sends it to the client.

3. Static Site Generation (SSG) - In SSG, the pages are generated at build time, saved on the server, and served as static files whenever there is a request from a client.

4. Incremental Static Generation (ISG) - This type of rendering allows serving a mix of both static and dynamic content. Some pages are statically generated during build time, while others can be updated based on client demand.

In this article, we’ll mainly focus on CSR and SSR, their approaches, advantages, and factors to consider while choosing a rendering method.

Client Side Rendering (CSR)

It is relatively new technique that became popular when JavaScript libraries like React , Angular started using this.
In this technique, the content is rendered on the client side i.e. in browser with the JS rather than rendering the whole page on the server and then sending to the client.

Whenever client request a page , the server instead of sending the whole HTML with proper styling and functions , sends only a bare-minimal empty HTML file and links all the content in JavaScript files.

Some popular JavaScript libraries, like React and Angular, use Client Side Rendering (CSR).

CSR approach follows these steps:

1. When the client sends a request to the server, the server responds with a blank HTML page along with links to its CSS and JS files.

2. The browser downloads the HTML file first, followed by the CSS and JavaScript files, and parses this HTML code into a Document Object Model (DOM) tree.

3. After this, the browser starts applying all the styles and elements like text, images, etc., along with the JavaScript code to add dynamic content, such as data fetching through API calls.

4. Whenever the user interacts with the website, the browser updates the DOM on the client side without calling the server again using the JavaScript files downloaded on the client side.

Advantages of Client Side Rendering

1. Great for websites with more user interaction - CSR allows updating the website content dynamically without reloading the whole page, ensuring faster loading times. This makes it ideal for web applications that involve real-time content updates, such as online games and chat applications.

2. Less Server Load - CSR reduces the load on the server since most of the rendering is done on the client side. It also helps decrease server response time when handling multiple requests from different clients.

Disadvantages of Client Side Rendering

1. Less SEO-friendly - Since the server sends only a blank HTML file with links to JavaScript, it becomes difficult to properly index the web pages for better visibility. This makes it less suitable for websites that require higher visibility and better SEO.

2. Slower initial load time - Since the browser has to download all the files, including JavaScript, and render the webpage before displaying it, the process can be slower. Users might see a loader or a blank page for a few seconds before the content loads.

Server Side Rendering (SSR)

It is one of the oldest rendering techniques still in use today. Initially, websites were very lightweight and static, with almost no user interaction. All pages were stored on the server and served whenever there was a request from the client.
In server-side rendering, the server generates the HTML page, includes all the dynamic content requested by the user, and then sends the complete HTML page to the client.
The client directly serves this file in the view without running any client-side JavaScript code.

Every time a user visits a new route, a new page is requested from the server, even if there is only a small difference in the content of the pages.

Some popular frameworks like Next.js and Nuxt.js use Server Side Rendering (SSR).

SSR approach follows these steps:

1. The client sends a request to the server for a particular page.

2. The server gathers all the necessary content for the page, creates an HTML file, adds all the styling and content, and sends it back to the client as a response.

3. The browser receives a fully rendered page from the server on the initial load and then downloads the necessary JavaScript code.

4. The browser displays the content directly to the user without running any JavaScript code on the client side.

5. If the client requests a new page while interacting with the content, a new request is sent to the server for the new HTML page. However, for interactions like button clicks or form submissions, the client-side JavaScript will handle all updates without calling the server.

Advantages of Server Side Rendering

1. Consistent Performance - Since web pages are rendered on the server side and are independent of the client’s hardware, low-powered devices can quickly display fully rendered web pages.

2. Faster Load Time - In SSR, web pages are rendered on the server, which typically has more resources than the client browser, resulting in faster initial load times. Users can quickly interact with the web page, ensuring a better user experience.

Disadvantages of Server Side Rendering

1. Increased Load on Server - In SSR, the server is responsible for rendering web pages upon client request, which puts significant stress on the server. For high-traffic websites, this can become resource-intensive, requiring more processing to handle multiple requests simultaneously.

2. Increased Latency on User Interactions - In SSR, every time a user interacts with the page in a way that changes the whole view, like navigating to a new page, the browser sends a request to the server. This can increase response times, potentially leading to a poorer user experience and additional load on the server.

When to use Client-Side Rendering

1. High User Interactions - If your website involves high user interactions like dashboards or Single Page Applications (SPA), and the content needs to be loaded dynamically, it's better to use CSR as it updates content without reloading the page.

2. Less Server Load - By transferring the rendering process to the client side, the load on the server is reduced during heavy traffic. The content can be updated directly by the browser (the client side) without involving the server.

When to use Server-Side Rendering

1. SEO Implementation - If your website needs a higher rank and better visibility, it's better to use server-side rendering.

2. Application Performance - If you want to load your web pages consistently even on low-powered devices, it's better to use SSR as all the rendering is done on the server.

3. Static Pages - If your website serves mostly static content like documentation that doesn't change often, SSR will ensure a better user experience.